👮 리액트 훅들

👻 useState

import { useState } from "react";

const [state, setState] = useState(initialState);

• 함수형 컴포넌트 내부에서 상태를 정의하고, 관리할 수 있게 해주는 훅
• 인수: state의 초기값을 넘겨줌 (아무런 값 넘기지 않을 시, undefined)

🤔 다음 코드가 동작하지 않는 이유는?

function Component() {
  let state = "hello";

  function handleButtonClick() {
    state = "hi";
  }

  return (
    <>
      <h1>{state}</h1>
      <button onClick={handleButtonClick}>hi</button>
    </>
  );
}

• 이유: 리렌더링을 발생시키기 위한 조건을 전혀 충족하지 못하고 있기 때문

  • 리액트의 리렌더링 조건
    • 클래스형 컴포넌트
      • setState가 실행되는 경우
      • forceUpdate가 실행되는 경우
    • 함수형 컴포넌트
      • useState()의 두 번째 배열 요소인 setter가 실행되는 경우
      • useReducer()의 두 번째 배열 요소인 dispatch가 실행되는 경우
    • 컴포넌트의 key props가 변경되는 경우

• 렌더링이 일어나게끔 변경한 코드

  function Component() {
    const [, triggerRender] = useState();
  
    let state = "hello";
  
    function handleButtonClick() {
      state = "hi";
      triggerRender();
    }
  
    return (
      <>
        <h1>{state}</h1>
        <button onClick={handleButtonClick}>hi</button>
      </>
    );
  }
  
  

  • state는 업데이트되고 있지만 state의 변경된 값이 렌더링되고 있지 않음
  • 이유:
    • 함수형 컴포넌트에서 반환한 결과물인 return의 값을 비교해 실행되는데
    • 매번 렌더링이 발생될 때마다 함수는 다시 새롭게 실행되고, 새롭게 실행되는 함수에서 state는 매번 hello로 초기화됨

👀 useState 내부의 모습을 구현한 모습

실제 코드는 아님. 실제 코드는 useReducer를 사용해 구현돼 있음

const MyReact = function () {
  const global = {};
  let index = 0;

  function useState(initialState) {
    if (!global.states) {
      global.states = [];
    }

    const currentState = global.states[index] || initialState;
    global.states[index] = currentState;

    const setState = (function () {
      // 현재 index를 클로저로 가둬놔서 이후에도 계속해서 동일한 index에 접근할 수 있도록 함
      let currentIndex = index;
      return function (value) {
        global.states[currentIndex] = value;
      };
    })();

    index = index + 1;

    return [currentState, setState];
  }

  // 실제 useState를 사용하는 컴포넌트
  function Component() {
    const [value, setValue] = useState(0);
    // ...
  }
};

• 함수의 실행이 끝났음에도 함수가 선언된 환경을 기억할 수 있는 방법: 클로저 ⭐️
  • 예제의 경우 MyReact라고 불리는 클로저 내부에 useState와 관련된 정보를 저장해 두고, 이를 필요할 때마다 꺼내놓는 형식으로 구성돼 있음

👀 게으른 초기화

• useState에 변수 대신 함수를 넘기는 것
• state가 처음 만들어질 때만 사용됨. 이후에 리렌더링이 발생된다면 이 함수의 실행은 무시됨

// 바로 값을 집어넣음
const [count, setCount] = useState(
  Number.parseInt(window.localStorage.getItem(cacheKey))
);
// 함수를 실행해 값을 반환 -> 게으른 초기화
const [count, setCount] = useState(() =>
  Number.parseInt(window.localStorage.getItem(cacheKey))
);

• ⭐️ 사용 권장되는 경우

  useState의 초기값이 복잡하거나 무거운 연산을 포함하는 등 실행 비용이 많이 드는 경우

  • localStorage나 sessionStorage에 대한 접근
  • map, filter, find 같은 배열에 대한 접근
  • 초깃값 계산을 위해 함수 호출이 필요할 때
  • EX. Number.parseInt(window.localStorage.getItem(cacheKey))와 같이 한 번 실행되는 데 어느 정도 비용이 드는 값

👻 useEffect

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