Context

https://react.dev/reference/react/useContext

 

1) 개요

모든 컴포넌트가 꺼내 쓸 수 있는 저장소를 만들어놓고 여기 최상위에서 바로 꺼내 쓰도록 하는게 Context

 

  - prop drilling 현상 방지

  - lifting state up 패턴 기반

 

2) 구현

#부모작업

 

import { createContext, useState } from 'react';

 

  - 저장소 생성 ( Context 이름은 대문자 )

     const UserContext = createContext(기본값);  //컴포넌트 형태로 사용됨

 

  - state 생성

     const [ name, setName ] = useState('박재형');

 

  - 자식컴포넌트가 사용할 수 있도록 설정

     function App() {

         return(

             <UserContext.Provider value={name}>

                 <Child />

            </UserContext .Provider  >

     );

     }

 

 

 

#자식작업

  

import { useContext } from 'react';

 

const value = useContext(UserContext);

 

 

 

=> 근데 useContext를 못갖고 오니까 외부파일로 빼고 import 해서 사용한다

 

#외부파일

 

 

---

 

최종 정리

 

App.js

 

 

BoardList.js

 

 

Board.js

 

 

user-context.js