today i learned 1/5

배운 것, 공부한 것, 메모할 것

1. React

  - useReducer, Context API 학습

  - 데모 프로젝트 생성

2. TypeScript

  - 기본 타입 복습

 

1. useEffect의 종속성

effect 함수에서 사용하는 모든것을 의존성 배열에 추가해야 하지만,

1) 상태 업데이트 기능은 추가하지 않아도 됨(setState): React가 해당 함수의 불변성을 보장하므로

2) 내장 API 또는 함수(예를 들면 fetch(), localStorage 등)을 추가할 필요가 없음: React의 구성 요소의 렌더링 주기와 관련이 없음

3) 변수 및 함수를 추가할 필요가 없음: useEffect 내부에만 있을 뿐 구성 요소 함수 내부에는 어떠한 영향도 주지 못함

import React, { useState, useEffect } from "react";

let myTimer;

const MyComponent = (props) => {
  const [isTimerActive, setIsTimerActive] = useState(false);

  const { timerDuration } = props;

  useEffect(() => {
    if (!isTimerActive) {
      setIsTimerActive(true);
      myTimer = setTimeout(() => {
        setIsTimerActive(false);
      }, timerDuration);
    }
  }, [isTimerActive, timerDuration]);
};

export default MyComponent;

setIsTimerActive는 예외 조건이므로 의존성 배열에 추가되지 않음

myTimer는 구성 요소의 내부 변수가 아니므로 의존성 배열에 추가되지 않음

setTimeout은 내장 API이므로 의존성 배열에 추가되지 않음

 

2. useEffect의 cleanup 함수

  useEffect(() => {
    const identifier = setTimeout(() => {
      console.log("Checking form validity!");

      setFormIsValid(
        enteredEmail.includes("@") && enteredPassword.trim().length > 6
      );
    }, 500);

    return () => {
      console.log("cleanup");
      clearTimeout(identifier);
    };
  }, [enteredEmail, enteredPassword]);

여기 로그인 폼의 유효성을 검사하는 함수가 실행되는 useEffect Hook이 있다. 여기에서 return문에 함수 형태로 들어간 것을 cleanup 함수라고 부르는데, 이는 email이나 password가 바뀔 때마다 매번 다시 실행되는 것을 막기 위해서 사용한다.

 

이 cleanup 함수는 useEffect가 최초 실행되었을 때는 실행되지 않고 이후 재렌더링시마다 실행이 된다. 이 코드의 논리를 살펴보면 useEffect가 최초로 실행되었을 때 identifier 함수가 실행되어 'Checking form validity'가 콘솔에 출력된다. 그 이후 email 또는 password input에 값을 추가하게 되면 그때부터 재렌더링이 되면서 cleanup함수가 실행되어 'cleanup'을 콘솔에 출력하고 타이머를 초기화시킨다. 이렇게 되면 매번 입력해줄 때마다 identifier 함수가 실행되는 것이 아니라 return문 이후의 cleanup 함수가 실행이 되며, 마지막 입력이 끝났을 때 비로소 identifier 함수가 실행되게 된다.

 

이런 cleanup 함수가 존재하는 이유는, 위 문단에서 썼듯 email 또는 password 값이 한 글자씩 입력될 때마다 재렌더링이 되는 것이 최적화에 안좋은 요소로 작용할 수 있기 때문이다. 프로젝트 사이즈가 커지면 이러한 반복 재렌더링이 결국 전체 속도를 늦추게 된다. 따라서 이 cleanup 함수는 이러한 login form처럼 렌더링이 계속 일어나게 될 경우에 사용하면 훨씬 좋다.

 

3. useReducer

useReducer는 하나의 input에 대해 두 가지 이상의 상태가 영향을 받는 경우(ex. email input에 대해 input값을 저장하는 상태 및 input값이 유효한지를 검증하는 state)에 useState의 훌륭한 대안이 된다.

기본적인 형태는 아래와 같다.

const [state, dispatchFn] = useReducer(reducerFn, initialState, initFn(optional));

initialState는 상태의 초기값을 의미하며, dispatchFn이 액션을 일으키고 그 액션을 reducerFn이 다룬다.

 

4. Context API

props를 통해 보통 데이터를 다른 컴포넌트로 전달하고, 받는 컴포넌트에서는 매개변수로 props를 받아 props 내부의 값들을 사용한다. 이렇게 props로 컴포넌트를 설정하여 재활용할 수도 있지만, 많은 컴포넌트를 통해 포워딩할 때는 여러 컴포넌트를 거치는 과정이 너무 복잡해질 수가 있는데, 이를 전역적으로 관리하는 Context API가 해결할 수 있다. 그렇지만 이 경우 컴포넌트의 재사용이 불가능하므로 이 점은 props에 비해 떨어진다. 상황에 따라 적절하게 사용할 것.

 

5. React Hooks 사용 시 규칙

1. React Hooks는 함수형 컴포넌트에서만 사용해야 한다.

2. React Hooks는 React 컴포넌트 함수나 React Hooks 함수의 최상위 수준에서만 사용할 수 있다.

  - block statement, nested function(ex. useEffect 내부에서 useState 선언, if문 내부에서 선언)에서 사용 불가

3. useEffect 한정으로 내부에서 선언한 모든 값들(컴포넌트의 state, props 등)을 의존성 배열에 추가해야 한다.