React - Hooks (1)

Hooks는 리액트 16.8에서 새로 도입된 기능으로 함수형 컴포넌트에서도 상태 관리를 할수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존 함수형 컴포넌트에서 할수 없었던 다양한 작업을 할수 있게 해줍니다.

 

(1) useState

 

useState는 가장 기본적인 Hooks이며, 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해줍니다.

만약 함수형 컴포넌트에서 상태를 관리해야 한다면 이 Hook을 사용하면 됩니다.

// info.js

import React, { useState } from 'react';

const Counter = () => {
  const [value, setValue] = useState(0);
  
  return (
  <div>
    <p>
    	현재 카운터 값은 <b>{value}</b> 입니다.
    </p>
    <button onClick={() => setValue(value +1)}>+1</button>
    <button onClick={() => setValue(value -1)}>-1</button>
  </div>
  );
};

export default Counter;

useState는 코드 상단에서 import 구문을 통해 불러오고, 다음과 같이 사용합니다.

 

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

 

배열의 첫번째 원소는 상태 값, 두번째 원소는 상태를 설정하는 함수입니다.

이 함수에 파라미터를 넣어서 호출하면 전달받은 파라미터로 값이 바뀌고 컴포넌트가 정상적으로 리렌더링됩니다.

컴포넌트에서 관리해야 할 상태가 여러 개라면 useState를 여러 번 사용하면 됩니다.

 

(2) useEffect

 

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

클래스형 컴포넌트의 componentDidMount 와 componentDidUpdate를 합친 형태로 봐도 무방합니다.

 

// info.js

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

const Info = () => {
  const [name, setName] = useState('');
  const [nickname, setNickname] = useState('');
  useEffect(() => {
    console.log('렌더링이 완료되었습니다.');
    console.log({
      name,
      nickname
    });
  });
  
  const onChangeName = e => {
    setName(e.target.value);
  };
  
    const onChangeName = e => {
    setNickname(e.target.value);
  };
  
  return (
    (...)
  );
};

export default Info;

 

(2).1  마운트 될때만 실행하고 싶을때

 

useEffect에서 설정한 함수를 컴포넌트가 화면에 맨 처음 렌더링 될때만 실행하고, 업데이트 될때는 실행하지 않으려면

함수의 두번쨰 파라미터로 비어 있는 배열을 넣어 주면 됩니다.

 

//info.js - useEffect

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

 

(2).2 특정 값이 업데이트될 때만 실행하고 싶을 때

 

특정값이 업데이트될 때만 실행하고 싶을 때는 useEffect의 두번째 파라미터로 전달되는 배열 안에 검사하고 싶은 값을 넣어주면 됩니다.

 

//info.js - useEffect

useEffect(() => {
    console.log(name);
  }, [name]);

 

(2).3 뒷정리하기

 

useEffect는 기본적으로 렌더링되고 난 직후마다 실행되며, 두 번째 파라미터 배열에 무엇을 넣는지에 따라 실행되는 조건이 달라집니다.

 

컴포넌트가  언마운트되기 전이나 업데이트되기 직전에 어떠한 작업을 수행하고 싶다면 useEffect에서 뒷정리(cleanup) 함수를 반환해 주어야 합니다.

 

// info.js - useEffect

useEffect(() => {
	console.log('effect');
    console.log(name);
    return () => {
      console.log('cleanup')
      console.log(name);
    };
  });