안녕하세요! 새로운 카테고리를 만들었습니다. 바로 React.js에 대한 강좌입니다!
React는 페이스북이 만든, MVC 패턴 중 V를 담당하는 라이브러리입니다. 페이스북이 만들었기 때문에 당연히 페이스북, 인스타그램이 쓰고 있습니다. 또한 에어비앤비나, 테슬라, 야후에서도 쓰입니다. 대기업들이 많이 쓰고 있기 때문에 신뢰가 가죠. 뷰만 담당하기 때문에 M이나 C는 다른 라이브러리나 패키지로 보완해주어야 합니다.
현재 매우 인기가 높습니다. Angular, Vue와 함께 프론트 프레임워크 3대장이라고 불립니다(리액트는 라이브러리이기는 하지만 Redux나 MobX, react-router와 함께 프레임워크처럼 사용됩니다). 컴포넌트 시스템을 구현했기 때문에 매우 효율적으로 코딩할 수 있습니다. 컴포넌트란, 쉽게 생각하면 웹 사이트를 조각낸 것입니다. 그 조각 하나 하나가 각자 기능하는 완성품이죠.
제 홈페이지가 React로 만들어졌으니 댓글 창이 어떤 컴포넌트로, 어떻게 구성되어 있는지 볼까요?
제 댓글창입니다! 이 댓글창(빨강)이 하나의 컴포넌트입니다. 그리고 댓글을 입력하는 input 부분(주황)과 밑에 댓글 박스(노랑), 댓글 하나하나(초록)가 각각 다 컴포넌트고요. 거기에 댓글을 쓴 사람의 아이콘과 이름을 나타내는 부분(파랑)이 또 다른 컴포넌트입니다. 즉, 위의 사진에는 컴포넌트가 총 11개가 들어있습니다. (수정 전에는 12개라고 했는데 다시 세어 보니까 11개네요. 그리고 지금은 날짜와 메뉴 부분도 컴포넌트로 분리되어 총 15개가 되었습니다.)
너무 잘게 쪼갠 게 아니냐고요? 여기서 더 쪼갤 수도 있습니다. 그리고 React는 쪼갤수록 좋습니다. 컴포넌트를 잘게 쪼개면 재사용성이 높아집니다. 즉, 매번 하드코딩해야 하는 게 아니라 해당 컴포넌트를 불러오기만 하면 됩니다. 컴포넌트를 잘게 쪼개야 사이트 규모가 커졌을 때 코드 관리가 편해집니다. 하나의 컴포넌트가 하나의 기능만 하면 에러를 잡기도 쉽습니다.
업데이트 빈도가 높아도 그렇게 무리가 가지 않는데, React는 가상 DOM을 사용해 브라우저의 부담을 줄였기 때문입니다. DOM 조작이 브라우저에 엄청 무리를 주기 때문에 가상 DOM을 만들어 달라진 부분만 비교해 업데이트합니다. 물론 프레임워크 없이 최적화한 것보다는 느리지만, 그래도 쓸 만 하기 때문에 쓰는 겁니다. 가상이라는 특성을 활용해, 리액트를 모바일과 데스크탑 애플리케이션에서도 사용 가능합니다.
컴포넌트는 재사용 가능할 정도로만 쪼개서 사용하면 됩니다. 위의 댓글 창에 컴포넌트가 15개가 들어있지만, 실제 종류는 6가지입니다. 댓글 컴포넌트와 프로필 컴포넌트, 댓글 메뉴 컴포넌트가 네 번 재활용되었기 때문이죠.
로그인 후 홈페이지 상단의 프로필을 보시면
여기에서도 댓글에 사용된 프로필 컴포넌트가 재사용되고 있습니다. (디자인이 개편되어 바뀌었을 수도 있습니다)
컴포넌트의 두 가지 핵심 원리, 독립적으로 기능할 것과 재사용 가능할 것을 꼭 기억하세요.
React는 npm에서
npm install react react-dom커맨드로 다운받으면 됩니다. react-dom 패키지도 같이 다운받았는데요. 이 패키지가 있어야 React로 만들어진 DOM과
가상 DOM을 실제 DOM에 렌더링할 수 있습니다. npm을 사용하지 않는다면 script로 직접 추가할 수 있습니다. (하지만 추천하지 않습니다. 나중에 가면 수없이 많은 라이브러리를 추가해야 하는데, script로 일일이 넣기는 좀 무리입니다. 또한 babel을 사용할 경우 프로세스가 복잡해집니다. React에서도 웹팩과 npm을 사용하기를 추천합니다.)
다음 시간에는 React 컴포넌트를 만드는 방법과 React만의 특수한 문법 JSX에 대해 알아보겠습니다!
익명
