React.useEffect

1. React.useEffect의 정의

 : React.useEffect를 한 문장으로 정의하자면 "컴포넌트와 외부 시스템을 동기화"해주는 리엑트 훅이다. 여기서 이런 의문이 생길 수 있다. "외부 시스템"이 무엇인가? , "동기화"를 해준다는 것은 무엇인가? 그래서 쳅터 2에서는 이 2가지 키워드에 대해서 살펴보려고 한다.

 

2. synchronize(동기화) external system(외부 시스템)

• synchronize(동기화) : 동기화의 사전적인 의미는 "서로가 알고 있는 정보들을 일치시킨다는 것"이다. 이 의미를 컴퓨터 입장에서 생각해보면 "서로 다른 2개의 시스템에 데이터를 일치시킨다"는 의미로 해석할 수 있을 것이다. 그리고 여기서 서로 다른 2개의 시스템은 외부 시스템과 , 컴포넌트가 될 것이다.
• external system(외부 시스템) : 외부 시스템을 리엑트 관점에서 살펴본다면 크게 2가지 예시들이 있을 것 같다. 첫번째는 외부 서버 (backend server , chat server)이다. 세번째는 외부 지도 , 두번째는 외부 비디오와 같은 리엑트 상태에 기반하지 않은 컴포넌트이다. 이 2가지 예시들 처럼 외부 시스템은 "리엑트라는 시스템 밖에 있는 시스템"을 의미한다.

3. React.useEffect 사용 방법

useEffect(setup , dependencies?)

// setup : useEffect에 effect와 관련된 로직이 들어가는 부분이다. 
// 실제로 사용할때는 초기 마운트 , 업데이트 , 언마운트가 될때 실행되는 콜백함수라고 이해해도 괜찮다.

//dependencies : useEffect에서 업데이트를 하는 트리거 역할을 한다. 
// 즉 언제 업데이트를 시킬 것인지를 판가름하는 의존성 배열이라고 생각하면 된다.
// 생김새는 배열로 이루어져 있으며 빈 배열일 경우에는 초기 마운트에서만 , 
// 배열안에 요소가 있으면 초기 렌더링과 업데이트 시에 트리거를 의미한다.

//clean up function
//clean up function은 언마운트 시에 작동하는 함수로 생김새는 다음과 같다.
useEffect(() => {

	//clean up function logic...
	return () => {
    	console.log(1)
    }
} , [])

 

참고 자료

https://react.dev/reference/react/useEffect

useEffect – React