[React] - 10) Hook - useState/useEffect

velopert 님의 '리액트를 사용하는 기술' 교재로 부터 공부한 내용임을 밝힙니다😃

Hook

안녕하세요

 

오늘은 Hook의 한 종류인 useState와 useEffect에 대해 포스팅합니다.

 

이전에 Hook이 뭔지 알아야겠죠?

 

이전 포스팅에서 클래스형 컴포넌트에서는 state를 관리하기 간편하지만, 함수형 컴포넌트에서는 원래는 불가능하다고 했습니다.

 

하지만 useState의 등장으로 함수형 컴포넌트에서도 state를 굳이 클래스형으로 변환하지 않고도 다룰 수 있게 되었죠!

 

Hook은 이처럼 함수형 컴포넌트에서도 상태 관리를 하고/렌더링 후 작업을 설정하는 등의 작업을 할 수 있습니다.

 

클래스형 컴포넌트는 이러한 Hook의 역할을 라이프사이클 메소드가 대신하는데요!

 

사실 라이프사이클 메소드가 보다 종류가 다양하고, 사용하기 간편하지만 다소 어렵기에 (ㅠㅠ) 우선 Hook을 가볍게 건드리고,

 

클래스형 컴포넌트에서의 라이프사이클링은 추후에 포스팅하도록 하겠습니다!

 

---

 

이전 state 포스팅에서 다루었던 useState를 사용하여 간단한 비밀번호 입력기를 만들어봅시다.

 

이번엔 함수형 컴포넌트를 만들어 줍시다(code snippets을 사용하고 있다면 rsc로 자동완성이 가능합니다!)

import React, { useState } from 'react';

const Password = () => {
    const [password, setPassword] = useState('');

    const onChangePassword = e => {
        setPassword(e.target.value);
    }
    return (
        <div>
            <div>
                <input value={password} onChange={onChangePassword} />
            </div>
            <div>
                <b>{password}</b>
            </div>
        </div>
    );
};

export default Password;

우선 useState의 사용법을 한번 더 짚고 가겠습니다.

 

const [상태의 기본값, 상태를 설정하는 함수] = useState('초기화 할 값')으로 사용하는데요.

위의 코드처럼 사용할 시에

 

password는 ''로 초기화되고, setPassword 함수를 통해 상태값을 변경할 수 있게 됩니다.

 

그렇다면 이제 input에 값을 입력하면 자동으로 onChangePassword -> setPassword를 통해 자동으로 입력값을 변경하게 되겠네요!

 

터미널에 yarn start를 입력하고 정상적으로 작동하는지 확인해 봅시다.

 

지금과 같은 경우 하나의 상태값만 변경하였기 때문에 useState를 하나만 사용했지만, 여러 개를 사용해야 할 경우 더 많은 useState가 필요

하겠죠?

 

UseEffect

 

useEffect는 리액트 컴토넌트가 렌더링 할 때마다 호출됩니다. 한번 이전 코드에서 useEffect를 추가하여 log로 확인해보겠습니다.

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

const Password = () => {
    const [password, setPassword] = useState('');

      useEffect(() => {
      console.log('렌더링');
      console.log({password});
    });

    const onChangePassword = e => {
        setPassword(e.target.value);
    }
    return (
        ...
    )
};

export default Password;

password 상태 값이 바뀌고 -> 그에 따라 렌더링할때마다 log가 출력되는게 보이시나요?

 

이렇게 useEffect를 통해 함수형 컴포넌트에서도 일종의 라이프사이클링이 가능합니다.

 

 

안드로이드의 라이프사이클을 생각해보면, 페이지가 넘어갈 때마다, 종료될 때 마다 ... 등등 굉장히 다양한 라이프 사이클이 있었다는 것을 기억하실 겁니다.

 

하지만 useEffect의 경우 단순히 렌더링 될 때만 계속 호출한다면 호출의 주기를 판단하기 힘들겠죠?

 

다행히, useEffect의 두번째 파라미터를 통해 특정 경우에 따라 useEffect를 호출하게 끔 할 수 있습니다.

 

// 화면에 맨 처음 렌더링 될 때만 호출
     useEffect(() => {
         console.log('렌더링');
     }, []);
     
// password가 바뀔 때만 호출    
    useEffect(() => {
        console.log('렌더링');
    }, [password]);

 

 

이상으로 Hook의 종류인 useState와 useEffect에 대해 알아보았습니다.

 

하지만 이 둘로 클래스형 컴포넌트의 라이프사이클링을 다루기는 턱없이 부족합니다 ㅠㅠ/

 

다음 포스팅에서는 더 다양한 Hook에 대해 알아보겠습니다!