State 관리

State 관리

Tags

React

Frontend

Published

Author

state 구조화 원칙

관련 state를 그룹화합니다. 항상 두개 이상의 state 변수를 동시에 업데이트하는 경우 단일 state 변수로 병합하는 것이 좋습니다.

state의 모순을 피하세요.

불필요한 state를 피하세요.

state 중복을 피하세요.

깊게 중첩된 state는 피하세요.

📌

props를 state에 그래도 미러링하지 마세요


function Message({ messageColor }) {
  const [color, setColor] = useState(messageColor);

color state 변수는 messageColor props로 초기화됩니다. 문제는 부모 컴포넌트가 나중에 다른 messageColor 값을 전달한다면 color state 변수가 업데이트가 되지 않는다.

reducer로 state 로직 통합하기

useState에서 useReducer로 마이그레이션하는 방법

state를 설정하는 것에서 action들을 전달하는 것으로 변경하기

reducer 함수 작성하기

컴포넌트에서 reducer 사용하기

useReducer Hook

인자

reducer함수

초기 state

반환

state 값

dispatch 함수 (사용자의 action을 reducer에 전달해주는 함수)

Context

📌

리액트 컴포넌트 간에 어떠한 값을 공유할 수 있게 해주는 기능

context를 생성합니다.

데이터가 필요한 컴포넌트에서 해당 context를 사용합니다.

데이터를 지정하는 컴포넌트에서 해당 context를 제공합니다.

Step 1 : Context 만들기

컴포넌트에서 사용할 수 있도록 파일에서 내보내기를 해야 합니다.

import { createContext } from ‘react’;

Step 2 : context 사용하기

React와 context에 useContext Hook을 가져옵니다.

useContext는 useState 및 useReducer와 마찬가지로, React 컴포넌트 최상단에서만 Hook을 호출할 수 있습니다.

Step 3 : context 제공하기


import { LevelContext } from './LevelContext.js';

export default function Section({ level, children }) {
  return (
    <section className="section">
      <LevelContext.Provider value={level}>
        {children}
      </LevelContext.Provider>
    </section>
  );
}

<Section>안에 있는 컴포넌트가 LevelContext를 요청하면 이 level을 제공하라고 지시합니다.

컴포넌트는 그 위에 있는 UI 트리에서 가장 가까운 <LevelContext.Provider>의 값을 사용합니다.

Context를 사용하면 “주변 환경에 적응”하고 렌더링되는 위치(context)에 따라 다르게 표시되는 컴포넌트를 작성할 수 있습니다.