[ React ] 리액트 Hooks(useState, useEffect)

 

 

Hooks 는 함수형 컴포넌트에서도 state 를 관리할 수 있도록 해주는

 

useState 와 렌더링 직후 작업을 수행하는 useEffect 등을 제공한다.

​

useContext, useReducer, useCallBack 등 여러 기능이 더 있지만,

 

현 게시글에선 useState 와 useEffect 기능만을 다룬다.

​

이는 리액트 version 16 부터 제공되는 기능이다.

​

​

​

react-hook 이라는 프로젝트를 생성하고 실행해보자.

C:\> create-react-app react-hook
C:\> cd react-hook
C:\react-hook> yarn start

 

 

 

 

 

useState

먼저 useState 는 가장 기본적인 Hook 의 기능으로

 

함수형 컴포넌트 내에서 능동적으로 상태를 관리할 수 있도록 해준다.

​

Count.js 컴포넌트를 아래와 같이 만들어보자.

import React, { useState } from 'react';

function Count() {

    // 숫자형 useState 사용
    let numberState = useState(0);
    let numberCount = numberState[0];
    let setNumberCount = numberState[1];

    // 문자형 useState 사용
    let stringState = useState("A");
    let stringCount = stringState[0];
    let setStringCount = stringState[1];

    // 숫자 증가 이벤트
    function numberIncrease() {
        setNumberCount(numberCount + 1);
    }

    // 문자 증가 이벤트
    function stringIncrease() {
        setStringCount(stringCount + "A");
    }

    return (
        <div>
            <div>
                <h3>{numberCount}</h3>
                <button onClick={numberIncrease}> 증가 </button>
            </div>
            <div>
                <h3>{stringCount}</h3>
                <button onClick={stringIncrease}> 증가 </button>
            </div>
        </div>
    )
}
export default Count;

 

 

블럭 별로 살펴보자.

​

먼저 useState 를 사용하기 위해 import 해주고,

import React, { useState } from 'react';

 

 

useState 를 이용해 다음과 같이 할당한다.

let numberState = useState(0);
let numberCount = numberState[0];
let setNumberCount = numberState[1];

// 배열 비구조화 할당시 아래와 같이 선언 ( 위와 같은 선언문임 )
let [numberCount, setNumberCount] = useState(0);

 

 

useState() 안의 값은 초기값으로 0 을 집어 넣었고, 이를 numberState 에 할당한다.

​

numberState 의 구조는 아래와 같이 선언된다.

 

 

빨간 네모 부분을 보면 배열로 선언된 걸 확인할 수 있는데, 0 번째 index 는 방금 집어넣은 값 0 이 들어간다.

​

1 번째 index 는 0 을 초기값으로 줬기에 숫자를 Set 할 수 있는 기능을 할당해준다.

​

그렇기에 numberState[0] 은 값 0 을, numberState[1] 은 Setter 기능을 수행할 수 있게 되는 것이다.

​

string 의 경우 역시 동일하게 선언하면 된다.

let stringState = useState("A");
let stringCount = stringState[0];
let setStringCount = stringState[1];

 

 

그리고 return 구문을 보면 아래와 같은데,

<div>
    <div>
        <h3>{numberCount}</h3>
        <button onClick={numberIncrease}> 증가 </button>
    </div>
    <div>
        <h3>{stringCount}</h3>
        <button onClick={stringIncrease}> 증가 </button>
    </div>
</div>

 

 

각 증가 버튼을 클릭하면 선언해놓은 아래의 이벤트가 발동된다.

// 숫자 증가 이벤트
function numberIncrease() {
    setNumberCount(numberCount + 1);
}

// 문자 증가 이벤트
function stringIncrease() {
    setStringCount(stringCount + "A");
}

 

 

이 때, 위에서 선언해놓은 setNumberCount 와 setStringCount 는 각각 값을 버튼 클릭시 증가시키게 되는 것이다.

​

​

App.js 컴포넌트에서 Count.js 컴포넌트를 렌더링해 실행해보자.

import React from 'react';
import Count from './Count';

function App() {
  return (
    <Count />
  );
}

export default App;

 

 

 

 

실행화면

 

 

 

 

 

 

useEffect

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

​

특정 작업을 수행하는 렌더링 기준은 우리가 정할 수 있다.

​

먼저 아까 useState 를 import 받았듯이 useEffect 도 import 해주어야 한다.

​

useState 를 설명할 때 이용한 react-hook 프로젝트를 그대로 이용한다.

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

 

 

Count.js 컴포넌트에 아래 코드를 추가한다.

useEffect( () => {
    console.log("렌더링 되었습니다.");
});

 

 

이제 Count.js 컴포넌트가 최초에 렌더링 될 때, 증가 버튼을 클릭해 렌더링 될 때 마다 콘솔에 로그를 찍을 것이다.

​

숫자 증가 버튼을 10 번 눌렸다면 최초 렌더링 1 회, 버튼 10 회 까지해서 로그가 열 한번 찍히게 된다.

 

 

만약 최초 렌더링시에만 반응하게 하고 싶다면 빈 값을 넘겨주면 된다.

useEffect( () => {
    console.log("렌더링 되었습니다.");
}, []);

 

 

숫자 증가를 10 번 클릭해도 최초 렌더링시 찍힌 로그만 나온다.

 

 

그럼 숫자 증가 버튼을 클릭했을 때의 렌더링에는 반응하지 않고, 문자 증가 버튼을 클릭했을 때 렌더링에만 반응하고 싶다면?

​

특정 값에만 반응하고 싶다면 아래처럼 값을 넘겨주면 된다.

useEffect( () => {
    console.log("렌더링 되었습니다.");
}, [stringCount]);

 

 

그 결과 숫자 증가 버튼을 5 회 눌렸지만 이에는 로그가 찍히지 않고,

 

최초 렌더링 1 회, 문자 증가시 렌더링 2 회로 인해 3 개의 로그가 찍힌다.

 

 

 

앞서 말했듯이 이 외에도 Hooks 는 여러 기능을 포함하고 있다.

​

앞으로 계속 React 를 사용한다면 더 알아보는게 유용하니 공부할 때 참고한 링크 하나를 남긴당.

 

https://velog.io/@velopert/react-hooks#1-usestate

리액트의 Hooks 완벽 정복하기