프레임 워크 동작 원리

 

프레임 워크 동작 원리

1. State & Props
1) ReactDOM
: react를 스크립트 태그로 불러온다면 ReactDOM 글로벌 영역에서 상위 레벨 API를 이용할 수 있다.

- npm과 ES6를 사용한다면 import ReactDOM from 'react-dom' 을 쓸 수 있다.
 
2) State
: 컴포넌트의 상태, 변경이 가능하다.

3) Props
: 불변 객체를 받는다. 위에서 아래로만 흐르는 단방향 특성 

 

 

2. Hooks
1) useState
: 상태관리 후 렌더링 

2) useEffect
: 컴포넌트 mount, unmount 될 때 

3) useRef
: 원하는 DOM Node에 접근해 레퍼런스를 얻는 것에 목적 


3. 컴포넌트 최적화 방안
1) React.memo
: 어떤 값이나 함수 또는 컴포넌트를 기억할 수 있다.

2) useCallback
: hooks로서 함수 컴포넌트의 body에서 작동한다. 

 

 

4. 불변성
: react의 Props와 State는 모두 불변성을 유지하는 것이 필요하다.
불변성을 유지하면서 상태를 다루게 되면 이 상태를 다루는 함수 내부에서 side effect가 발생할 염려가 줄어든다. 

5. 리엑트 라우터
- Link : a태그


6. 모듈 번들러
: webpack


7. 상태관리 
1) redux : 모든 상태를 중앙 저장소에서 관리하여 리엑트의 상태관리를 효율적으로 할 수 있게 도와주는 라이브러리  
2) react-redux-use-selector : state를 조회
3) react-redux-use-dispatch : action을 발생 
4) redux-middleware : 액션과 스토어 사이에 임의의 기능을 넣어 확장하는 방법