2020-01-28 5번째 수업 - Hooks, 컴포넌트간 통신, Context API 등

Basic Hooks

useState ,  useEffect , useContext

 

hook때문에 Functional Component (= FC) 로 많이 씀

** 예전엔 (hook나오기전에) SFC였음 (Stateless Functional Component)

 

컴포넌트 사이에서 상태와 관련된 로직을 재사용하기 어렵다.

 - 컨테이너 방식말고, 상태와 관련된 로직

복잡한 컴포넌트들은 이해하기가 어렵다.

Class 는 사람과 기계를 혼동시킨다.

 - 컴파일 단계에서 코드를 최적화하기 어렵게 만듬

this.state 는 로직에서 레퍼런스를 공유하기때문에 문제가 발생할 수 있음

 

hook을 사용하면 

useState로 state를 대체가능

useEffect로 라이프사이클메소드를 대체 가능

 

 

 

첫 렌더링 순서

 

리액트 -> 컴포넌트 - 컴포넌트야 state가 0 일 때 UI를 보여줘

 

컴포넌트 -> 리액트 - 여기 랜더링 결과물로 <p>you clicked  0 times</p>가 있어, 그리고 끝나고 useEffect를 실행하는것을 잊지마

 

리액트 -> 브라우저 - UI 업데이트를 시작할게 이봐 브라우저야  나 DOM에 뭘 좀 추가할게

 

브라우저 -> 리액트 - 응 그리자

 

리액트 - 좋아, 이제 컴포넌트가 준 이펙트를 실행할거야 

 

클릭 후 렌더링

 

컴포넌트 -> 리액트 - 이봐 리액트야 내 상태를 1로 변경해줘

 

리액트 -> 컴포넌트 - 컴포넌트야 상태가 1일때 UI를 줘봐

 

컴포넌트 -> 리액트 - 여기 랜더링 결과물로 <p>you clicked  1 times</p>가 있어, 그리고 끝나고 useEffect를 실행하는것을 잊지마

 

리액트 -> 브라우저 - UI 업데이트를 시작할게 이봐 브라우저야  나 DOM에 뭘 좀 추가할게

 

브라우저 -> 리액트 - 응 그리자

 

리액트 - 좋아, 이제 컴포넌트가 준 이펙트를 실행할거야 

 

 

 

나만의 훅 Custom Hook을 만들어보자.

// useWindowWidth.js

import { useState, useEffect } from 'react';

export default function useWindowWidth() {
  // 초기화
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const resize = () => {
      setWidth(window.innerWidth);
    };
    window.addEventListener('resize', resize);
    return () => {
      window.removeEventListener('resize', resize); //componentWillUnMount
    };
  }, []);

  return width;
}

 

 

useReducer

 

다수의 하윗값을 포함하는 복잡한 정적로직을 만드는 경우

다음 state가 이전 state에 의존적인 경우

redux를 이해하고있다면 쉽게 사용 가능

 

import React, { useReducer } from 'react';

const reducer = (state, action) => {
  if (action.type === 'PLUS') {
    return {
      ...state,
      count: state.count + 1
    };
  }
  return state;
};

const initialState = {
  count: 0
};

const Example8 = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  function click() {
    dispatch({
      type: 'PLUS'
    });
  }

  return (
    <div>
      <p>{state.count}</p>
      <button onClick={click}>클릭</button>
    </div>
  );
};

export default Example8;

 

 

useMemo 실제로 변하지 않더라도, 매번 실행되는 어떤 값 , 의존성배열에 변경이 없다면 고정

 

 

Context API , useContext

 

하위 컴포넌트 전체에 데이터를 공유하는 법

 

데이터를 SET하는 놈

 - 가장 상위 컴포넌트 -> 프로바이더

 

데이터를 GET하는 놈

 모든 하위 컴포넌트에서 접근 가능

  - 방법 1 : 컨슈머 사용

  - 방법 2 : 클래스 컴포넌트의 this.context 사용 

  - 방법 3 : 펑셔널 컴포넌트의 useContext 사용

 

방법 3을 주로 사용하는 것이 좋다!!