Context API

1. context란?

• 트리 단계로 props를 넘겨주면서 발생하는 props driling 문제를 보완할 수 있는 api로 props가 필요한 컴포넌트까지 props를 전달하지 않고 context를 이용해 props가 필요한 컴포넌트에서 props를 사용할 수 있다.

• context를 이용해 props를 전역적으로 사용,관리할 수 있다.

2. 어떻게 사용할까?

A. 설명

• "createContext"로 context 를 생성하고 "context.Provider value "로 넘겨줄 값을 설정한다

• context 를 사용할 수 있는 컴포넌트를 설정한다

• "useContext"로 context 를 사용한다.

B. 예제

a. 기본 사용

<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;

b. useReducer 와 함께 사용

<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>
    )
    //....생략
    };

3. 주의

A. context의 값이 변경될 경우 context를 사용하는 컴포넌트들은 모두 렌더링 된다.

→ 해결방법: 커뮤니티에서 나오는 해결방법으로는 context를 분할하여 필요한 곳에서 필요한 것만 사용하도록 하거나 React.memo 나 useMemo로 최적화를 하는 것이 있음

B. Context를 사용하면 재사용하지 어렵다.

→ 해결 방법: context를 사용한 컴포넌트를 재사용해야 한다면 context에서 value을 받아서 사용할 컴포넌트(ui)를 context를 생성하는 컴포넌트와 별도로 만들어서 별도로 만든 컴포넌트를 재사용할 수 있다.

4. 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

5. 직접 겪은 context api의 장점

context api는 component들이 많고, reducer의 액션 함수가 많을 때 정말 유용했다. notion프로젝트를 리팩토링하는 과정에서 props를 정리할 때 context로 해당 컴포넌트에서 필요로 하는 액션함수를 불러와서 사용하게 했더니 코드가 훨씬 깔끔해졌다.