2023-01-02 월요일

✏️ 무엇을 배웠나

1. useEffect

프로젝트에서 몇 번 사용했던 useEffect에 관해 스스로 정리를 위해 기록해본다.

useEffect는 2개의 인자를 가질 수 있다.

• 함수
• 의존성 배열 (선택)

useEffect(()=>{
	//함수
}, [의존성배열] )

공식 문서에 따르면 useEffect 안에 있는 함수는 '화면 렌더링이 끝난 후에' 실행된다고 나와있다. 의존성배열이 없을 때는 기본적인 설명처럼 화면 렌더링이 끝난 후에만 실행되며, 의존성배열을 추가하면 의존성배열의 자리에 들어가는 값이 바뀔 때마다 useEffect 안에 있는 함수가 실행된다. (+ 의존성배열 자리를 [] 빈칸으로 두면 화면 렌더링이 끝난 후에만 실행되도록 강제 설정할 수 있다.)

술렁술렁 프로젝트를 하면서 이런 경우에 사용했다.

useEffect(() => {
	dispatch(__getArticle());
}, [dispatch]);

메인페이지 컴포넌트에 들어 있는 useEffect 코드다.
유저가 메인페이지에 입장했을 때, 곧바로 게시글을 보여줘야 하는 상황이어서
useEffect를 통해 자동으로 게시글을 요청하는 함수를 dispatch하게 했다.

useEffect(() => {
	window.scrollTo(0, 0);
}, [pathname]);

페이지를 이동할 때 자동으로 페이지의 최상단으로 이동하는 함수에 쓰인 코드다. 여기에서도 useEffect를 사용해 pathname(페이지의 경로)가 바뀔 때마다 자동으로 최상단에 스크롤하도록 하도록 했다.

화면 렌더링이 완료된 직후에 실행되는 것이 useEffect인데 더 정확히는 mount, unmount가 되었을 때 실행되는 것이다. 이번 프로젝트에서는 unmount시 즉 클린업의 경우는 다루지 않았었다.