createContext, useContext

[createContext, useContext]

---

• 사용하는 이유
  부모 자식간에 props를 통해서 상태값 데이터를 전달함.
  A(최상위부모) - B - C - D - E(최하위자식) 의 관계에서 A의 state데이터가 C와 E컴포넌트에만 필요할 때 props로 넘기면
  A,B,C,D,E 차례대로 넘겨야 한다.
  이럴 경우 불필요한 props를 B와 D가 받게 되고 그 props state데이터에 변경이 일어나면 B,D컴포넌트가 불필요하게 리렌더링이 일어난다.
  createContext, useContext를 사용하면 props를 받지 않게 하면서 특정 컴포넌트만 context로 받은 상태값을 사용하게끔 하여 실제 상태값을 사용하지 않는 컴포넌트들이 리렌더링이 일어나지 않게 한다.

• context 생성 ( createContext )

export const ValueContext = createContext(); //컴포넌트 바깥에서 선언하고 export해줘야 한다.

//컴포넌트 리턴문 안에 아래와 같이 선언하면
//1. useContext변수.Provider의 프로퍼티 value에 값으로 변수나 객체를 넘겨준다.
//2. 그러면 Provider안에 존재하는 Child1컴포넌트를 포함한 그 자식 컴포넌트들은 이 value를 받을 수 있는 상태가 된다.
<ValueContext.Provider value={{value}} >
            <div><Child1 /></div>
</ValueContext.Provider>

• 다른 컴포넌트에서 생성한 context 사용 ( useContext )

import {ValueContext} from './Indexx' // createContext를 선언한 곳의 파일 import

const {value} = useContext(ValueContext); // useContext('createContext생성한 변수'), 구조분해 할당으로 넘겨준 객체를 받는다.

return (<>
        Child1_1 컴포넌트 {value} //넘겨받은 value 바인딩
    </>);

위의 부모 자식 구조는
Indexx - Child1 - Child1_1 이다.

부모인 Index가 Child1을 <ValueContext.Provider value={} > 로 감싸서 값을 넘겨줬고

Child1은 이 Provider로 보내지는 value를 사용하지 않고,
Child1의 자식인 Child1_1에서 useContext를 사용해서 상태값을 받아서 사용하고 있다.

이런식으로 Indexx에서 생성한 useState상태값 value가 변경되면 Child1_1만 리렌더링 될 것이다.

만약 props방식으로 하였다면 어쩔 수 없이 Child1이 props를 받아야 하기 때문 전부 리렌더링이 일어났을 것이다.