📸 2022-07-28

🔥 오늘 어디에 도전해보셨고, 무엇을 배우셨나요?

• React의 useContext 사용법 (참고)

🌊 학습하시면서 궁금하신 부분이나, 어려웠던 점은 뭘까요?

• 주의사항에 Provider의 value prop이 바뀌면 매번 새로운 객체가 생성되므로 Provider가 렌더링 될 때마다 하위의 컴포넌트가 모두 리렌더링된다. 이를 방지하기 위해서는 state로 끌어올리고 그 state 값을 value prop으로 전달한다.

  Object.is({ a: "1" }, { a: "1" }); //false
  
  const obj = { a: "1" };
  Object.is(obj, obj); // true
  

  객체 내부 데이터는 동일하더라도 각각 새로운 객체가 생성되어 다른 객체로 인식한다.

  Provider의 value prop에도 객체를 전달하면 렌더링 될 때마다 다른 객체로 인식되기 때문에 객체를 따로 저장한 후에 그 값을 value prop으로 사용해야 한다.

🌟 내일은 어떻게 해보고 싶으세요?

• 유데미 리액트 강의 122 ~ 128까지 수강하기 (context 심화)

---

React의 Context

• context는 리액트 내부에서 전역적으로 state를 관리하는 저장소 개념이다.
• context를 이용하면 단계마다 일일이 props를 넘겨주지 않고(=prop chain을 구축하지 않고도) 컴포넌트 트리 전체에 데이터를 제공할 수 있다.
• React.createContext로 Context 객체를 만들고, Context.Provider로 context를 사용할 컴포넌트의 범위를 정하여 리액트에게 알려주고 내부 컴포넌트들에게는 context의 변화를 알린다.
• Context.Provider 내부에 있는 컴포넌트가 해당 context의 데이터에 접근하기 위해서는 Context.Consumer 또는 useContext를 사용한다.

1. React.createContext

   const MyContext = React.createContext(defaultValue);
   

   전역으로 관리하고 싶은 데이터를 defaultValue 매개변수로 전달한다.

2. Context.Provider

   const App = () => {
     return (
       <MyContext.Provider value={providedValue}>
         <Toolbar />
       </MyContext.Provider>
     );
   };
   

   Provider 컴포넌트에는 value라는 prop을 전달해주는데 이 값이 하위 컴포넌트들에게 전달되고 이 value prop이 변할 때마다 리렌더링된다.

   위 코드에서 Toolbar 컴포넌트는 MyContext.Provider 컴포넌트 내부에 위치하므로 MyContext.Provider에 전달되는 value prop이 변할 때마다 리렌더링된다.

   ⚠️ React.createContext의 파라미터로 전달한 defaultValue는 Provider를 찾지 못했을 때만 쓰이는 값이다.

3. Context.Consumer

   const Toolbar = () => {
       return <MyContext.Consumer>
       {(ctx) => {
        return (<ul>{...}</ul>)
       }}
       </MyContext.Consumer>
   }
   

   Consumer 컴포넌트의 자식은 함수여야 한다. 이 함수의 파라미터는 context의 현재 값을 가져온다. 여기서 ctx는 providedValue를 가져온다.

4. useContext

   const Toolbar = () => {
       const ctx = useContext(MyContext);
       return <ul>{...}</ul>
   }
   

   MyContext.Consumer와 마찬가지로 MyContext.Provider 내부에서 useContext 훅으로 context에 접근할 수 있다.