React 오프라인 7강 - useEffect

---

import하는 방법에 대해

import { useEffect } from 'react';
import './App.css';

funtion App() {
  useEffect(()=>{
    
  }, []);
  
  return <div>Hello World</div>;
}

export default App;

1. useEffect의 import 방식이 사뭇 다르다.
2. export default App;의 의미는 해당 함수를 외부로 노출시키겠다는 뜻이다.
3. 따라서 이를 외부에서 사용할 때는 import App from './App';으로 import하게 된다.
4. 이러한 구문이 없으면 import를 하지 못한다.

let num = 10; // 변수도 가능!
export { num };

5. default는 하나만 할 수 있기 때문에 export를 할 때 중괄호로 감싸서 import를 할 수 있게끔 한다.
6. 따라서 import { num } from './App';이 될 것이다.

useEffect가 실행하는 시점

1. App() 함수가 최초에 실행(mount)될 때 실행되는 함수이다.

useEffect(effect: React.EffectCallback, deps?:React.DependencyList) : void import useEffect

2. useEffect는 이러한 구조를 가지고 있다.
3. 콜백 함수와 의존성 리스트를 프로퍼티로 가지고 있다.

import { useEffect } from 'react';
import './App.css';

funtion App() {
  
  const [data, setData] = useState(0);
  
  useEffect(()=>{ // 콜백 함수 넣기
    console.log('useEffect 실행됨');
  }, []);
  
  return <div>
  	<h1>데이터 : {data}</h1>
  </div>;
}

export default App;

4. 이렇게 콘솔을 확인해보면 useEffect가 실행되었다는 것을 알 수 있다.

import { useEffect } from 'react';
import './App.css';

funtion App() {
  
  const [data, setData] = useState(0);
  
  useEffect(()=>{ // 콜백 함수 넣기
    console.log('useEffect 실행됨');
  }, []);
  
  return <div>
  	<h1>데이터 : {data}</h1>
    <button onClick={()=>{
        setData(data + 1);
      }}>더하기</button>
  </div>;
}

export default App;

5. 버튼을 만들어서 data를 1씩 더하는 함수를 넣어주고 실행해보면 숫자가 올라가는 것을 볼 수 있다.
6. 따라서 상태 변수가 변경될 때 useEffect가 실행되는 것을 알 수 있다.

import { useEffect } from 'react';
import './App.css';

funtion App() {
  
  const [data, setData] = useState(0);
  
  const download = () => {
    let downloadData = 5; // 가정
    setData(downloadData);
  }
  
  useEffect(()=>{ // 콜백 함수 넣기
    console.log('useEffect 실행됨');
    download();
  }, []);
  
  return <div>
  	<h1>데이터 : {data}</h1>
    <button onClick={()=>{
        setData(data + 1);
      }}>더하기</button>
  </div>;
}

export default App;

7. 그러면 useEffect에서 상태 변수값을 바꿀 수 있는 함수를 만들어서 호출 시켜보자.
8. 그러면 최초에는 데이터가 5가 될 것이고, 더하기 버튼을 누르면 6에서 다시 5로 되돌아오게 된다.
9. useEffect는 App.js가 실행될 때 같이 실행되기 때문이다.
10. 따라서 이를 한 번만 실행하고 싶은데, useEffect는 상태 변수를 의존성 리스트에 넣어주면 상태 변수가 변경될 때마다 실행할 수 있도록 해준다.

import { useEffect } from 'react';
import './App.css';

funtion App() {
  
  const [data, setData] = useState(0);
  
  const download = () => {
    let downloadData = 5; // 가정
    setData(downloadData);
  }
  
  useEffect(()=>{ // 콜백 함수 넣기
    console.log('useEffect 실행됨');
    download();
  }, []); // 최초에 한 번만 실행하고 더 이상 실행하지 않음
  
  return <div>
  	<h1>데이터 : {data}</h1>
    <button onClick={()=>{
        setData(data + 1);
      }}>더하기</button>
  </div>;
}

export default App;

11. 따라서 해당 리스트를 비워두면 어느에도 의존하지 않기 때문에 최초에 한 번만 실행하고 다음부터는 실행하지 않는다.
12. 반대로 리스트에서 data를 넣으면, data가 변경될 때마다 실행될 것이다.

따라서 useEffect의 생명주기는

1. 페이지(App.js)를 새로 불러올 때 실행된다.
2. 이때는 상태 변수가 useEffect의 의존성에 들어가지 않을 때는 무조건 실행하게 된다.
3. 하지만 상태 변수가 useEffect의 의존성 리스트에 들어가게 되면 해당 상태 변수의 데이터가 변경될 때마다 useEffect를 실행하게 된다.
4. 이렇게 되면서 상태 변수의 의존성 관리까지 할 수 있는 것이다.