리액트

React 란?

KairoYang 2020. 3. 11. 03:10

-라이브러리.

-components: 모듈과 비슷하게 컴포넌트로 이뤄져 있어서 재사용성이 뛰어남.

-virtual DOM: 

real DOM: 10개 리스트가 있다. 그중 한개면 바꾼다면 전체를 다 없에고 다 불러와야해

virtual DOM: 10개중 한개만 바꾸면 그것만 바꿀 수있다.

 -> 방법은: 리스트를 스냅샷을 찍어서 기억해놔.

   스냅샷 찍어둔것과 새로운 것과 차이를 분석해서. 바뀐 부분만 ,realdom에서 바꿔주는거야.

 

create-react-app으로 babel 과 웹펙을 설정할 수 잇어.

babel: js가 새로 나오는데 최신 문법을 사용하여도 구형에서도 가능하도록 변환해주는것

webpack: 예전 웹은 html,css,js였어, 요즘은 라이브러리 프레임워크 많이 사용해서. 웹펙을 이용해서 번들(묶어주는거야)

, src부분만 웹펙이 해줘. 이지는 src부분에 넣어야 웹펙 기능이 작동해.

 

리액트 생성할때

npx create-react-app  .    cd client 

 NPX:사용하여 DISK SPACE 낭비하지 않고, 최신 버전 사용.

 

hoc:는 function.(다른 컴포넌트를 받은 다음에 새로운 컴포넌트를 RETURN)

-Const enhancedComponent = higeOrderComponent(WrappedComponent);

 -Auth(HOC)이라는 곳에서 로그인 컴포넌트등 이있는데 관리자만 들어갈 수 있어. 이 컴포넌트에 들어올때 관리자인지 아닌지.  

 

 

 

App.js-라우팅하는 곳

react-router-dom을 사용해 home about board로 이동해.(reacttraining.com)