개요

ScoreBoard라는 앱을 개발하면서 (이 앱은 리액트 개발시 가장 많이 사용되는 Counter 앱과 todo 앱을 합친 앱) React 의 12가지 메인 컨셉을 배워갑니다.

먼저 페이지 방식으로 개발해보고 그 다음에 웹팩이 적용된 create react app CLI 로 마이그레이션 합니다.

페이지 방식과 CLI 방식에 대한 설명은 아래에 있습니다.

git 저장소 바로가기

데모사이트 바로가기

페이지 방식

php, jsp, asp 같은 서버 사이드 스크립트에 jquery 를 사용하고 있다면 react를 페이지 사이에 끼워서 사용할 수 있다. 웹 페이지 전체적으로 react를 적용하는것이 아니라 페이지 부분 부분에 끼워 넣을수 있는 방식이 script tag 페이지 방식이다. script 태그로 react 모듈을 글로벌로 적용하고 특정한 DOM 노드에 react 를 적용하는 방식이다.

여기에서는 react 홈페이지의 메인 컨셉을 이해하는것이 목표다. 
리액트라는 이름이 의미하는것이 무엇인지, react element가 무엇인지, JSX와 react element의 차이점이 무엇인지, 부모와 자식간의 통신은 어떻게 하는지, 컴포넌트가 무엇이고, 클래스 컴포넌트와 펑션 컴포넌트의 차이점이 무엇인지 등 리액트의 핵심 개념을 설명한다.

php, jsp, asp 같은 서버 사이드 스크립트에 jquery 를 사용하고 있다면 react를 페이지 사이에 끼워서 사용할 수 있다. 웹 페이지 전체적으로 react를 적용하는것이 아니라 페이지 부분 부분에 끼워 넣을수 있는 방식이 script tag 페이지 방식이다. script 태그로 react 모듈을 글로벌로 적용하고 특정한 DOM 노드에 react 를 적용하는 방식이다.

여기에서는 react 홈페이지의 메인 컨셉을 이해하는것이 목표다. 
리액트라는 이름이 의미하는것이 무엇인지, react element가 무엇인지, JSX와 react element의 차이점이 무엇인지, 부모와 자식간의 통신은 어떻게 하는지, 컴포넌트가 무엇이고, 클래스 컴포넌트와 펑션 컴포넌트의 차이점이 무엇인지 등 리액트의 핵심 개념을 설명한다.

create-react-app CLI 방식

웹사이트 전체를 리액트 앱으로 개발하기 위해서 create-react-app 이라는 리액트 CLI 툴을 사용한다. create-react-app 은 webpack 기반이므로 먼저 npm 과 webpack에 대한 선행 학습이 필요하다.

웹팩 튜토리얼은 여기를 참고하자.

CLI 방식으로 프로젝트를 구성한 뒤 페이지 방식으로 개발한 부분들을 변경 적용한다.