[React] 리액트 Hook 이해하기 - useState, useEffect

들어가며

이번 글에서는 React Hook의 개념과 제공하는 기능들을 간단하게 살펴본다.
따라서 리액트 개발 환경이 구성된 이후를 다루기 때문에 환경 구축이 안 된 분들은 여기를 참고하여 개발에 필요한 세팅을 먼저 하는 것을 권장한다.

React Hooks?

Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수이다.

React Hook은 함수형 컴포넌트를 사용하는 것으로 기존 클래스형 컴포넌트가 가지고 있던 단점들을 보완하고자 등장하게 되었다.

 

클래스형 컴포넌트의 한계

• 클래스의 문법의 진입장벽
• 축소의 어려움
• re-load 신뢰성 문제
• 최신 기술의 적용의 비효율성

React Hook은 함수형 컴포넌트에서 상태 관리를 할 수 있는 useState, 페이지가 렌더링 된 후 작업을 수행할 수 있는 useEffect등의 기능을 제공한다.

useState()

useState는 컴포넌트에서 state값을 추가하고 변경할 때 사용된다. 함수형 컴포넌트에서는 클래스형 컴포넌트처럼 state를 사용할 수 없었다. 따라서 Hook을 사용해서 클래스형 컴포넌트가 제공하는 state와 동일한 기능을 수행할 수 있도록 했다.

먼저, useState를 사용하는 방법을 알아보자.

import React, { useState } from 'react';

useState를 사용하기 위해 해당 모듈을 import한다.

다음으로 상태를 관리할 변수를 정의한다.

  const [value, setValue] = useState(0);

위와 같이 useState 변수를 정의했다. 괄호 안에 있는 값은 value의 초기값을 정의한다. 이제 증가, 감소 버튼을 만들어서 해당 state를 제어해보자.

function App() {
  const [value, setValue] = useState(0);
  
  return (
    <div className="App">
      <p>value : {value}</p>
      <button onClick={() => {setValue(value+1)}}>증가</button>
      <button onClick={() => {setValue(value-1)}}>감소</button>
    </div>
  );
  
}

두 개의 버튼을 눌러보면 value의 상태가 실시간으로 바뀌는 것을 확인할 수 있을 것이다.

(새로고침을 하게 되면 페이지는 다시 렌더링 되기 때문에 값은 초기값인 0으로 바뀐다.)

useState 여러 번 사용하기

하나의 useState 함수는 하나의 상태 값을 관리를 할 수 있다. 만약에 컴포넌트에서 관리해야 할 상태가 여러 개인 경우에는 useState를 여러 개 추가하여 관리해야 한다.

먼저 다음과 같이 코드를 추가한다.

const [name, setName] = useState('');

  const changeName = (e) => {
    setName(e.target.value);
  };

한 개의 useState를 추가적으로 정의했고, 해당 state를 컨트롤 할 함수를 정의했다.

return (
    <div className="App">
      <p>value : {value}</p>
      <button onClick={() => {setValue(value+1)}}>증가</button>
      <button onClick={() => {setValue(value-1)}}>감소</button>

      <p>my name : {name}</p>
      <input onChange={changeName} value={name}></input>
    </div>
  );

그리고 위와 같이 input 태그를 추가한다.

페이지를 새로고침 후 확인해보면 다음과 같은 화면이 나온다.

그리고 해당 input에 값을 입력하면 실시간으로 my name : 옆에 데이터가 입력되는 것을 확인할 수 있다.

onChange 함수는 해당 태그 안 데이터가 변할 때 Trigger 되며 실행할 함수로 changeName 이라는 함수를 선언한 것이다.

useEffect()

useEffect는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정 할 수 있는 Hook 이다.

클래스형 컴포넌트의 componentDidMount(최초 렌더링) 와 componentDidUpdate(렌더링 후 값 변화) 두 개를 합친 것으로 볼 수 있다.

useEffect 사용 방법

import React, { useEffect } from 'react';

다음으로 useEffect의 매개변수 2가지를 정의한다.

• 첫번째 매개변수, 익명함수 ()=>{}
• 두번째 매개변수, 빈 배열 []

즉, useEffect(()=>{}, []) 이런 형태로 코드가 구성된다.

• 익명 함수에는 페이지가 렌더링 된 후 또는 업데이트 된 후에 실행될 코드를 작성한다.
• 두번째 배열은 useEffect() 함수 Trigger 조건을 정의한다.
  • 빈 배열 : 페이지가 처음 렌더링 될 때 1번 실행한다.
  • 배열 안에 상태가 있는 경우 : 특정 상태의 값이 바뀔 때만 실행한다.
  • 배열을 생략하는 경우 : 페이지를 re-rendering(새로고침) 할 때마다 실행한다.

이제 useEffect 사용 예제를 살펴보자.

1. 빈 배열을 사용하여 1번만 실행하기

useEffect(() => {
    console.log('페이지 렌더링 완료');
    console.log(name);
  }, []);

현재 코드에 위 코드를 추가하고 새로고침 후 개발자 도구를 연 뒤 콘솔을 확인해보자.

위 사진과 같이 콘솔이 찍히는 것을 볼 수 있다. 두번째 인자로 빈 배열을 사용했으므로 특정 상태 값을 변경시켜도 useEffect에 정의된 코드는 실행되지 않는 것을 확인할 수 있을 것이다.

2. 특정 값이 업데이트 될 때마다 실행하기

이 때에는 []안에 검사하고 싶은 값을 넣어주면 된다. 필자는 name 변수를 조건으로 추가했다.

useEffect(() => {
    console.log('페이지 렌더링 완료');
    console.log(name);
  }, [name]);

그리고 다시 콘솔창을 확인해보자.

input 태그에 글자 하나하나를 입력할 때마다 로그가 찍히는 것을 확인할 수 있다. useState로 정의한 name 변수는 input 태그가 바뀔 때마다 업데이트 되고, 따라서 name 값이 계속 변화할 때마다 useEffect가 실행되는 것이다.

---

출처

• https://devbirdfeet.tistory.com/52
• https://velog.io/@velopert/react-hooks