(React)useEffect에 대한 이해

아직 많이 부족하지만

리액트를 배운지 얼마 안됐을때

처음에 useEffect를 접했었다.

 

당시에 나는 onClilck이벤트 onChange이벤트도

겨우해보던 중이어서

처음 랜더링(mount)이 되었을때 즉 화면이 처음 나왔을때

특별한 이벤트 없이 실행해주기위한

그저 그런 Reacthook이라고 생각했다.

심지어 '사용할 필요가 있을까' 싶기도 했다.

 

하지만 프로젝트를 진행하면 진행할 수록

쓰임새가 많고 다양하게 활용이 가능한

자연스럽게 접하게되는 훅이었다.

 

그러다보니 어찌저찌 사용하고는 있지만

그보다는 이해를 하고싶은 생각이들어서

정리를 하게 되었다.

 

먼저 형태를 알아보자면 

 

useEffect(()=>{
console.log(1)
})

이러한 예를 들어 볼 수 있겠다

이로 인해 컴포넌트가 랜더링되면

개발자 콘솔창에 1이 찍힐것이다.

 

그런데 문제는 리렌더링 조건에 따라

컴포넌트가 리렌더링 될 때

useEffect또한 같이 실행되는 것이다.

 

때문에 useEffect안 함수가

원하지 않을때 콜백되는 일이

생기는 경우가 있다.

 

그래서 케이스에 따라 쓰는 useEffect의

형태가 있는데

useEffect(()=>{
console.log(1)
},[])

//[]와 같이 마지막부분에 두번째 매게변수로 들어가는 부분을
//"의존성 배열"이라고 한다.

위와 같이 의존성배열을 넣어주고 그 배열이 빈 배열인 경우에는

첫 랜더링시에만 발생하게끔 작동한다.

그렇다면 저 의존성배열에 값을 넣어준다면 무언가

다르게 해당 useEffect를 작동할 수 있다는 생각을 할 수 있을 것이다.

import [useState,useEffect] from 'react'

function App(){
const [number, setNumber] = useState(0)
const [anotherNumber, setAnotherNumber] = useState(100)

useEffect(()=>{
console.log(1)
},[anotherNumber])

return(
<>
    <div>
        <span>{number}</span>
        <button onClick(()=>{setNumber(number+1)})>
        1씩 더해보자
        </button>
    </div>
    	
    <div>
        <span>{anotherNumber}</span>
        <button onClick(()=>{setAnotherNumber(anotherNumber-1)})>
        1씩 빼보자
        </button>
    </div>
</>
)
}

이렇게 작성해주면

useEffect는 anotherNumber가 업데이트시에만

다시 작동할 것이다.

 

이런 식으로 의존성 배열을 통해

특정 값이 업데이트 될 때만 발생하게끔

실행 조건을 걸어줄 수도 있다.

 

또한

컴포넌트가 언마운트 즉 사라질 경우에 실행되게끔 할 수 있는데

 

import [useState,useEffect] from 'react'

function App(){
const [number, setNumber] = useState(0)
const [anotherNumber, setAnotherNumber] = useState(100)

useEffect(()=>{
	console.log(1)
	
    //return 부분을 추가하여 언마운트시 발생함수 추가
    return()=>{
    console.log(50)
    }
    
},[anotherNumber])

return(
<>
    <div>
        <span>{number}</span>
        <button onClick(()=>{setNumber(number+1)})>
        1씩 더해보자
        </button>
    </div>
    	
    <div>
        <span>{anotherNumber}</span>
        <button onClick(()=>{setAnotherNumber(anotherNumber-1)})>
        1씩 빼보자
        </button>
    </div>
</>
)
}

위와같이 useEffect함수에 return 함수를 넣어주면다른 상황에서는 실행되지 않다가컴포넌트가 unmount 즉 없어질때콘솔에 50이 찍힐 것이다.

 

그리고 위에 형태와는 별개로useEffect는 랜더링시 가장 마지막에발생한다.

 

이 특징 또한 알아둔다면유용하게 지식을 사용할 수 있을것이다.  

 

위와 같이 가장 유용하게 쓰이는useEffect에 사용방식을 알아보았는데잘못 사용할 경우 오류가 발생하기도하고원하는대로 실행이 안되기때문에쓰면 쓸수록 이해가 필요한 훅이라고 생각한다.

 

필요하다면 나중에 더 자세히 알아보도록 해야겠다.