웹을 개발하게되면 보통 html 페이지에 css, javascript 를 포함시켜서 개발하는게 일반적인 방법이다. 이렇게 개발시에는 여러개의 페이지가 모여서 하나의 웹 사이트를 이루게 되는 페이지 방식 개발이 된다.
하지만, angular, react, Vue 같은 최신 프런트엔드로 개발시에는 웹팩과 npm 같은 모듈방식으로 구성된 페이지가 하나밖에 없는 Single Page Application 방식으로 개발하게 된다. angular의 경우는 angular-cli 방식, react는 create-react-app 방식 vue는 vue-cli 와 같은 방식이 그러하다.
리액트를 개발시에도 create-react-app 과 같은 CLI로 개발하는 방식이 일반적이고, 이 방식은 전체 웹사이트를 하나로 묶어서 개발하게 되므로 이제는 웹사이트 개발이라고 하기 보다 웹 애플리케이션 웹 앱 개발이라고 하게 된다.
하지만, 만일 현재 개발중인 사이트가 있는데, 만일 특정 페이지에만 리액트를 적용하고 싶다거나 아주 간단하게 한페이지만 리액트로 개발해보겠다라면 현재의 이 방법이 아주 적합하다고 할수 있겠다.
이 과정은 먼저 리액트를 javascript 모듈로 script tag에 포함시키는 페이지 방식으로 개발해보면서 리액트 튜토리얼의 메인 컨셉을 살펴보겠다.
리액트 메인 컨셉을 하나하나 설명하는것은 지루할 수 있으므로 Scoreboard라는 standalone 앱을 만들어 가면서 react의 React Element, JSX, props, state 등의 기본 컨셉을 살펴보겠다.
git source:
https://github.com/eastflag/react-scoreboard
demo site