[React] Hook Flow 이해하기 1 :: App - Child

 

🎯 Hook Flow 이해하기 1 :: App - Child

• 훅의 호출 타이밍을 알아보자!

 

📝 Hook의 호출 타이밍

const rootElement = document.getElementById('root');

const App = () => {
    console.log("App render start");

    // input 박스를 보여줄지 말지 알려주는 상태
    const [show, setShow] = React.useState(() => {
        console.log("App useState");
        return false
    });



    React.useEffect(() => {
        console.log("App useEffect, no deps");
    })

    React.useEffect(() => {
        console.log("App useEffect, empty deps");
    }, [])

    React.useEffect(() => {
        console.log("App useEffect, [show]");
    }, [show])



    function handleClick() {
        setShow((prev) => !prev); // true면 false, false면 true로
    }
    
	console.log("App render end");
    
    return (
        <>  
            <button onClick={handleClick}>Search</button>
            {show ? (
                <>
                    <input />
                    <p></p>
                </>
            ) : null}
        </>
    )
};
ReactDOM.render(<App />, rootElement);

(state, props) => stateChange

• state는 변경 사항이 적용되는 시점에 컴포넌트가 가지는 state에 대한 참조이다. -> 이전 값.
• state는 직접 변경하면 안 된다.
• 전달된 state와 props를 기반으로 새로운 객체를 만들어서 변경 사항을 표현해야 한다.
• 위 예시에서는 prev로 인자를 받으면 그 값을 가지고 상태를 바꿀 수 있다.

 

hook flow

• render start -> useState -> end -> useEffect
• useEffect는 사이드 이펙트이기 때문에 다 그려지고 나서 동작된다.

 

🏷 요약

• hook flow -> hook들의 호출 타이밍
• useState -> setState시 prev이 주입된다.

 

📌 참고

• React.Component - React