8.React 렌더링 과정

렌더링 과정을 보시기 전에 리액트 훅의 동작에 대해 알고나면 이해가 훨씬 더 쉽습니다.

https://steady-snb.tistory.com/104

7. React Hooks의 정의와 종류에 대해 알아보자

 

 

다음은 리액트 컴포넌트가 실행되는 과정을 알아보기위한 코드입니다.

import {useEffect,useState} from 'react';

function FunctionalComponent() {
    console.log('Function Beginning');
    const [value, setValue] = useState(0);

    useEffect(() => {
        console.log('Function useEffect[]');

        return () => {
            console.log('Function useEffect return[]');
        }
    },[]);

    useEffect(() => {
        console.log('Function useEffect[value]');

        return () => {
            console.log('Function useEffect return[value]');
        }
    },[value]);

    console.log('Function End');

    return (
        <div>
            <h1>FunctionalComponent</h1>
            <h1>value: {value}</h1>
            <button onClick={() => {
                setValue((state) => state + 1)
            }}
            >
                Increase value
            </button>
        </div>
    );
}

export default FunctionalComponent

 

 

 

 

출처 - https://www.inflearn.com/course/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%8B%A4%EB%AC%B4%EC%84%9C%EB%B9%84%EC%8A%A4-%EC%A0%9C%EC%9E%91%ED%95%98%EA%B8%B0/dashboard