[React] Context API

Context API

왜 사용할까요?

• 리액트에서는 보통 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때
  속성값을 이용합니다.
• 간단한 구조에서는 이 방법으로 충분하지만 구조가 복잡하다면 번거로워지고 관리가 힘들어지게 됩니다.
• 그러나 Context API를 이용하면 컴포넌트의 중첩 구조가 복잡하더라도 비교적 쉽게 데이터를 전달할 수 있습니다.

props과 Context API의 비교

Prop : 조부모(data전달) -> 부모(data 사용X 전달) -> 자식(사용)
Context API : 조부모 -> 자식(사용)

작동원리 이해하기

//1. createContext를 import
import {createContext} from 'react'


// 상위 컴포넌트
// 2. Context 객체 생성
const UserContext = createContext(초기값)
// createContext(초기값)은 {Provider, Consumer} 객체를 반환
// createContext(defaultValue) => {Provider, Consumer}
function App() {
  return (
    <div>
    	<UserContext.Provider value=전달할값>
    		<Profile />
    	</UserContext.Provider>
    </div>
    );
}
.....
// Profile 컴포넌트의 자아아아~~식 컴포넌트
// 3. 사용할 컴포넌트에서 Consumer로 감싼다.
function 자아아아식(){
  return (
    <UserContext.Consumer>
      {value => <p>{`${value}`}</p>}
	</UserContext.Consumer}
	);
}

• 상위 컴포넌트에서 Provider로 데이터를 전달하고 하위 컴포넌트에서는 Consumer로 데이터를 사용한다.
• Consumer 컴포넌트는 데이터를 찾기 위해 상위로 올라가면서 가장 가까운 Provider를 찾고 최상위에도 Provider 컴포넌트가 없다면 Context객체 생성시 설정한 기본값을 사용한다.

  알아두기! : Provider 컴포넌트에 새로운 데이터가 입력되면 모든 Consumer 컴포넌트는 부모 컴포넌트에 memo등이 적용되는 등의 중간 컴포넌트의 렌더링 여부와 상관없이 다시 렌더링된다.

활용) 여러 context 중첩 사용

const UserContext = createContext("")
const ThemeContext = createContext('dark')
// createContext(초기값)은 {Provider, Consumer} 객체를 반환
// createContext(defaultValue) => {Provider, Consumer}
function App() {
  return (
    <div>
     <ThemeContext.Provider value='light'>
    	<UserContext.Provider value=전달할값>
    		<Profile />
    	</UserContext.Provider>
     </ThemeContext.Provider>
    </div>
    );
}
..... 자아아식

function 자아아아식(){
  return (
    <ThemeContext.Consumer>
     {theme => (
       <UserContext.Consumer>
        {value => <p style={{color: theme}}>{`${value}`}</p>}
	   </UserContext.Consumer>
	  )}
	 </ThemeContext.Consumer>
	);
 }

하위 컴포넌트에서 데이터 수정하기!

const UserContext = createContext({username:'', helloCount:0});
const SetUserContext = createContext(()=>{});

function App(){
  const [user, setUser] => useState({username:'mike', helloCount:0)};
                                    
  return (
           <div>
             <SetUserContext.Provider value={setUser}>
    			<UserContext.Porvider value={user}>
                  <Profile />
                </UserContext.Provider>
			 </SetUserContext.Provider>
			</div>
		);
  }
                                               
                                 

• Consumer은 중첩사용에서 쓴 코드처럼 쓰면 된다!
• 원시값 수정은 useState가 편리하지만 위 코드처럼 객체를 변경하는 훅은
  useReducer를 사용하는 것이 편리하다. [useReducer 사용 예 링크](https://github.com/bigwave-cho/learnFirebase/blob/main/src/context/AuthContext.js#:~:text=const%20%5Bstate%2C%20dispatch%5D%20%3D%20useReducer(authReducer%2C%20%7B)