웹을 개발하게되면 보통 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

http://score.eastflag.co.kr

React Element

+ 알아야 할 것 페이지 방식으로 리액트 개발하기 React 코어의

Read more ...

React JSX

+ 알아야 할 것createElement와 JSX와의 관계JSX 문법JSX expressionbabel의 역할+ 실습createElement...

Read more ...

function component

리액트에서 가장 중요한 개념 3가지는 component, state, props 이다. component는

Read more ...

props – 부모가 자식에게

+ 알아야 할 것props란 무엇인가, 왜 사용해야 하는가props의 특징 2가지+

Read more ...

state 와 class componen

+ 알아야 할 것언제 state를 사용하는가?local state와 application state의 개념state의

Read more ...

props – 자식이 부모에게

+ 알아야 할 것함수를 props로 사용하여 자식 컴포넌트가 부모와 통신이

Read more ...

페이지방식 전체 소스

index.html [crayon-65f96f5caba78645358808/] app.js [crayon-65f96f5caba7e791390200/] app.css [crayon-65f96f5caba80269401527/]

Read more ...