Next.js 버그 - useEffect

React의 life-cycle에서 알 수 있듯
useEffect는 UI 렌더링 후에 실행된다.

렌더링의 리턴 값과 상관없이 실행되게 되어있다.
라고 알고 있었다.

그래서 useEffect들을 모두 아래 return 전에 배치해 놓고는 했다. 결국 마지막 실행되는 게 맞다고 생각해서.

하지만 Next.js 개발 중 특이한 현상을 목격했다.
클라이언트에서만 해당 컴포넌트를 실행하고 싶어
아래 코드를 추가했다.

1) useEffect 다음에 return null

const [isClient, setIsClient] = useState(false);

useEffect(() => {
	if (typeof window !== 'undefined') {
		setIsClient(true);
	}
}, []);

if (!isClient) return null;

2) return null 이후 useEffect

const [isClient, setIsClient] = useState(false);

if (!isClient) return null;

useEffect(() => {
	if (typeof window !== 'undefined') {
		setIsClient(true);
	}
}, []);

이론상으로는 2 행위의 결과 값이 같아야 하는 데
실제로는 다르게 나타났다.

서버에서 이 컴포넌트를 그리지 않기 위해 넣은 로직이었는데,
1처럼 넣으면 클라이언트에서 이 컴포넌트를 렌더링 했고

2번 처럼 코드를 작성한 경우
아예 이 컴포넌트를 렌더링 하지 않았다.

1번은 서버에서 이 컴포넌트 자체를 빼버린 느낌. 그래서 하이드레이션에서도 빠지고 아무 반응이 없는 듯 했다.

아무리 찾아봐도 같아야 하는데 버그인가...

이유를 알게 되는 날 다시 찾아 와야겠다...