Context

Context란?

Context

• 어플리케이션에서 전반적으로 사용할 값을 관리
• 예) 사용자의 언어, 로그인 상태, UI 테마 등 환경설정
• 주의사항
  • Context와 컴포넌트가 연동되면 컴포넌트를 재사용하기 어려움
  • 자주 변경되는 상태인 경우, 사용하지 않는 것이 좋음
    • Context 내부의 값이 변경되면 Context를 사용하는 모든 자식 컴포넌트들이 리렌더링 됨

일반적인 전역 상태 관리 흐름

• 컴포넌트 여기저기서 필요한 데이터가 있는 경우
  • 주로 최상위 컴포넌트인 App의 state에 넣어서 관리

Props Drilling

Context를 사용한 전역 상태 관리 흐름

• 컴포넌트 여기저기서 필요한 데이터가 있는 경우
  • Context를 생성하여 한번에 원하는 값을 전달받음

Context 사용 방법

Context 객체 생성

• App.js
  • 모든 context를 App.js에다 만들 필요는 없지만, 전체적으로 적용할 때는 App.js에 만드는 게 바람직하다

import { createContext } from 'react';

// MyContext 객체 생성
const MyContext = createContext();

Context 객체 내 Provider 컴포넌트를 통한 데이터 전달

• Provider 컴포넌트의 하위 컴포넌트는 Context의 데이터에 접근 가능

function App() {
  return (
    <MyContext.Provider value="Hello World!">
      <GrandParent ~~value="Hello World!"~~/>
    </MyContext.Provider>
  );
}

Context 사용 방법

• App.js

function App() { // 생략 }

function GrandParent(~~{ value }~~) { 
		return <Parent ~~value={value}~~ />;
}

function Parent(~~{ value }~~) {
   return <Child ~~value={value}~~ />;
}

function Child(~~{ value }~~) {
   return <Message ~~value={value}~~ />;
}

function Message(~~{ value }~~) {
		const value = useContext(MyContext); 
		return <div>전달받은 데이터 : {value}</div>;
}

export default App;

Context 기본값 지정

• createContext() 함수에 기본값 지정

  • 자식 컴포넌트에서 useContext() 함수를 사용하고 있는데, 부모 컴포넌트가 Provider를 사용하지 않은 경우

  • value 값을 지정해주지 않았기 때문에 해당 값이 출력될 자리에 아무것도 나타나지 않음

  • 기본값을 설정하면 이러한 문제를 방지할 수 있음

  • 기본값 지정 방법

    const MyContext = createContext("Default Value");

새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 8주차 블로그 포스팅