[Hanaro] 26일차 / React (Hooks- useContext, useEffect)

02 React Hooks

• useContext
  • useContext란
    • 상태를 공유하는 context (상태 변경 시 모두 다시 랜더링)
    • context는 App 안에서 전역적으로 데이터를 여러 컴포넌트끼리 쉽게 공유할 수 있는 방법 제공
    • 상위 컴포넌트의 data가 필요한 하위 컴포넌트들은 useContext 훅을 사용하여 데이터를 받아온다.
    • Provider로 부터 Consumer까지 value(state) 공유
    • Provider의 자식들은 해당 context의 상태를 바로 접근 가능
    • createContext → Context.Provider → Context.Consumer (useContext)
  • import
    • import { createContext } from ‘react’;
    • import { useContext } from ‘react’;
  • 사용
    • 순서
      1. createContext
         1. const MyContext = createContext<MyContextProp>();
      2. Provider
         1. export const MyProvider = ({ children }): PropsWithChildren) ⇒ { … };
      3. useContext
         1. const useMyContext = () ⇒ useContext(MyContext);
    • 예시 1

      • import { createContext } from 'react';
        export const MyContext
                       = createContext({x: 1});
        ----------------------------------------------
        import { MyContext } from '../myContext';
        …
        <MyContext.Consumer>
          { value => <h1>x: {value.x}</h1> }
        </MyContext.Consumer>

    • 예시 2

      • export const MyContext = createContext();
        render(
        	<MyContext.Provider value={{변수}}>
        		<App />
        	</MyContext.Provider>
        );
        ----------------------------------------------
        import { useContext } from ‘react’;
        const 변수 = useContext(MyContext);

• useEffect
  • useEffect란
    • 컴포넌트가 랜더링 될 때 특정 작업(side effect)을 실행할 수 있도록 하는 것
      • side effect란 컴포넌트가 랜더링 된 이후에 비동기로 처리되어야 하는 부수적인 효과
    • componentDidMount 시점에 비동기로 실행 (alert, focus, sound 등 After DOM 처리)
    • 함수형 컴포넌트에서 return JSX(render) 다음에 실행
    • 정리(clean-up) 코드는 componentWillUnMount 시점에 실행되고, 의존 관계 배열(Dependency Array)가 비워져 있다면 1회만 실행 된다.
  • import
    • import { useEffect } from ‘react’;
  • 사용
    • useEffect(function, deps)
      • function: 수행하고자 하는 작업
      • deps: 검사하고자 하는 특정 값 배열이나 빈 배열
      • useEffect(() ⇒ { console.log(’…’); }. []);
    • 예시 1
      • Login component에 로그인하라는 alert 띄우기

      const Login = () => {
        …
        useEffect(() => {
          alert('로그인해주세요!');
      
          return () => {  // 정리(cleanup) 함수
            alert('로그인 되셨어요');
          };
        }, []);
      }