React_설명

 React란? 

1) 2013년에 페이스북에서 만든 라이브러리다.

2) components로 이루어져, 재사용성이 뛰어나다.

3) Virtual DOM 형식이다.

 ( 리스트가 10개 있는데 1개만 변화가 있을 때 > 

    -Real DOM : 전체를 업데이트해야 한다.

    -Virtual DOM : 한개만 업데이트 하면 된다.

4) 과거와 달리 최근엔 Babel과 Webpack이 자동으로 설정되어 설치된다.

   (예전에는 Babel과 Webpack을 따로 설정해 주어야 했다.)

 

** Webpack이 설치된 react 패키지 중 [ src파일 ]을 관리해 준다. (public 파일은 x) 

  >> 따라서 이미지 등을 저장하고 싶으면 src 파일에 저장해야 webpack이 bundle 한다.

 

 Babel이란? 

: 최신 자바스크립트 문법을 구형 브라우저에서도 실행될 수 있도록..

ES5 javascript 문법으로 변환시켜준다.

 

 Webpack이란? 

: 복잡한 라이브러리, 모듈 등을 Bundle(묶어주는)해준다.

 

 

 boiler-plate [src]파일 구성 

_actions 폴더 : Redux를 위한 폴더들

_reducer 폴더 : Redux를 위한 폴더들

 

components/views 폴더 : Page들(footer, landingpage, navbar 등)을 넣는다.

components/views/Sections 폴더 : 해당 페이지 관련 css파일이나 component를 넣는다.

 

App.js : Routing 관련 일 처리 (routing 모음 및 분류)

Config.js : 환경 변수를 정함

 

hoc 폴더 : Higher Order Component

  ( 다른 컴포넌트를 갖는 function이다.  ex) auth에는 admin, loggedin user 등 role에 따라 수행되는 components가 있다. role에 따라 알맞은 component가 수행되도록 한다.)

 

utils 폴더 : 여러 군데에서 쓰일 수 있는 것들을 이곳에 넣어둬서 어디서든 쓸 수 있게 해줌

 

 

 Hooks 

 

*Class Component : 제공 기능이 많음 / 코드가 길고, 복잡하고, 느리다.

 

*Functional Component : 제공 기능이 한정적 / 코드가 짧고, 간단하고, 빠르다.

 

 

 

 

 

 

 

React 16.8 버전부터 Hooks을 업데이트함.

>> Functional Compo에서도 다양한 기능을 사용할 수 있게 됨.

Class Component(왼쪽 사진) , Hooks(오른쪽 사진)

 

componentDidMount =>(대체) useEffect

this.state =>(대체) useState("")