[react] Hooks | useState, useEffect 이해

Hailey·2023년 3월 14일
0
post-thumbnail

React를 사용하면서 꼭 사용하게 되는
useState와 useEffect에 대해 알아볼 것이다. 그 전에 react Hook이라는 것에 대해 먼저 알아보도록 하자.


Hook?

react의 함수 구성요소는 다음과 같다.

const Example = (props) => {
  // You can use Hooks here!
  return <div />;
}

// 혹은

function Example(props) {
  // You can use Hooks here!
  return <div />;
}

Hooks는 React v16.8에 새롭게 도입된 기능이다.
Hooks함수형 컴포넌트에 state를 제공함으로써 상태 관련 로직의 재사용을 이전보다 훨씬 쉽게 만들어준다. 클래스형 컴포넌트의 문제점들을 해결하기 위해 나온 것이 바로 훅(Hooks)이다.

Hooks는 일반 JavaScript 함수이다. 그래서 Hooks를 활용하는 Custom Hooks를 만들어 상태를 가지는 로직을 함수로 쉽게 분리할 수 있다.

이때 Hooks가 제공하는 내장 API에는 useEffectuseState가 있다.


✏️ useState

useState는 함수형 컴포넌트에서 상태값을 관리하게 해준다. initialState를 파라미터로 받고, state와 state를 변경할 setState함수를 반환한다.

기본 구조는 아래와 같다.

const [state, setState] = useState(initialState);

이때 배열 비구조화 문법을 이용해 받는 것이기 때문에, state와 setState의 이름은 임의로 정할 수 있다.

아래의 예시를 보자.

import { useState } from 'react';

const Example = () => {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>{`count: ${count}`}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  )
};

export default Example;

위 예시에서는 default값이 0인 count useState를 작성하였다. useState가 반환하는 첫 번째 인자인 state와 두번째 인자인 setState를 비구조화 문법을 통해 count, setCount로 받아서 사용할 수 있게 된다.

-> setCount로 count state를 변경하면 렌더링이 다시 일어난다.

이때 주의할 점은 클래스형 컴포넌트에서 setStat를 하면 병합되지만, 함수형 컴포넌트에서는 이전 상태값을 지운다.


✏️ useEffect

useEffect는 컴포넌트의 상태값 변화에 따라 컴포넌트 내부에서 변경이 이루어져야 되는 것들을 처리할 수 있다.
(리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook이다.)

useEffect의 기본 구조는 아래와 같다.

import React, { useEffect } from 'react'; 

useEffect(() => {
        console.log('마운트 될 때만 실행된다.');   
}, []);

// useEffect( function, deps )
// function : 수행하고자 하는 작업   
// deps : 배열 형태이며, 배열 안에서 검사하고자 하는 특정 값 or 빈 배열   

첫번째 파라미터로 함수를 필요로 하고 두번째 파라미터로 배열형태의 값을 필요로 한다.

두번째 파라미터에는 보통 컴포넌트 state값이 들어가는데 배열에 포함된 값이 변경되었을 때 해당 useEffect 내부 로직이 실행된다.

useEffect(() => {
        console.log('마운트 될 때만 실행된다.');   
}, []);

두번째 파라미터로 빈 배열을 넣는 경우 컴포넌트가 처음 렌더링 될때 (mount 될 때)만 실행된다.

useEffect(() => {
    console.log('렌더링 될 때 마다 실행된다.');
});

만약 두번째 파라미터에 배열을 생략한다면 리렌더링 될 때 마다 실행된다.

그렇다면 특정값이 업데이트 될 때 실행하고 싶을 때는 deps 배열 안에 검사하고 싶은 값을 넣어준다.
의존값이 들어있는 배열 deps(dependency)이라고 한다.

이때 주의할 점은 업데이트 될 때만 실행하는 것이 아니라 마운트 될 때도 실행된다.

useEffect(() => {
    console.log(name);
    console.log('업데이트 될 때 실행된다.');
}, [name]);

마지막으로 useEffect의 return 값이 있는 경우 hook의 cleanup 함수로 인식하고 다음 effect가 실행되기 전에 실행을 해준다.

🔍 어떠한 값의 변화를 감지하면, 실행되어 특정 함수나 작업을 실행하는 함수이다.


✍🏻 마지막으로 정리하자면,

useEffectDependency가 있던 없던, 대괄호만 있던, 렌더링 후 useEffect는 무조건 한번은 실행된다.

useEffect(() => {}, [특정변수 혹은 오브젝트]);

대괄호 안에 지정된 변수 혹은 오브젝트가 변하지 않는다면, useEffect는 실행되지 않는다.

[출처] https://reactjs.org/docs/hooks-state.html

profile
차근차근 하나씩

0개의 댓글