React- Hooks(1)

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

리액트에서 기본적으로 제공하는 Hooks는 총9개이다.
오늘은 useState와 useEffect를 알아보도록 하자.

1. useState

1.1. useState란??

: useState는 가장 기본적인 Hook이며 컴포넌트에서 state(상태)를 관리할 수 있다. 만약 함수형 컴포넌트에서 상태를 관리해야 한다면 useState를 사용하면 된다.

1.2. 사용법

1. 리액트 패키지에서 useState함수를 불러온다.
2. useState함수를 호출하면 배열이 반환되는데 첫번째 원소의 value는 현재 상태값 변수이고 두번째 원소 setValue는 상태 값을 갱신해주는 Setter 함수이다. useState괄호안의 값은 상태의 초기값이다.

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;

2. useEffect

2.1. useEffect란?

: 컴포넌트가 렌더링될때마다 특정 작업을 실행할 수 있도록하는 Hook이다.
컴포넌트가 마운트 됐을때(처음 생성) 언마운트됐을때(제거될때) 그리고 업데이트 될때 특정 작업을 실행할 수 있다.

2.2. 사용법

1. 리액트 패키지에서 useEffect함수를 불러온다.
2. 컴포넌트가 화면에 처음 마운트 됐을때 한번만 실행하고 싶을땐 deps위치에 빈배열을 넣는다.
3. 컴포넌트가 리렌더링될때마다 실행하고 싶을땐 배열을 생략한다.
4. 컴포넌트의 특정값이 업데이트될때마다 실행하고 싶을땐 deps에 검사하고 싶은 값을 넣어준다.

import React, {useEffect} from 'react';

const Effect = () => {
  
  useEffect(()=>{
    console.log("마운트 될때만 실행");
  },[]);
  
  
  useEffect(()=>{
    console.log("렌더링 시 실행");
  });
  
  useEffect(()=>{
    console.log("value값이 업데이트 될때마다 실행");
  },[value]);
        
}

export default Effect;

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