`React` - UseEffect의 간단한 사용법

useEffect

 

useEffect는 React에서 비동기 작업, 구독, 타이머 설정 등 다양한 작업을 처리하는 강력한 도구이며

React에서 컴포넌트의 생명주기 동안 발생하는 효과를 처리하기 위해 사용하는 Hook 임

 

Hook을 사용하면 컴포넌트가 렌더링될 때 특정 작업을 수행하거나

특정 상태가 변경될 때 작업을 수행하도록 설정할 수 있음

 

 

 

기본 사용법 

 

useEffect(() => {
  // 실행할 코드
}, [dependencies]);

 

 

• 첫 번째 매개변수는 실행할 함수
• 두 번째 매개변수는 의존성 배열
  • 이 배열에 값이 변경될 때만 함수가 실행됨 빈 배열 []을 전달하면 컴포넌트가
    처음 마운트될 때만 실행되고 그 이후에는 실행되지 않음

의존성 배열이 없는 경우

useEffect(() => {
  // 컴포넌트가 렌더링될 때마다 실행
});

 

 

• 의존성 배열을 생략하면 컴포넌트가 렌더링될 때마다 useEffect가 실행됨

 

활용법

• useEffect는 컴포넌트가 마운트될 때 API 호출을 통해 데이터를 가져오는 데 자주 사용함
• 웹소켓, 이벤트 리스너 관련 작업을 처리함
• 외부 라이브러리로 DOM을 조작해야 하는 경우 useEffect 내에서 이 작업을 수행할 수 있음