React 기본 (상태관리, 생명주기)

김현준·2024년 3월 23일

리액트

목록 보기

2/11

함수 컴포넌트 버전

Stae(상태)

상태는 무엇이고 왜 필요한가?

유저는 그림처럼 서버와 인터렉션을 한다.
예를들면 회원가입과 로그인, 블로그 포스팅 등등
그 정보들은 보통 서버와 통신하는 db에 저장이 된다.

그렇다면 이처럼 댓글을 남기기 직전엔 댓글의 내용이 어디에 저장이 될까?
클라이언트 사이드의 메모리 위가 일반적이다. 만약 이런 내용들이 실시간으로 db에 저장되고 업데이트된다면 유저의 불편함과 과도한 네트워크 비용이 발생할 것이다.
따라서 클라이언트 사이드 위에서 메모리 값들을 기억하고 사용할 수 있어야 한다.

Props vs State

리액트는 메모리 위에 저장되는 값 중에서 대표적으로 props와 state가 있다.
state를 상태라고 부르는데 상태관리란 state의 관리를 말한다.

props:
부모 컴포넌트로부터 물려받은 값으로, 자식 컴포넌트(여기선 App 컴포넌트)에선 그것을 읽을 수만 있다.

state:
함수형 컴포넌트에선 useState로 선언.
그 값은 setState 등을 사용하여 컴포넌트 내부에서 직접 업데이트 할 수 있다.
개발자들은 state에 저장된 값들을 활용하여 손쉽게 UI에 표현할 수 있다.

리액트 훅을 사용하는 함수형 컴포넌트의 생명주기

함수형 컴포넌트는 클래스형 컴포넌트와 다르게 생명주기 메서드가 없다. 대신, 함수형 컴포넌트는 React Hooks를 사용하여 생명주기와 관련된 작업을 수행한다.

Mounting
초기에 컴포넌트가 생성될 때

Updating
소멸 전 props나 상태가 업데이트되는 때

1
컴포넌트를 마운팅하고 리턴 값을 렌더링. 렌더링된 상태을 가상 돔에 그린다.

2
가상 돔과 실제 돔의 엘리먼트를 비교. 만약 다른 부분이 감지된다면 그 부분만 돔에 업데이트

초기 렌더링의 경우 현재 컴포넌트에 대한 정보가 돔에 없기에 현재 컴포넌트의 모든 부분을 돔에 그린다.

3
컴포넌트 내부의 useEffect와 useLayoutEffect 훅을 실행. 여기까지가 마운팅 과정이다.

3-2
직전에 실행된 useEffect나 유저의 인터렉션 등에 의해 state 또는 props 값이 변경된다.
가상돔을 변경된 state와 props 값에 맞춰 다시 그린다.(값이 변경됐지만 UI의 변화가 없다면 돔을 업데이트하지 않는다.)
여기까지가 업데이팅 과정이다.
다시 3번으로

4
컴포넌트가 소멸할 때 useEffect 내부에 정의된 클린업 함수를 실행. 그리고 컴포넌트는 소멸한다.

함수형 컴포넌트의 생명주기 예시

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

const MyComponent = () => {
    const [count, setCount] = useState(0);

    useEffect(() => {
        // 이 코드는 컴포넌트가 마운트될 때 실행된다.
        console.log('컴포넌트가 마운트되었다.');

        return () => {
            // 이 코드는 컴포넌트가 언마운트될 때 실행된다.
            console.log('컴포넌트가 언마운트되었다.');
        };
    }, []);

    useEffect(() => {
        // 이 코드는 count 값이 변경될 때마다 실행된다.
        console.log(`count 값이 ${count}로 변경되었다.`);
    }, [count]);

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

export default MyComponent;