이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ

게시글

강좌1 - React - 2년 전 등록 / 한 달 전 수정

리액트(ReactJS)?

조회수:
0
이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ
이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ

안녕하세요! 새로운 카테고리를 만들었습니다. 바로 React.js에 대한 강좌입니다!

React는 페이스북이 만든, MVC 패턴 중 V를 담당하는 라이브러리입니다. 페이스북이 만들었기 때문에 당연히 페이스북, 인스타그램이 쓰고 있습니다. 또한 에어비앤비나, 테슬라, 야후에서도 쓰입니다. 대기업들이 많이 쓰고 있기 때문에 신뢰가 가죠. 뷰만 담당하기 때문에 M이나 C는 다른 라이브러리나 패키지로 보완해주어야 합니다.

현재 매우 인기가 높습니다. Angular, Vue와 함께 프론트 프레임워크 3대장이라고 불립니다(리액트는 라이브러리이기는 하지만 Redux나 MobX, react-router와 함께 프레임워크처럼 사용됩니다). 컴포넌트 시스템을 구현했기 때문에 매우 효율적으로 코딩할 수 있습니다. 컴포넌트란, 쉽게 생각하면 웹 사이트를 조각낸 것입니다. 그 조각 하나 하나가 각자 기능하는 완성품이죠.

제 홈페이지가 React로 만들어졌으니 댓글 창이 어떤 컴포넌트로, 어떻게 구성되어 있는지 볼까요?

undefined

제 댓글창입니다! 이 댓글창(빨강)이 하나의 컴포넌트입니다. 그리고 댓글을 입력하는 input 부분(주황)과 밑에 댓글 박스(노랑), 댓글 하나하나(초록)가 각각 다 컴포넌트고요. 거기에 댓글을 쓴 사람의 아이콘과 이름을 나타내는 부분(파랑)이 또 다른 컴포넌트입니다. 즉, 위의 사진에는 컴포넌트가 총 11개가 들어있습니다. (수정 전에는 12개라고 했는데 다시 세어 보니까 11개네요. 그리고 지금은 날짜와 메뉴 부분도 컴포넌트로 분리되어 총 15개가 되었습니다.)

너무 잘게 쪼갠 게 아니냐고요? 여기서 더 쪼갤 수도 있습니다. 그리고 React는 쪼갤수록 좋습니다. 컴포넌트를 잘게 쪼개면 재사용성이 높아집니다. 즉, 매번 하드코딩해야 하는 게 아니라 해당 컴포넌트를 불러오기만 하면 됩니다. 컴포넌트를 잘게 쪼개야 사이트 규모가 커졌을 때 코드 관리가 편해집니다. 하나의 컴포넌트가 하나의 기능만 하면 에러를 잡기도 쉽습니다.

업데이트 빈도가 높아도 그렇게 무리가 가지 않는데, React는 가상 DOM을 사용해 브라우저의 부담을 줄였기 때문입니다. DOM 조작이 브라우저에 엄청 무리를 주기 때문에 가상 DOM을 만들어 달라진 부분만 비교해 업데이트합니다. 물론 프레임워크 없이 최적화한 것보다는 느리지만, 그래도 쓸 만 하기 때문에 쓰는 겁니다. 가상이라는 특성을 활용해, 리액트를 모바일과 데스크탑 애플리케이션에서도 사용 가능합니다.

컴포넌트는 재사용 가능할 정도로만 쪼개서 사용하면 됩니다. 위의 댓글 창에 컴포넌트가 15개가 들어있지만, 실제 종류는 6가지입니다. 댓글 컴포넌트와 프로필 컴포넌트, 댓글 메뉴 컴포넌트가 네 번 재활용되었기 때문이죠.

로그인 후 홈페이지 상단의 프로필을 보시면

undefined

여기에서도 댓글에 사용된 프로필 컴포넌트가 재사용되고 있습니다. (디자인이 개편되어 바뀌었을 수도 있습니다)

컴포넌트의 두 가지 핵심 원리, 독립적으로 기능할 것재사용 가능할 것을 꼭 기억하세요.

React는 npm에서

