# Context API

- React.createContext()

Context생성

const MyContext = React.createContext(기본값);

만약 상위 레벨에 매칭되는 Provider가 없다면 기본값이 사용됨
기본값으로 undefined를 넣으면 기본값이 사용되지 않음

---

# Context.Prodvider

- 하위 컴포넌트들이 데이터를 전달받을 수 있게 하는것

<MyContext.Provider value={/* some value */}>
  <하위 컴포넌트.../> // consumer 컴포넌트, 값이 변경시 렌더링
</MyContext.Provider>  

Object.is

---

# Provider value에서 주의해야 할 사항

function App(props) {
  const [value, setValue] = useState({ something: 'something' });
  // useState를 사용했기 때문에 값이 변경이 있을 때만 랜더링이된다
  // 아니면 매번 컴포넌트가 불필요하게 랜더링이 되어 성능저하가 일어난다
 
  return (
    <MyContext.Provider value={value}>
      <Toolbar />
    </MyContext.Provider>
  );
} 

# Class.contextType

- 현재는 잘 안쓰기에 알고만 있자

class MyClass extends React.Component {
  componentDidMount() {
    let value = this.context;
    // MyContext의 값을 이용하여 원한느 작업을 수행 가능 
  }
  componentDidUpdate() {
    let value = this.context;
    // MyContext의 값을 이용하여 원한느 작업을 수행 가능 
  }
  componentWillUnmount() {
    let value = this.context;
    // MyContext의 값을 이용하여 원한느 작업을 수행 가능 
  }
  render() {
    let value = this.context;
    // MyContext의 값에 따라서 컴포넌트들을 랜더링 
  }
}
MyClass.contextType = MyContext;

---

# Context.Consumer

<MyContext.Consumer>
  {value => //컨텍스트의 값에 따라서 컴포넌트들을 렌더링}
</MyContext.Consumer>  

---

# function as a child

- 컴포넌트의 자식으로 함수를 사용하는 방법
- 리액트에서는 하위 컴포넌트들을 children이라는 prop으로 전달한다
- children으로 컴포넌트 대신 함수를 보낼 수 있다

// children이라는 prop을 직접 선언하는 방식
<Profile children={name => <p>이름: {name}</p>} />

// Profile컴포넌트로 감싸서 children으로 만드는 방식
<Profile>{name => <p>이름: {name}</p>}</Profile>

---

# Context.displayName

const MyContext = React.createContext(//some value);
MyContext.displayName = 'MyDisplayName';
 
// 개발자 도구에 "MyDisplayName.Provider"로 표시됨
<MyContext.Provider>
 
// 개발자 도구에 "MyDisplayName.Consumer"로 표시됨
<MyContext.Consumer>

---

# 여러 개의 Context 사용하기

const ThemeContext = React.createContext('light');
const UserContext = React.createContext({name : 'Guest'});
// 두개의 Context 선언

class App extends React.Component {
  render() {
    const { signedInUser, theme } = this.props;
   
    return(
      <ThemeContext.Provider value={theme}>
        <UserContext.Provider value={signedInUser}>
          <Layout /> // 중접된 상태로 하위 컴포넌트 감싸기
        </UserContext.Provider>
      </ThemeContext.Provider>    
    );
  }
}

function Layout() {
  return (
    <div>
      <Sidebar />
      <Content /> // Layout 안에 Content하위 컴포넌트
    </div>
  );
}

function Content() {
  return (
    <ThemeContext.Consumer>
      {theme => (
        <UserContext.Consumer>
          {user => (
            <ProfilePage user={user} theme={theme} />
            // 중접에 걸쳐 Consumer로 가져오기
          )}
        </UserContext.Consumer>
      )}
    </ThemeContext.Consumer>
  );
}

2개 이상, 그 이상일 경우 별도의 render prop을 만드는 것이 좋다

---

# useContext() 훅

function MyComponent(props) {
  const value = useContext(MyContext); // 상위 Provider에서 값을 가져온다
  // 잘목된 사용법
  // useContext(MyContext.Consumer);
  // useContext(MyContext.Provider);

  return (
    ...
  )
}