ReactJS / useEffect(유즈 이펙트라 쓰고 버터 플라이 이펙트라 읽는다.)

우리는 예상치 못한 현실에 자주 부딛히곤 한다.

이거티비하고 뭘 실행할려고 하다 보면 저쩔티비 하면서 이상한 결과가 나오는 마법을 자주본다.

 

코딩도 뭐 다르진 않다.

React 같은 경우에는 내가 만든 하나의 도구(도라에몽 도구랑 비슷한거임)를 개개별로 만들수 있는데,

이 도구를 활용해서 뭔가를 실행하면 전체 도구함이 리프레쉬 되면서 내용이 바뀌게 된다.

 

하지만 이건 좀 불합리하다고 느껴진다.

 

100개의 도구가 있는데 1개의 도구만 바꾸기 위해 100개를 전부다 새로 업데이트 할 순 없지 않은가.

그때 사용하는게 React의 useEffect다.

---

useEffect는 

import useEffect;

console.log("rere");

useEffect( () => {A} , [B] );

와 같은 형식으로 사용할 수 있다.

 

첫번째 줄은 useEffect를 내가 구현하고자 하는 앱에 불러오는거다.

임-포-트

 

두번째 줄은 "rere"를 콘솔에 찍어준다.

 

셋째줄은 본격적으로 useEffect를 사용하는 것이다.

A에는 useEffect에 실행되는 함수가 들어온다.

 

예를들어 console.log("1"); 과 같은 함수를 넣는다.

 

B에는 변화를 감지할 녀석을 넣는건데, 내가 지정한 어떤 녀석이 바뀔때만 이걸 실행해라! 라는 뜻이다.

기본 값으로 [] 이렇게 비워두면 앱이 실행될때 제일 처음에만 실행되고 그 이후에는 실행되지 않는다.

---

useEffect 없는 두번째 줄은 페이지에 뭔가가 변화가 있을때마다 계속해서 콘솔에 "rere"라고 찍히게 된다.

하지만 useEffect를 사용한 console.log("1"); 은 내가 지정한 B라는 것이 감지, 혹은 변경되었을때만 실행된다는 이야기다.

 

 

2021.11.16 +

 

얼마전 작성한 CORS 내용에서 useEffect란 함수를 실행한다! 라는 해석을 한 기억이 있다.

이래서 사람은 배워야한다.

전혀 그 뜻이 아니였다.