React : props 중첩되어있을 때 편한 "Context API" (사용법)

App 안에 있는 state를 App -> Detail -> Tab으로 2번 props 전송하려면 조금 귀찮다. 그리고 2번이 아니라 10번 중첩되면 난감해진다.
그럴 때 Context API를 쓰면 편하다.

---

Context API

우선 단점부터

성능이슈(state 변경시 쓸데없는 컴포넌트까지 재렌더링됨)와 컴포넌트 재활용이 어려운 점 때문에 실무에서는 자주 쓰진 못한다고 한다. 
그래서 이것보다 redux같은 외부 라이브러리를 더 많이 사용한다.

---

사용법

전송 보내는 컴포넌트

import { createContext, useState, useEffect } from "react";

export let Context1 = createContext()

function App() {
  let [pracContext, setPracContext] = useState([10, 11, 12]);
  ...

createContext를 import 해준 후 function 바깥에 let으로 변수명을 작명해 createContext()를 넣어준다.
이렇게 context를 만든 건데, 여기서 context는 이를테면 state 보관함이다.

그리고 아래처럼 활용할 수 있다.

<Detail pracContext={pracContext} setPracContext={setPracContext}/>

<Context1.Provider value={{ pracContext, setPracContext }}>
  <Detail shoes={shoes} setShoes={setShoes}/> 
</Context1.Provider>

(위를 아래처럼 만들 수 있다.)

1. props를 전송할 컴포넌트를 <Context1.Provider>로 감싼다.
2. 그리고 value 안에 중괄호를 두개 묶어 전송할 state를 전부 넣는다.

---

전송 받는 컴포넌트

import { useContext, useEffect, useState } from "react"

import { Context1 } from './../App.js'

useContext를 import하고 아까 let으로 createContext()한 변수 Context1을 import한다.

그리고 아래처럼 function 안에서 state보관함을 해체해주는 함수 useContext()를 쓴다.

function Detail(){
  let {pracContext} = useContext(Context1)

  return (
  <div>{pracContext}</div> 
)

---

출처 : 코딩애플 https://codingapple.com/