7.2 React Context 란?

[SMJminjeong]

📝 p.137 ❓ ContextAPI 를 사용하면 좋은 점과 해당 Context 의 상태를 소유하는 함수 코드를 작성해주세요.

export const initialState: ToastState = {
  isShown: false,
  message: "",
  style: "succeed",
};

[sbkimm]

Context API는 하위 컴포넌트로 Props 값을 전달할 필요 없이 하위 컴포넌트에서 최상위 컴포넌트가 소유한 값과 갱신 함수에 직접 접근할 수 있는 장점을 가지고 있습니다.

import { createContext } from "react";

// Toast의 상태를 소유할 Context
export const ToastStateContext = createContext(initailState);

[yjkim-89]

전역 상태를 관리할 수 있어, props를 통해 일일이 데이터를 전달하지 않고도 여러 컴포넌트에서 쉽게 접근할 수 있습니다.

import React, { createContext } from 'react';

// EmailContext 생성
export const EmailContext = createContext();

[kkite6789]

Props로 전달할 필요 없이 하위 컴포넌트에서 최상위 컴포넌트가 소유한 값과 갱신 함수에 직접 접근이 가능합니다. 이에 따라 Prop Drilling 방지와 코드 가독성이 향상됩니다.

import { createContext } from "react";

// Toast의 상태 갱신 함수를 소유할 Context
export const ToastActionContext = createContext(initialAction);

[SMJminjeong]

Prop Drilling 방지 와 가독성 향상

import { createContext } from "react";

// Toast의 상태를 소유할 Context
export const ToastStateContext = createContext(initailState);