React.js 공식문서 정리 - Hook

들어가며

• 개발자에게 가장 중요한 습관은 문서를 읽는 습관이라고 생각합니다.
• 이 글은 리액트 공식 문서를 정독하며 내용을 정리하기 위해 작성하게 되었습니다.
• 모든 내용을 정리하기 보다는, 모르는 내용이나 기억하고 싶은 내용 위주로 정리합니다.
• 공식 문서의 주소는 https://reactjs.org/docs/accessibility.html입니다.

Hook

1. Hooks Intro

• 훅의 장점으로, 기존 클래스 기반에서 생명주기에 따라 로직을 복잡하게 구사했던 것을 간편하게 개선할 수 있다.

2. Hook overview

• useEffect는 sideEffect를 커버하기 위한 hook이다.
• useEffect는 렌더링 이후에 effect를 수행한다
• useEffect에서 반환하는 함수를 이용하면 effect를 해제할 수 있다.
• Hook을 호출할 때는 최상위 함수에서만 호출한다.(조건문이나 반복문 내에서 hook실행금지)
• React함수 컴포넌트 안 이거나, custom Hook 내에서만 Hook을 호출한다.

3. Using the State Hook

• Hook이란 함수 컴포넌트 안에서 여러가지를 관리하는 특별한 함수.
• useState로 관리되는 state변수는 함수가 끝나도 사라지지 않는다.
• this.setState는 병합하지만 setState는 대체한다.(모든 값에 대한 재지정이 필요)

4. Using the Effet Hook

• 기존 클래스 컴포넌트에서도, 사이드이펙트를 다룰 때 componentDidMount, DidUpdate 즉 DOM이 바귀고 난 뒤 이펙트를 처리했다.
• Side Effect를 수행한다.
• useEffect가 컴포넌트 안에 있는 이유는 state에 접근할 수 있기 때문이다.
• useEffect 에 전달되는 함수를 effect라고 한다.
• 리렌더링시마다 계속 effect는 달라진다.
• clean하려면(구독 해제 등) effet hook 내에서 return을 해준다. 리턴안에 있는 함수는 Update나 unmount 전에 호출이 된다.
• 예시로 들어져 있는 FriendStatus 컴포넌트는 문자열만 리턴한다...!

6. Building Your Own Hooks

• 커스텀 훅은 이름이 use로 시작하는 함수이다.
• 커스텀 훅 내에서는 기존의 Hook을 호출할 수 있다.
• useFriendStatus 이라는 custom Hook은 ID를 받아와서 online인지 아닌지를 돌려준다.
• FriendStatus는 온라인인지 아닌지를 문자열로 리턴하고, FriendListItem은 온라인인지 아닌지를 판단해서 리스트 아이템을 반환한다. 둘 다 모두 온라인인지 아닌지를 판단해야하는 공통로직이 들어가고, 이를 추상화시켰을 뿐이다. 즉 원래 useState... useEffect 등등으로 복잡하게 처리해야했던 것들을 커스텀 훅 속에 다 넣고 결과만 가져오는 것이다.

7. Hooks API Reference

useReducer

const [state, dispatch] = useReducer(reducer, initialArg, init);

• useReduce의 첫 값은 reducer함수, 둘째 값은 초기값, 셋째값은 Lazy Initialization을 위한 값
• 반환 값은 state와 dispatch.

 

const initialState = {count: 0};

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );
}

• Counter 컴포넌트를 살펴보면, useReducer훅을 이용하여 state와 dispatch를 만들어준다.
• state는 이 컴포넌트의 state이며, 초기값은 initialState 즉 { count:0 }이다.
• dispatch는 action을 입력으로 받는다. action은 객체이며, 위 예제에서는 type을 가지고 있다.
• dispatch는 onClick에 의해서 호출이 된다.
• dispatch는 reducer에게 action을 보내준다고 봐도 될 것 같다.
• reducer는 액션을 받아서, switch case에 따라 액션을 분류하고, state를 업데이트한다.
• reducer가 관심있는 대상은 현재컴포넌트의 state, 와 dispatch로부터 날아온 action이다.222

초기화 지연

function init(initialCount) {
  return {count: initialCount};
}

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    case 'reset':
      return init(action.payload);
    default:
      throw new Error();
  }
}

function Counter({initialCount}) {
  const [state, dispatch] = useReducer(reducer, initialCount, init);
  return (
    <>
      Count: {state.count}
      <button
        onClick={() => dispatch({type: 'reset', payload: initialCount})}>
        Reset
      </button>
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );
}

• useReduce 선언 시 세 번째 인자에 두번째 인자를 받아서 리턴하는 식으로 활용할 수도 있다.
• 리셋 버튼을 누르면, initialCount로 다시 초기화가 된다. 변경되는 값은 state로 , 불변상태 ~ 리셋할 때 처음 선언해뒀던 초기값으로 돌아갈 수 있다.

8. Hooks FAQ

How to avoid passing callbaks cown?

const TodosDispatch = React.createContext(null);

function TodosApp() {
  // 주의: `dispatch`는 다시 렌더링 간에 변경되지 않습니다
  const [todos, dispatch] = useReducer(todosReducer);

  return (
    <TodosDispatch.Provider value={dispatch}>
      <DeepTree todos={todos} />
    </TodosDispatch.Provider>
  );
}

• 최상위 컴포넌트에서 todo라는 상태를 관리할 때 dispatch를 context로 뿌려준다.

function DeepChild(props) {
  // 작업을 수행하려면 context에서 dispatch를 얻을 수 있습니다.
  const dispatch = useContext(TodosDispatch);

  function handleClick() {
    dispatch({ type: 'add', text: 'hello' });
  }

  return (
    <button onClick={handleClick}>Add todo</button>
  );
}

• 받을 때는 useContext를 이용해서 받아온다..!