React_Hooks

Hooks

useState, useEffect등의 기능을 제공하며 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해준다.

1. Hooks 규칙

• React function 제일 상단에 작성한다.

• React function 안에서만 사용한다.

2. useState

가장 기본적인 Hook이며, 함수형 컴포넌트에서 가변적인 상태를 지닐 수 있게 해준다. 함수형 컴포넌트에서 state를 관리해야 한다면 이를 사용하면 된다.

import React, {useState} from 'react'

 const Counter = () => {
    const [value, setValue] = useState(0); <---기본값 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의 파라미터에는 state의 기본값을 넣어준다. 함수가 호출되면 배열을 반환하고, 첫번째 원소는 state, 두번째 원소는 state를 설정하는 함수다. 이 함수에 파라미터를 넣어 호출하면 전달받은 파라미터로 값이 바뀌고 컴포넌트가 정상적으로 리렌더링된다.

3.useEffect

useEffect는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook이다. 클래스형 컴포넌트의 ComponentDidMount, ComponentDidUpdate, ComponentWillUnMount가 작동할 때 함수들이 한 번에 사용할 수 있게 만들어 준 것이 useEffect이다.

• 마운트 될 때만 실행

  설정한 함수를 컴포넌트가 맨 처음 렌더링될 때만 실행하고, 업데이트 될 때는 실행하지 않으려면 함수의 두 번째 파라미터로 빈 배열을 넣어주면 된다.

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

• 특정값이 업데이트 될 때만 실행

  useEffect를 사용할 때, 특정 값이 변경될때만 호출하고 싶은 경우가 생길 수 있다. 클래스형 컴포넌트라면 componentDidUpdate를 사용하지만 useEffect에서는 두 번째 파라미터로 전달되는 배열 안에 검사하고 싶은 값을 넣어주면 된다.

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

배열 안에는 useState를 통해 관리하고 있는 state를 넣어주어도 되고, props로 전달받은 값을 넣어주어도 된다.

• 뒷정리 함수

  useEffect는 기본적으로 렌더링되고 난 직후마다 실행되며, 두 번째 파라미터 배열에 무엇을 넣는지에 따라 실행되는 조건이 달라진다. 컴포넌트가 언마운트되기 전이나 업데이트 되기 직전에 어떠한 작업을 수행하고 싶다면 useEffect에서 뒷정리(cleanup)함수를 반환해 주어야 한다.

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

그리고 뒷정리 함수가 호출될 때는 업데이트되기 직전의 값을 보여준다. 오직 언마운트될 때만 뒷정리 함수를 호출하고 싶다면 useEffect 함수의 두 번째 파라미터에 비어있는 배열을 놓으면 된다.