리액트(React) 컴포넌트의 생명주기, useEffect로 완벽하게 이해하기!
컴포넌트의 생명주기(Lifecycle)는 생성(mount), 업데이트(update), 삭제(unmount)로 구성되며, 각 단계에서 코드 실행을 간섭할 수 있음
useEffect 훅(Hook)을 사용해 컴포넌트의 렌더링 시점을 제어하여, 렌더링 이후에 실행되는 코드를 구현할 수 있음
useEffect의 두 번째 인자로 실행 조건을 설정하여, 특정 state 또는 변수의 변경 시점에만 코드를 실행하도록 제어 가능
컴포넌트 생명주기(Lifecycle) 개념과 활용
리액트(React) 컴포넌트는 생성, 업데이트, 삭제의 생명주기(Lifecycle)를 가지며, 각 단계에서 특정 코드를 실행할 수 있도록 훅(Hook)을 제공한다.
mount: 컴포넌트가 DOM에 처음 생성될 때 실행
update: 컴포넌트가 리렌더링(Re-rendering)될 때 실행
unmount: 컴포넌트가 DOM에서 제거될 때 실행
useEffect 훅(Hook)**을 사용하면 컴포넌트의 생명주기에 간섭하여, 특정 시점에 원하는 코드를 실행할 수 있다. 이를 통해 초기화 작업, 데이터 로딩, 이벤트 리스너 등록 등 다양한 작업을 수행할 수 있다.
useEffect 훅(Hook)의 동작 원리
useEffect 훅(Hook)은 컴포넌트가 렌더링된 후, 즉 DOM이 업데이트된 후에 비동기적으로 코드를 실행한다. 이는 UI 렌더링(UI Rendering) 성능 저하를 방지하기 위한 리액트(React)의 설계 철학이다.
렌더링 시점 제어: useEffect 훅(Hook)을 사용하면 렌더링 이후에 실행되는 코드를 구현하여, 렌더링 시점을 조절할 수 있다.
Side Effect: useEffect 훅(Hook)은 컴포넌트의 핵심 기능 외에 부수적인 작업, 즉 Side Effect를 처리하는 데 사용된다. (예: 데이터 가져오기, 타이머 설정)
실행 시점 조절: useEffect의 두 번째 인자를 통해 실행 시점을 조절할 수 있다.
useEffect 훅(Hook)의 실행 조건 및 Clean-up Function
useEffect 훅(Hook)의 두 번째 인자로 실행 조건을 설정하여, 특정 state 또는 변수의 변경 시점에만 코드를 실행할 수 있다. 이를 통해 불필요한 코드 실행을 방지하고, 성능을 최적화할 수 있다.
의존성 배열(Dependency Array): 두 번째 인자로 빈 배열([])을 전달하면, 컴포넌트가 마운트(Mount)될 때 한 번만 실행된다.
Clean-up Function: useEffect 훅(Hook) 내에서 return 문을 사용하여 Clean-up Function을 정의할 수 있다. 이 함수는 컴포넌트가 언마운트(Unmount)되거나, 의존성 배열의 값이 변경되기 전에 실행된다.
Clean-up Function 활용: Clean-up Function은 메모리 누수(Memory Leak)를 방지하고, 리소스(Resource)를 정리하는 데 사용된다.
