Hooks?

함수 컴포넌트에서 사용 불가능한 생명주기 메소드의 한계점으로 인해 상태 관리 및 렌더링 이후 시점 컨트롤 등 다양한 문제를 해결하기 위해 만든 함수 집합을 의미

그중 useState는 가장 기본적인 hook이며, 함수 컴포넌트에서도 상태를 관리할 수 있게 해준다.

그럼 useEffect는 뭐지?

컴포넌트가 렌더링 된 이후에 특정 작업을 수행할 필요가 있다면 클래스형 컴포넌트에서는 componentDidMount 혹은 componentDidUpdate 메소드를 이용하면 된다.

하지만, 함수형 컴포넌트에서는 생명주기 API 사용이 불가능

그렇기에 함수형 컴포넌트에서도 렌더링 된 이후 시점에 수행 할 내용이 필요한 경우 사용할 수 있는 기능을 hooks로 제공하고 있고 useEffect이다.

const {useEffect} = React;

function MessagePrinter({message}) {
    console.log('렌더링...');

    useEffect(() => {
        console.log('렌더링 이후 동작...');
        console.log(message);
    });

    return (
        <h1>{console.log('렌더링 시 출력')}{message}</h1> 
    );
    // console.log('렌더링 이후 동작...');
}

const message = "안녕하세요";

ReactDOM.createRoot(document.getElementById('root')).render(<MessagePrinter message = {message}/>);

render 메소드 이후 즉, 마운트 업데이트 이후에서는 아무런 동작도 할 수 없다.

→ 주석으로 작성된 console.log 작동 불가능

렌더링 이후 처리를 하기 위해서는 render 메소드 이전에 useEffect를 사용하여 렌더링 이후에 실행 될 동작들을 작성해야 한다.

<aside> 📌 주의 사항 하단에 message라는 변수로 선언 된 값은 전역변수 이며 함수 내부에서 해당 변수를 호출해도 문법상 오류는 없음. 하지만, 리액트의 컴포넌트는 순수함수로 구성되어야 하므로 전역 변수 사용은 최대한 지양해야함 → message 전역 변수를 사용하는것 보다 DOM 렌더링 시점에 Props로 던져주며 지역 변수 개념으로 사용해야함

</aside>

Mount 시점에서만 동작하기