트리 단계로 props를 넘겨주면서 발생하는 props driling 문제를 보완할 수 있는 api로 props가 필요한 컴포넌트까지 props를 전달하지 않고 context를 이용해 props가 필요한 컴포넌트에서 props를 사용할 수 있다.
context를 이용해 props를 전역적으로 사용,관리할 수 있다.
"createContext"로 context 를 생성하고 "context.Provider value "로 넘겨줄 값을 설정한다
context 를 사용할 수 있는 컴포넌트를 설정한다
"useContext"로 context 를 사용한다.
<Context.js>
import React, { createContext } from "react";
export const MyContext =createContext();
const ContextProvider =(props)=>{
const users ={
name:"안녕",
job:"developer"
};
return <MyContext.Provider value={users} >
{props.children}
</MyContext.Provider>
};
export default ContextProvider ;
<App.js>
import './App.css';
import React from 'react';
import ShowContext from './ShowContext';
import ContextProvider from './Context';
function App() {
return(
<ContextProvider>
<ShowContext/>
</ContextProvider>
);
}
export default App;
<ShowContext.js>
import React from "react";
import { useContext } from "react/cjs/react.development";
import { MyContext } from "./Context";
const ShowContext =()=>{
const user = useContext(MyContext);
return(
<div>
{user.name}
</div>
)
};
export default ShowContext;
<TweetContext.js>
: useReducer와 context 를 생성
cosnt initialState ={ //....생략};
const reducer =(state, action)=>{
//....생략};
export const TweetContext= createContext(null);
const TCProvider =(props)=>{
const[state, dispatch] = useReducer(reducer, initialState);
return <TweetContext.Provider
value={{state: state, dispatch}}>
{porps.childer}
</TweetContext.Provider>
};
export default TCProvider ;
<App. js>
: context를 사용할 컴포넌트 지정
function App(){
return (//....생략
<TCProvider>
<CreateNweet/>
<NweetList/>
</TCProvider>
//....생략)
};
<CreateTweet.js>
: context, reducer를 실행 할 곳, nweet(게시글을 작성)하는 기능을 담당
const CreateNweet=()=>{
const {state, dispatch}= useContext(TweetContext);
const {text, attchment}= state.input;
//....생략
/*input에 작성하고, 작성된 글을 저장하는 기능*/
const onChange= useCalback(e=>{
const {name, value}= e.target:
//....생략
},[]);
return(
//....생략
<div>
<textarea .... onchange={onChange}/>
</div>
)
//....생략
};
A. context의 값이 변경될 경우 context를 사용하는 컴포넌트들은 모두 렌더링 된다.
→ 해결방법: 커뮤니티에서 나오는 해결방법으로는 context를 분할하여 필요한 곳에서 필요한 것만 사용하도록 하거나 React.memo 나 useMemo로 최적화를 하는 것이 있음
B. Context를 사용하면 재사용하지 어렵다.
→ 해결 방법: context를 사용한 컴포넌트를 재사용해야 한다면 context에서 value을 받아서 사용할 컴포넌트(ui)를 context를 생성하는 컴포넌트와 별도로 만들어서 별도로 만든 컴포넌트를 재사용할 수 있다.
https://badahertz52.github.io/practice_react_context/
https://www.youtube.com/watch?v=sqz45pnvJHg&feature=youtu.be
https://medium.com/react-native-seoul/react-리액트를-처음부터-배워보자-05-context-api-d053f92cd645
context api는 component들이 많고, reducer의 액션 함수가 많을 때 정말 유용했다. notion프로젝트를 리팩토링하는 과정에서 props를 정리할 때 context로 해당 컴포넌트에서 필요로 하는 액션함수를 불러와서 사용하게 했더니 코드가 훨씬 깔끔해졌다.