출처: 모던 리액트 Deep Dive 3장

Hook

• 클래스 컴포넌트에서만 가능했던 state, ref등 리액트 핵심 기능을 함수에서도 가능하게
• 클래스 컴포넌트보다 간결하게 작성

useState

• 함수 컴포넌트 내부에서 상태 정의, 상태 관리
• return : 배열

const [state, setState]= useState(initialState)

state 초기값 넘겨주지 않으면 undefined

• state : 값 자체 사용
• setState : state 값 변경

리액트 렌더링 : 함수컴포넌트 return & 클래스 컴포넌트 render() 실행 후 이전 리액트 트리와 비교하여 변경사항만 리렌더링

state가 상수가 아니라 함수/배열 차원이라면?
setState 호출하여 state 값 변경하면 리턴되도록

function useState(initialValue){
  let internalState = initialValue;
  
  function state(){
    return internalState
  }
  
  function setState(newValue){
    internalState = newValue
  }
  
  return [state,setState]
}

const [value,setValue] = useState(0)
setValue(1);
console.log(value()) //1

+) closure 사용하여 내부에 선언된 setState가 함수 실행 종료 후에도 지역변수인 state 계속 참조할 수 있도록 구현되었다고 추측됨

게으른 초기화

const [count,setCount] = useState(() => {
	console.log('복잡한 연산')
    return 0
}) 

useState 안에 원시값 대신 함수를 넘기는 것

• 처음 구동 시에만 실행되고 리렌더링 시에는 실행되지 않음
• localStorage, sessionStorage, map, filter,find ... 무거운 연산시에 사용하도록 권고

useEffect

• 정의 : 애플리케이션 내 컴포넌트의 여러 값들을 활용해 동기적으로 부수효과를 만드는 매커니즘
  - 언제 보다 어떤 상태값과 함께 실행되는지가 중요

function Component() {
  useEffect(() => {
    //do something
  }, [props, state])
}

• 인수 : [실행할 부수효과가 포함된 함수, 의존성 배열]

• state와 props 변화 속에서 일어나는 렌더링 과정에서 실행되는 부수 효과 함수

• return () : 클린업 함수
  - 이전 state를 참조해 실행

  • 변경된 값을 읽는 것이 아니라 정의 당시 선언된 이전 값을 보고 실행
  • 이벤트 제거를 여기서 실행해야함 -> 생명주기 관리

• 의존성 배열
  - 빈 배열 : 비교할 의존성 없어 최초 렌더링 직후에만 실행, 더이상 실행 x

  • 아무 값도 넘겨주지 않는다면 렌더링 발생할 때마다 실행
    • SSR 관점) Client Side 실행 보장
      • window 객체 접근 의존 코드 사용 가능
      • 컴포넌트 렌더링 완료 후 실행되기 때문에 함수 컴포넌트 반환에 방해되지 않음
  • 이전 값과 현재 값의 얕은 비교 후 변경사항이 있다면 callback함수

• 잘못 사용하면 무한 루프에 빠지기도 함

• eslint-disable-line, react-hooks/exhaustive-deps 주석을 이용해 react-hooks/exhaustive-deps 경고 무시
  - useEffect 인수 내부에서 사용하는 값 중 의존성 배열에 포함되어 있지 않은 값이 있을 때 발생

  • [] 의존성 => 컴포넌트 마운트 시점에만 무언가 실행하고자 하는 의도 가지고 작성됨 => componentDidMount에 기반한 접근법 ( 가급적 사용x )

• 첫번째 콜백 인수를 익명보다는 기명 함수로 작성하는 것이 좋음

• 거대한 useEffect일 수록 성능에 악영향
  - 여러 작은 useEffect로 분리

• 콜백 인수로 비동기 함수 바로 넣을 수 없음
  - 내부에서 선언하거나, 즉시 실행 비동기 함수는 가능

  • 클린업에서 비동기 함수 처리 추가 권고