React - Context API

https://ko.reactjs.org/docs/context.html

Context – React

---

• 하위 컴포넌트 전체에 데이터 공유 방법
  • 데이터 Set
    • 가장 상위 컴포넌트 => Provider
    • 데이터 Set 방법
      1. Context 생성
      2. Context.provider 사용
      3. value 사용

    // contexts/PersonContext.js
    import React from 'react';
    
    const PersonContext = React.createContext();
    
    export default PersonContext;
    
    // index.js
    import PersonContext from './contexts/PersonContext';
    
    const persons = [
      { id: 0, name: 'Msko', age: 33 },
      { id: 1, name: 'Mike', age: 29 },
    ];
    
    ReactDOM.render(
      <React.StrictMode>
        <PersonContext.Provider value={persons}>
          <App />
        </PersonContext.Provider>
      </React.StrictMode>,
      document.getElementById('root')
    );

    ---

  • 데이터 Get
    • 모든 하위 컴포넌트에서 접근 가능
      • Consumer

      // components/Example1.jsx
      import PersonContext from '../contexts/PersonContext';
      
      export default function Example1() {
        return (
          <PersonContext.Consumer>
            {(persons) => (
              <ul>
                {persons.map((person) => (
                  <li>{person.name}</li>
                ))}
              </ul>
            )}
          </PersonContext.Consumer>
        );
      }

      • Class Component의 this.context
        • 단점 : 여러개를 지정할 수 없다

      // components/Example2.jsx
      import React from 'react';
      import PersonContext from '../contexts/PersonContext';
      
      export default class Example2 extends React.Component {
        // static contextType = PersonContext;
      
        return() {
          const persons = this.context;
      
          return (
            <ul>
              {persons.map((person) => (
                <li>{person.name}</li>
              ))}
            </ul>
          );
        }
      }
      
      Example2.contextType = PersonContext;

      1. Functional Component의 useContext
         1. 가장 많이 사용

      // components/Example3.jsx
      import { useContext } from 'react';
      import PersonContext from '../contexts/PersonContext';
      
      export default function Example3() {
        const persons = useContext(PersonContext);
      
        return (
          <ul>
            {persons.map((person) => (
              <li>{person.name}</li>
            ))}
          </ul>
        );
      }