ReactJS (9) useEffect

ReactJS는 state가 변경될 때마다 component 안에 있는 모든 코드가 재실행된다

하지만 API를 호출하거나 중요한 작업을 할 때에는 component가 불려 올 때 한 번만 실행되는 걸 원하는 경우도 생긴다

그때 바로 useEffect를 사용한다

 

useEffect는 component가 처음 렌더링 될때만 실행되게 한다

그럼 사용방법을 알아보자

 

예)

 

Click me button을 누를때마다 setValue를 통해 value 값을 1씩 더해주었다

console에 보면 component을 렌더링해 모든 코드들이 한 번씩 실행되는 걸 볼 수 있다

 

하지만 useEffect를 사용하면 state가 변경되어도 재실행이 되지 않아야 되는데 button을 몇 번 클릭해 보고 console을 다시 확인해 보자

 

예)

이렇게 useEffect 안에 있는 함수는 state가 바뀌어도 재실행되지 않는 걸 볼 수 있고

console.log("i run many times") 같은 경우에는 stater가 바뀔 때마다 렌더링 되는 걸 확인할 수 있다

 

하지만 useEffect가 여기서 끝나는 게 아닌 특정 상황에서만 렌더링 시키게 할 수도 있다

 

예)

이런 식으로 useEffect array 안에 value를 넣어준 걸 확인할 수 있다

이렇게 하면 value가 바뀔 때마다 이 useEffect를 실행시킨다

button을 클릭할 때마다 value state가 바뀌는데

그렇다면 console에는 뭐라고 나올까?

 

예)

이렇게 value state가 바뀔 때마다 useEffect가 실행되는 걸 볼 수 있다