npm install react react-dom

커맨드로 다운받으면 됩니다. react-dom 패키지도 같이 다운받았는데요. 이 패키지가 있어야 React로 만들어진 DOM과
가상 DOM을 실제 DOM에 렌더링할 수 있습니다. npm을 사용하지 않는다면 script로 직접 추가할 수 있습니다. (하지만 추천하지 않습니다. 나중에 가면 수없이 많은 라이브러리를 추가해야 하는데, script로 일일이 넣기는 좀 무리입니다. 또한 babel을 사용할 경우 프로세스가 복잡해집니다. React에서도 웹팩과 npm을 사용하기를 추천합니다.)

다음 시간에는 React 컴포넌트를 만드는 방법과 React만의 특수한 문법 JSX에 대해 알아보겠습니다!

목록
투표로 게시글에 관해 피드백을 해주시면 많은 도움이 됩니다. 오류가 있다면 어떤 부분에 오류가 있는지도 알려주세요! 잘못된 정보가 퍼져나가지 않도록 도와주세요.
Copyright © 2016- 무단 전재 및 재배포 금지

댓글

6개의 댓글이 있습니다.
3달 전
안녕하세요 친절한 설명 감사합니다. 궁금한 점이 있는데 React 안에서 라이브러리를 사용하지 않고 페이지간의 이동이 가능한 라우팅이 가능한가요? React-router라는 유용한 라이브러리? 프레임워크?가 존재한다고 알고 있습니다. 그런데 제가 본 다른 듀토리얼 에서는 React 안에서 라우팅이 가능하긴한데 (라이브러리 없이) 여러가지로 복잡하다고 설명을 하고 있었습니다. 그렇다면 MVC 패턴에서 V만 담당하는 것이 아닌것같은데 제가 습득한 지식과 혼동이 와서 난잡하게 질문드립니다.
3달 전
react-router도 결국은 자바스크립트로 만들어진 라이브러리입니다. 자바스크립트를 통해서라면 당연히 페이지간의 라우팅이 가능합니다. 그런데 라우팅이 된다고 해서 MC를 담당한다고 보기는 무리가 있습니다. MC는 데이터를 통제하는 부분이 있어야 합니다.
10달 전
ZeroCho님 create-react-app으로 만든 프로젝트에서 eject를 하면 package.json에서 모든 패키지들이 devDependencies가 아닌 dependencies에 적힙니다. 제가 알기론 빌드에 필요한 패키지들은 devDependencies에 넣는 걸로 알고 있습니다. 그래서 이 문제를 검색하다, https://github.com/facebookincubator/create-react-app/issues/2696 이슈를 봤는데 의도적으로 그렇게 했다는군요. 제가 지금까지 알고 있었던거랑 충돌해서 혼란스럽습니다. 어떻게 생각하시나요?
10달 전
앞으로 설치할 개발용 패키지를 모두 devDependencies가 아닌 dependencies에 작성해야 할까요?
10달 전
아뇨 그대로 devDependencies에 작성하시면 됩니다. 근데 꼭 devDependencies를 사용하는 게 필수는 아니기 때문에 create-react-app처럼 할 수도 있는 겁니다. 하지만 devDependencies를 사용했을 때 패키지 관리가 쉽기 때문에 저는 사용하는 걸 추천합니다.
10달 전
리액트프로젝트를 빌드하여 build등록부를 xampp의 하위등록부에 넣고 실행시키려면 어떻게 해야 하는지요.
2년 전
가장 DOM이라고 오타가있네요 ㅋㅋㅋ
일 년 전
수정했습니다!
2년 전
그냥 제생각이지만 컴포넌트가 12개로 나뉘어져있다고 하는데 실례가 안된다면 어떻게 12개인지 표시 가능하실까요??
2년 전
그림판으로 표시해보겠습니다! 바꾸고 나서 메일로 알려드릴게요!
2년 전
표시했습니다! 감사합니다~
2년 전
감사합니다 ㅎㅎ 12개 찾았어요 ㅎ
2년 전
감사합니다.
2년 전
새해 복 많이 받으세요~