useEffect

1. useEffect

• React는 props,state를 재료로 jsx문법을 통해 화면에 ui를 그려내는 라이브러리이다.
  ui를 그려낼시 props,state 외에도 데이터를 받아오거나 DOM에 직접 접근하여 기능을 구현해야 하는 경우가 있는데, 이럴 경우를 side effect가 있다라고 한다.
  
  
  - side effect의 단점
  1. alert창과 같이 동작이 끝나지 않으면 다음 화면이 랜더링 되지않는 block rendering현상이 있다
  2. state가 변경될때마다 동작이 실행되는 always trigger 현상이 있다. 예로는 화면이 바뀔때마다 큰 용량의 같은 데이터를 받어오게 되면 서버과부화가 발생하게 된다.
  
  

         ** mount : 컴포넌트가 최소로 화면에 그려졌을때**

  useEffect는 최소 mount 시에는 무조건 한번은 실행이 된다.

  
  

- side effect의 해결법

1. block rendering 해결법

useEffect(()=> {
console.log("effect!")})

-> 컴포넌트가 랜더된 후에 실행이 되기때문에
랜더링을 막지 않는다.

2. always trigger 해결법

useEffect(()=> {
console.log("Wow!")}, [a])

-> 배열안의 값이 변할때 함수를 실행한다
-> 배열 값이 비어있으면 최초 1회 mount 후에 절대로 실행 되지 않는다
<api받아오기, nav바와 같이 한번 받아 오면 값이 변하지 않는 경우에 사용>
  

clear Effect

 useEffect(()=> {
    const interval = setInterval(() => {
        console.log("interval!");
}, 500);
return () => {
clearInterval(interval);
};       ->unmount 시에 실행된다
}, []);  ->mount시에 실행된다