<aside> 💡 모던 리액트 Deep Dive의 3장을 읽고 정리한 내용입니다.

</aside>

3.1 리액트의 모든 훅 파헤치기

• 이하 내용에서 렌더링은 렌더와 커밋 단계를 모두 포함하는 개념을 지칭합니다.
• 기억해야 할 내용은 함수형 컴포넌트는 매번 함수를 실행해 렌더링을 수행한다는 점입니다.

3.1.1 useState

import { useState } from 'react'

const [state, setState] = useState(initialState)

• 함수형 컴포넌트 내부에서 상태를 정의하고, 관리할 수 있게 해주는 훅

• 리액트의 렌더링과 상태

  export default function App() {
    const [,setState] = useState(0)
    let state = 'hello'
  
    function handleButtonClick() {
      state = 'hi'
      setState()
    }
    
    return (
      <main>
        <h1>{state}</h1>
        <button onClick={handleButtonClick}>hi</button>
      </main>
    )
  }
  

  • 리액트의 렌더링은 함수형 컴포넌트에서 반환한 결과물인 return의 값을 비교해 다른 경우에 커밋 단계 실행
  • 렌더링 시 함수를 실행하고, state가 초기화되므로 return의 결과물이 동일하여 렌더링 X

• useState의 내부 구현 생각해보기

  const MyReact = function(){
      const global = {}
      let index = 0
  
      function useState(initialState) {
          // 애플리케이션 최초 접근 시, 전체 states 배열 초기화 
          if (!global.states) { 
              global.states = []
          }
  
          // state: 현재 상태값 확인, 없으면 초깃값 설정
          const currentState = global.states[index] || initialState
          global.states[index = currentState
          
          // setter: index를 기억하는 즉시실행함수 
          const setState = (function () {
              let currentIndex = index
  
              return function (value) {
                  // 상태 업데이트 
                  global.states[currentIndex] = value
                  // 이후 컴포넌트 렌더..
              }
          })()  
      }
  
      // 각 state마다 새로운 index 할당 
      index += 1
  
      return [currentState, setState]
      
  }
  

  • 클로저를 활용해 함수형 컴포넌트를 매번 실행할 때 state 값을 유지하고 사용, 외부에 값을 노출시키지 않고 리액트 내에서만 사용 가능

• 게으른 초기화(lazy initialization)

  const [count, setCount] = useState(() => 
      Number.parseInt(window.localStorage.getItem(cacheKey)))
  

  • useState(함수)
  • useState의 초깃값이 복잡하거나 무거운 연산을 포함할 경우 사용
    • localStorage, sessionStorage에 대한 접근, 배열에 대한 접근(map, filter, find), 초깃값 계산을 위해 함수 호출이 필요한 경우
  • 오로지 state가 처음 만들어질 때 사용하며, 리렌더링 시 이 함수의 실행은 무시

3.1.2 useEffect

  useEffect(() => {
    
  }, [props, state])

• 렌더링 때마다 의존성에 있는 컴포넌트의 값들을 활용해 동기적으로 부수 효과를 만드는 메커니즘
• **어떤 상태값과 함께 실행(props, state)**되는지가 중요
• 첫 번째 인수로 부수 효과가 포함된 함수를, 두 번째 인수로 의존성 배열을 전달