리액트 useEffect의 사용

ReactJS의 가장 멋진 부분은 component를 refresh한다는 것이다. 게다가 변화가 일어날때만 refresh를 해준다.
우리가 직접 refresh해줄필요가 없는 것이다.

그치만 우리가 component안에서 단 한번만 사용하고 싶은 코드가 있을수도있고, 혹은 component안 내가 원하는 특정데이터가 변화할때 실행하고 싶은 코드가 있을 수 있다.

컴포넌트 상태가 변경되면 특정 동작을 실행시키거나, api fetch 할때 코드를 어떻게 짤까요??

대부분 망설임없이 useEffect를 사용하라고한다.

📌 useEffect를 사용해야할 때 , 상황!

useEffect 는 state의 변화나, 어떤일이 일어나도 코드를 단 한번 실행되도록 할때 매우 유용함.

이제부터 ReactJS가 우리에게 언제 코드를 실행시킬지 결정하는 tool에 대해 알아보자

두가지 인자를 원하는데
첫번째 파라미터는 우리가 실행하고자하는 코드,
두번째 파라미터는 reactJS에서 지켜보고자하는 dependencies이다.

useEffect(() => {... }, [ ]);

이렇게하면 초기 렌더링 한번만 실행함. [ ] 안에 지켜볼부분이 없으니 한번만 실행되는것!

useEffect(() => {... }, [keyword]);

keyword가 변화할때 코드를 실행하도록 reactJS에 알려주는것

📌 Cleanup 함수