React란?

React는 2013년에 발표되어 약 8년이 지났는데도 현재까지 인기가 매우 높다. React는 Angular, Vue와 함께 프론트 프레임 워크 3대장이라고 불릴 정도이다.(리액트는 라이브러리이지만, Redux나 MobX, react-router와 함께 프레임 워크처럼 사용된다.) 페이스북이 만들었기 때문에 당연히 페이스북, 인스타그램에서 쓰이고 있으며, 에어비앤비나, 테슬라, 야후등에서도 사용하고 있다고 알려져 있다.

React는 페이스북이 만든, MVC 패턴 중 V를 담당하는 라이브러리이다. React는 컴포넌트 시스템으로 구현했기 때문에 재사용면에서 매우 효율적으로 코딩할 수 있다. (여기서 컴포넌트 시스템이란, 웹 사이트를 여러 조각으로 잘랐을 때 각 조각 하나 하나가 컴포넌트이며, 각자의 기능을 한다는 의미이다.)

아래 사진은 React로 만들어진 에어비엔비 홈페이지의 컴포넌트 일부분이다.

1) 컴포넌트 예시

위 그림과 같이 컴포넌트에 해당하는 곳 마다 색깔있는 테두리도 색칠한 결과, 8개의 컴포넌트가 존재하는 것을 알 수 있다.

더 쪼갤 수 있지 않느냐? 더 적게 쪼갤 수 있지 않느냐? 라는 말이 충분히 나올 수 있다. 물론 React는 최대한 많이 쪼깨는 것이 좋다. 컴포넌트를 잘게 쪼개면 재사용성이 높아지기 때문이다. 재사용성이 높아지면 매번 하드 코딩하는 것이 아니라 해당 컴포넌트를 불러오기만 하면 되기 때문에 사이트 규모가 커졌을 때 코드를 관리가 편해진다. 게다가 하나의 컴포넌트가 하나의 기능만 하면 에러를 잡기도 쉬워짐으로 관리하기도 좋다. 

그러나 컴포넌트를 지나치게 쪼개면 개발시간이 걸어지고, 관리해야하는 파일이 많아지는 번거로움이 생긴다. 따라서, 컴포넌트는 재사용 가능할 정도로만 쪼개서 사용하면 된다. 컴포넌트의 두 가지 핵심 원리는 독립적으로 기능할 것과 재사용 가능할 것이므로 이 두가지만 지키는 것이 가장 중요하겠다.

React는 npm에서

npm install react react-dom

을 통해 다운로드 받을 수 있다. 위의 스크립트에서 react-dom 패키지도 같이 다운받았는데, 이 패키지가 있어야 React로 만들어진 DOM과 가상 DOM을 실제 DOM에 렌더링할 수 있다. DOM에 대한 이야기는 다음 글에서 알아보도록 하겠다.