리액트(React) 그게 뭔데?

리액트 리액트

말은 많이 들어봤다. 하지만 이것이 언어인지 프레임워크인지 감이 잘 오지 않았다.

이번에 리액트의 기초에 대해 공부하며 알게된 것들을 정리해보고자 한다.

 

리액트, 도대체 뭔데?

---

리액트는 컴포넌트를 만들고 사용하는 거라고 보면 된다. 어플을 보면 뒤로가는 백버튼은 모두 똑같이 생긴 것을 알 수 있다. 이런 경우 이 백버튼을 리액트 컴포넌트로 만들어두고 꺼내 쓰면 참 편리하다. 그렇기 때문에 중복되는 UI 요소는 리액트로 만든 후 불러와서 사용하면 된다. 이런 경우 버튼 디자인 수정이 필요할 때 컴포넌트만 수정하면 모든 버튼에 적용되기 때문에 유지보수에도 이점도 있다.

 

vue, angula도 있는데 왜 다들 리액트를 할까?

---

리액트 외에도 vue나 angula 등 좋은 프레임워크가 많은데 대부분의 실무에서는 리액트를 사용한다. 그 이유가 뭘까?

react는 라이브러리다!

다양한 이유가 있는데 우선 vue나 angula는 프레임워크지만 React는 라이브러리에 가깝다. 라이브러리의 장점은 자유도가 높다는 것. 프레임워크를 사용하기 위해서는 그 프레임워크가 지원하는 문법에 따라 작성해야 제대로 작동한다. 하지만 리액트는 프레임워크가 짜 놓은 틀에서만 움직이지 않고 자유롭게 흐름을 제어할 수 있다.

호환성이 좋다!

react는 기본적으로 웹을 만드는 도구지만 React Native로 어플도 제작할 수 있다. 다양한 호환성 덕분에 웹, 안드로이드, IOS, 데스크톱을 모두 만들 수 있다. 

유저가 많고, 정보도 많다.

이런 장점으로 리액트를 많이 사용하다보니 커뮤니티나 정보 활성화가 많이 되었다. 구글에 조금만 검색해봐도 리액트 구문이나 에러 상황을 해결할 수 있다. 개인적으로 정보가 많으면 심적으로도 안정이 된다.

 

어떻게 사용하는데?

---

원래 웹을 구현할 때 HTML, CSS, Javascript 3가지 파일로 구성된다. 근데 리액트는 JS 파일로 사용하기 때문에 CSS와 HTML 파일을 사용하지 않아도 된다.

 

다만, JS에서 사용하는 것이다 보니 기존에 사용하던 css나 html 선언 방식이 조금 달라진다. 변수 선언 하듯이 해야한다.

 

그 외에도 다양한 사용법이 존재하는데 개념만 정리하는 글이기 때문에 다음 글에서 정리할 예정이다.

 

결론은, 리액트 열심히 배워보자!

 

---

2024.01.25: 리액트를 어느정도 사용해본 현재. 위의 내용이 얼마나 엉터리인지... 리액트를 컴포넌트 만드는 도구로 여기다니.. 라이브러리니 프레임워크니... 제대로 사용해보지도 않고 그냥 블로그 베끼기로 쓰는 글의 표본이랄까.. 부끄럽지만 남겨둔다..