React useEffect, useState (Hook의 이해)

안녕하세요 인포돈 입니다.

최근에 변화된 React v6에 의거하여 작성되었습니다. (인텔리제이 활용)

---

Hook이란?

hook은 react v16.8에서 새롭게 출시된 기능으로 함수형 컴포넌트에 state를 제공하여 로직의 재사용성을 높여주는 기능이다. 여기서 컴포넌트는 리액트에서 가장 기본이 되는 단위 컴포넌트이며, java의 객체와 유사한 개념이다. hook 이전에는 여러 컴포넌트들의 재사용하기 위해서 HOC나 Render Props패턴을 주로 이용하였지만, hook을 활용해여 함수 컴포넌트의 state나 lifecycle을 보다 쉽게 접근하고 사용할 수 있게 해줍니다.

 

우리는 그 중 Hook에서 제공하는 useEffectm useState API에 대해서 이해해하고 활용해보겠습니다.

---

 - useState

함수형 컴포넌트에서 상태값을 관리하는 기능

 

기본구조

import {useState} from 'react'

const [state, setState] = useState();

아주 쉽게 state는 값을 담는 바구니이고 setState는 state의 상태를 바꿔줄 때 사용됩니다. 여기서 첫 useState();에 value를 넣어주면 deafault값을 지정해 줄 수 있습니다

 

import React, { useState } from 'react'

function Test () {
    const [state,setState] = useState('');
    
    return (
        <div>
            <p>state</p>
            <input type='text' value={state} onChange={e=>setState(e.target.value)}></input>
        </div>
    )
}

아주 간단한 예시로 좀더 이해를 쉽게 하실 수 있습니다. 

 

기본값으로 ''가 주어졌고, text의 변화가 일어날 때마다 setState를 통해서 state의 값을 변화시켜주죠. 물론 이러한 상태값에는 json, 숫자, 문자 모두 가능하죠.

---

 -useEffect

render가 발생할 때마다 effect를 실행하여 lifecycle을 조절 할 수 있게 됩니다. 이 때 두번째 인자로 넣어는 input을 통해서 특정 상태가 update될 때만 effect를 실행할 수 있도록 조절 할 수 도 있죠.

(이전에는 componentDidMound, comonentDidUpdate, componentWillUnmount를 활용하여 사용)

 

기본구조

import {useEffect} from 'react';

useEffect(effect, [,deps]);

 effect의 경우 랜더링 이후 실행할 함수를 의미하게 됩니다. 두번째 [,deps]의 경우 특정한 값이 변경될 때 effect함수를 실행하게 해주는 값입니다.

 

 

 effect만 사용

import {useState, useEffect} from 'react';

const test = () => {
	const[count, setCount] = useState(0);
    
    useEffect(() => {
    	console.log("동작", count);
    })

	return(
    	<div>
        	<p>{count}번 클릭</p>
            <button onClick={setCount(count+1)}>클릭</button>
        </div>
    )
}

이때는 우리는 두번째 인자를 주지 않았습니다. 그렇다면 우리는 click을 줄 때마다 useEffect가 실행되어 console에 증가되는 count를 확인할 수 있게 됩니다.

 

 effect와 deps사용1

import {useState, useEffect} from 'react';

const test = () => {
	const[count, setCount] = useState(0);
    
    useEffect(() => {
    	console.log("동작", count);
    },[])

	return(
    	<div>
        	<p>{count}번 클릭</p>
            <button onClick={setCount(count+1)}>클릭</button>
        </div>
    )
}

 두번째 인자로 빈 배열을 넘겨주면 앞선 예시와는 다르게 최초 렌더링 시에만 console에 값이 찍히는 것을 알 수 있다.

 

 effect와 deps사용2

import {useState, useEffect} from 'react';

const test = () => {
	const[count, setCount] = useState(0);
    
    useEffect(() => {
    	console.log("동작", count);
    },[count])

	return(
    	<div>
        	<p>{count}번 클릭</p>
            <button onClick={setCount(count+1)}>클릭</button>
        </div>
    )
}

이런식으로 count를 넣어주게 된다면, 다른 값이 변경되더라도 count가 변경되지 않으면 useEffect는 실행되지 않음을 알 수 있다. (조금더 확실히 알고 싶으면 다른 input태그를 활용해 확인 가능)