Hooks(1)

Hooks란

  이전에는 컴포넌트의 상태를 관리하거나 생명 주기에 따라 특정 작업을 수행하려면 클래스형 컴포넌트를 사용해야 했다. 하지만 이제는 Hooks를 이용하여 함수형 컴포넌트에서도 컴포넌트의 상태를 관리할 수 있고 생명주기에 맞춰 특정 작업을 수행할 수 있게 되었다.

📍useState

State는 컴포넌트의 상태를 의미한다.

  useState를 호출하면 변수와 그 변수를 수정할 수 있는 세터 함수를 배열로 반환한다. 즉, useState() 함수를 호출하면 파라미터로 전달한 값을 초기값으로 갖는 상태 변수와 그 변수를 수정할 수 있는 세터 함수를 배열로 반환한다. useSate 함수는 관리해야하는 상태의 수 만큼 반복해서 사용할 수 있다. 따라서 상태를 관리하는 변수는 반드시 세터 함수를 이용해 값을 변경 해야하고, 상태가 변경되면 컴포넌트가 변경된 내용을 반영하여 다시 렌더링 된다. 

const [state, setState] = useState(초기값);

세터 함수

useState에서 반환된 세터 함수를 사용하는 방법은 크게 2가지가 있다.

1. 세터 함수에 변경될 상태의 값을 전달하는 방법 - ex) setState( count - 1)
2. 세터 함수의 파라미터에 함수를 전달하는 방법 - ex) setState( preState => {} ); 전달된 함수에는 변경되기 전의 상태 값이 파라미터로 전달되며 이 값을 어떻게 수정할 것인지 정의하면 된다. -> 세터 함수는 비동기 함수이기 때문에 파라미터에 함수를 전달하면 상태 변경이 여러번 일어날 때 발생할 수 있는 문제 해결!

// App.js

import { useState } from 'react';

function App() {
  const [time, setTime] = useState(1);

  const handleClick = () => {
    let newTime;
    if(time >= 12){
      newTime = 1;
    } else {
      newTime = time + 1
    }
    setTime(newTime)
  }

  return (
    <div>
      <span>현재 시각: {time}시</span>
      <button onClick={handleClick}>Update</button>
    </div>
  );
}
export default App;

📍useEffect

  컴포넌트가 렌더링될 때마다 원하는 작업이 실행되도록 설정할 수 있는 기능.

useEffect(() => {}, []);

useEffect의 첫 번째 파라미터로 전달된 함수는 조건을 만족할 때 마다 호출되고, 두 번째 파라미터로 전달되는 배열을 이용해 함수가 호출되는 조건을 설정할 수 있다. 만약 두 번째 파라미터가 아무것도 호출되지 않으면 첫 번째 파라미터로 전달된 함수는 컴포넌트가 렌더링 될 때마다 호출된다. 

특정 조건에서 useEffect 실행하기

  useEffect에 설정한 함수를 특정 상태가 변경될 때만 호출하고 싶은 경우, useEffect의 두번 째 파라미에 해당 상태를 관리하는 변수를 배열로 전달하면 된다.

마운트될 때 실행하기

  useEffect에 전달된 함수의 실행 조건이 컴포넌트가 마운트 될 때로 설정하려면 useEffect의 두번째 파라미터에 빈 배열을 전달하면 컴포넌트가 처음 렌더링될 때만 함수가 호출되도록 할 수 있다. 이렇게 하면 컴포넌트가 처음 렌더링될 때 함수가 호출되고, 이후에는 상태가 변해 컴포넌트가 다시 렌더링 되어도 함수가 실행되지 않는 다는 것을 확인 할 수 있다. 

언마운트될 때 실행하기

컴포넌트가 언마운트 되기 전에 특정 작업을 해야 한다면 어떻게 해야할까? useEffect에서는 전달하는 함수에서 반환하는 함수를 정리 함수라고 하는데, useEffect의 실행 조건이 빈 배열인 경우 컴포넌트가 언마운트될 때 정리 함수를 실행