Effect Hook

여기 명언을 보여주는 간단한 애플리케이션이 있습니다. 먼저 이 링크를 열어서 버튼을 클릭할 때마다 브라우저 상단의 타이틀이 어떻게 변경되는지 확인해 보세요.

useEffect는 컴포넌트 내에서 Side effect를 실행할 수 있게 하는 Hook입니다. 이 컴포넌트에서 실행하는 Side effect는 브라우저 API를 이용하여, 타이틀을 변경하는 것입니다. 다음 코드를 확인해 보세요.

API

useEffect(함수)

useEffect의 첫 번째 인자는 함수입니다. 해당 함수 내에서 side effect를 실행하면 됩니다. 이 함수는 다음과 같은 조건에서 실행됩니다.

언제 실행되나요?

• 컴포넌트 생성 후 처음 화면에 렌더링(표시)
• 컴포넌트에 새로운 props가 전달되며 렌더링
• 컴포넌트에 상태(state)가 바뀌며 렌더링

이와 같이 매번 새롭게 컴포넌트가 렌더링 될 때 Effect Hook이 실행됩니다.

Hook을 쓸 때 주의할 점

• 최상위에서만 Hook을 호출합니다.
• React 함수 내에서 Hook을 호출합니다.

공식 문서를 통해 이 내용에 대해 더 공부하세요.