State Hook과 Effect Hook이란?

Hook이란? 함수 컴포넌트 안에서 사용할 수 있게 해준다.

 

useState의 인자로 무엇을 넘겨주어야 할까요?

state의 초기 값. state는 클래스와 달리 객체일 필요가 없고, 숫자타입, 문자 타입을 가질 수 있다.

state변수를 선언해서 값을 설정해주는 것은 setState를 통해 설정, 그 값에 대해 알 수 있는 것은 state를 통해 알 수 있다.

 

Effect Hook을 사용하면 함수 컴포넌트에서 side effect를 수행할 수 있다.

데이터 가져오기, 구독 설정하기, 수동으로 React 컴포넌트의 DOM을 수정하는 것까지 이 모든 것이 side effects이다.

정리(clean-up)를 이용하지 않는 Effects

React가 DOM을 업데이트한 뒤 추가로 코그를 실행해야 하는 경우가 있다. 네트워크 리퀘스트, DOM 수동 조작, 로깅 등은 정리가 필요없다.

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

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useEffect가 하는 일은?

React에게 컴포넌트가 렌더링 이후에 어떤 일을 수행해야하는지를 말한다.

useEffect를 컴포넌트 안에서 불러내는 이유?

state변수 또는 poprs에도 접근할 수 있게 된다. 함수 범위 안에 존재하기 때문에 특별한 API 없이도 값을 얻을 수 있다.

useEffect는 렌더링 이후에 매번 수행되는 걸까?

맞다. 기본적으로 첫번째 렌더링과 이후의 모든 업데이트에서 수행된다. effect를 렌더링 이후에 발생하는 것으로 생각. React는 effect가 수행되는 시점에 이미 DOM이 업데이트 되었음을 보장한다.

useEffect에서 사용되는 effect는 브라우저가 화면을 업데이트 하는 것을 차단하지 않는다. 이를 통해 애플리케이션의 반응성을 향상해준다.

정리(clean-up)를 이용하는 Effects

정리가 필요한 effect가 있다. 구독을 설정해야하는 경우를 생각해보자. 메모리 누수가 발생하지 않도록 정리하는것이 매우 중요하다.

Effect에서 함수를 반환하는 이유는 무엇일까?

effect를 위한 추가적인 정리(clean-up)메커니즘이다. 모든 effect는 정리를 위한 함수를 반환할 수 있다. 이 점이 구독의 추가와 제거를 위한 로직을 가까이 묶어둘 수 있게 한다.

React가 effect를 정리(clean-up)하는 시점은 정확히 언제일까?

컴포넌트가 마운트 해제되는 때에 정리를 실행한다. effect는 한 번이 아니라 렌더링이 실행되는 때마다 실행된다. React가 다음 차례의 effect를 실행하기 전에 이전의 렌더링에서 파생된 effect 또한 정리하는 이유가 바로 이 때문이다.

• effect를 실행하고 이를 정리하는 과정을 딱 한 번 만 실행하고 싶다면, 빈 배열([])을 두 번 째 인수로 넘겨주면 된다. 그러면 prop이나 state의 그 어떤 값도 의존하지 않으며 재실행되어야 할 필요가 없을을 알게 된다.