[React] useConext + Context API

[유튜브 개발화라리] 강의

contextAPI 로 리액트 상태 관리 레벨업 하기! - YouTube

 

 

React Context 란 ? 

 

React 의 앱은 component tree 로 구성되어있다

React 의 데이터는 부모컴포넌트 => 자식컴포넌트 로 props 를 통해 전달된다

<Header user ={user}/>

 

엄청 거대한 react 프로젝트가 있다고 가정하면, 모든 데이터를 일일히 props 를 이용해 전달하는건 매우 불편하다

 = > 따라서 React 에서는 Context API 를 제공

 

Context : app 안에서 전역적으로 사용되는 데이터를 컴포넌트 사이에서 전달이 쉽게 한다

 

app (최상위 컴포넌트)

 - about

 - profile  

이런 트리가 있다고 가정해보자

 

 

 

[1] 상위 컴포넌트에서 context 에 값 넣기

 

1. context 만들기 

 - React 라이브러리에서 createContext 라는 함수를 불러와야 함 

import {createContext} from "react";
const UserContext = createContext();

 

2. 데이터를 담은 객체를 생성한다

const users = {
 	name : 'seohyun',
    job : 'developer'
}

 

 

3. 아까불러온 createContext 에 provider 라는게 있는데

     여기에 value 라는 이름으로 전달하고 싶은 데이터 객체를 넣어준다

createContext 는 provider 를 반환한다.

provider 는 컴포넌트임

provider 의 value 로 context 에 값을 저장하고

return <UserCoontext.Provider value ={users}>props.children</UserContext.Provider>

 

 

최종코드 (./store/users.js)

 

== > 이렇게 context 에 값을 넣어놓고 특정 컴포넌트와 연결해주면 그 하위에 있는

       모든 컴포넌트에서 context 접근이 가능하다

 

 

 

[2] 생성한 context 와 컴포넌트 연결하기

 

 1. context 를 최상위 컴포넌트인 app 에서 import 하여 연결해준다

import UserStore from "./store/users";

 

 

2. return 에서 감싸준다

return(
    <UserStore>
	.
    .
    </UserStore
);

 

 

 

[3] 하위 컴포넌트에서 값을 가져오기

 

1. useContext 가져오기

import {useContext} from "react";

 = > 위에서 createContext (UserContext) 로 export 된 값을 가져오는것

 

2. useContext 에서 값 가져오기

const context = useContext(UserContext)

 => useContext 함수의 UserContext 값을 가져와서 context 에 넣어라

 : 이때 console.log (context) 를하면 아까 내가 저장했던 users 객체의 정보를 볼 수 있음

 

 

3. 가져온 값 사용해서 렌더링하기

return (
	<div><h1>{context.name}</h1></div>
)

  => seohyun