06. 리액트 훅 (hook)

컴포넌트에 기능을 추가할때 사용하는 함수

- 컴포넌트에 상탯값 추가, 자식요소에 접근

- 리액트 16.8에 새로 추가됨 

 그 전에는 클래스형 컴포넌트 사용

 클래스형 컴포넌트보다 장점이 많으며 리액트 팀에서도 훅에 집중하고 있음

리액트 훅으로 작성하는것을 추천함.

 

useState :상탯값 추가

useEffect :부수 효과 처리 - 외부의 상태를 변경하는 것을 말함.

- 서버 API호출, 이벤트 핸들러 등록하고 해제 하는 등의 효과를 부수 효과라고함.

 

ReactDOM.unstabel_batchedUpdates()

 

1. useEffect(effect) ==> 컴포넌트가 렌더링될 때마다 호출됩니다.
2. useEffect(effect, []) ==> 첫 번째 렌더링 후에만 호출됩니다.
3. useEffect(effect, [userId]) ==> 첫 번째 렌더링 후에 호출되며, 이후에 userId가 변경될 때마다 호출됩니다.

3번에서 userId 라는 값은 항상 렌더링과 관련된 값이어야 합니다.
`렌더링과 관련된 값` 이라는 것은 그 값이 변경되면 컴포넌트가 다시 렌더링 되는지를 보고 알 수 있습니다.
어떤 변수의 값이 변경됐는데 컴포넌트가 다시 렌더링되지 않는다면 그 변수는 deps 배열에 넣을 필요가 없습니다.

결국 `렌더링과 관련된 값` 이라는 것은 컴포넌트 상태값, 속성값 등을 말하는것.
전역 변수 등은 `렌더링과 관련된 값` 이 아님