[React] context API (2023.05.22)

🎈 context API 쓰는 이유

📖 props의 단점

단방향 데이터의 흐름

 

 

위와 같은 데이트 흐름을 단방향 데이터 흐름 (one-way reactive data flow)이라하고

react는 이러한 흐름을 가지고 있음

 

단방향 데이터 흐름의 장점

1. 관리에 용이함

2. DOM과의 궁합 - tree구조의 dom 구조에 유리함 

 

단방향 데이터 흐름의 단점

자식요소에서 부모요소로 데이터를 바로 전달할 수 없음

 

⚙️ 부모요소가 자식요소의 값을 받아볼 수 있도록 하는 방법

 

 

귀찮다 >> contextAPI를 사용함

 

🎈 context API

📖 context API 사용하는 이유

 

props를 사용하면 여러번 사용해야 함

 

 

데이터를 따로 보관하여 끌어다 쓰는 법 >> Context API

 

 

장점 : 전역적으로 사용할 수 있다

단점 : 코드 작성이 어렵다

 

 /*    Context란?     
리액트 컴포넌트 간에 값을 전역적으로 공유할 수 있게 해주는 기능   

Q. Props로만 데이터를 전달했을 때 발생하는 문제는?   
A. 깊숙하게 위치한 컴포넌트에 데이터를 전달해야할 경우,       
    여러 컴포넌트에 연달아 Props를 전달해야 함       
     >> 불편할뿐더러 실수가 잦음       
     >> 이러한 현상을 Props Drilling이라고 함   
           그래서 우리는 context로 상태를 전역적으로 관리해 줄 것!   

** 만드는 순서!   
1. context를 생성해준다. (context는 하나의 보관함으로 생각하면 됨) - createContext => export   
2. context를 사용할 컴포넌트에 import   
3. 컴포넌트를 Context Provider로 감싸준다. - 제공하는 역할   
4. 데이터를 받아올 컴포넌트에서 useContext 함수를 사용한다.     */

 

 

** 오류 종류 
1) useState is not defined or useContext is not defined 
- import 를 안했거나 오타가 난 경우입니다.

2) [Object Object] .. 객체 안에 작성을 해야하는데 중괄호를 안쓴 경우 

3) npm start 가 안돼요 => 경로 다시 확인하기

4) 'ThemeContext' 라는 이름의 context 파일이 하나 있어야 합니다 - createContext 용도 
   => 이름은 달라도 됨 

 

🎈 context API 사용하기

1. context.js 파일 생성

import { createContext } from "react";
// context 생성 기능을 react에서 가져오기

export const DarkModeContext = createContext(null);

2. 콤퍼넌트에 context import 및 컴포넌트를 provider로 감싸기

 

import React from 'react'
import Ex03Header from './components/Ex03Header'
import Ex03Main from './components/Ex03Main'
import { DarkModeContext } from './context/Ex03DarkMode'

const Ex03 = () => {
  return (
    <DarkModeContext.Provider>
      <div>
          <Ex03Header/>
          <Ex03Main/>
      </div>
    </DarkModeContext.Provider>

  )
}

export default Ex03

 

3. provider value값 설정

- value값은 전역적으로 사용할 데이터 

- useState 활용하여 변하는 값을 value 값으로 지정

 

import React, { useState } from 'react'
import Ex03Header from './components/Ex03Header'
import Ex03Main from './components/Ex03Main'
import { DarkModeContext } from './context/Ex03DarkMode'

const Ex03 = () => {

  //main에서 버튼 클릭여부를 판단하여 header로 전송
  //버튼 클릭여부 : 전역적으로 사용할 데이터
  const[isDark, setIsDark] = useState(false);

  return (
    <DarkModeContext.Provider value={{isDark, setIsDark}}>
      <div>
          <Ex03Header/>
          <Ex03Main/>
      </div>
    </DarkModeContext.Provider>

  )
}

export default Ex03

 

4. 데이터를 받아올 컴포넌트에서 useContext 사용

 

import React, { useContext } from 'react'
import { DarkModeContext } from '../context/Ex03DarkMode'

const Ex03Main = () => {

  const{setIsDark} = useContext(DarkModeContext)

  return (
    <div>Ex03Main
        <button onClick={()=>{setIsDark(true)}}>다크모드</button>
    </div>
  )
}

export default Ex03Main