[Day 21] useEffect에 대해

---

🌈 2022년 6월 12일

---

내일 부트캠프에서 useEffect 강의가 있다. 예습하고 가면 그나마 '읭?' 모먼트를 줄일 수 있기에 코딩애플 리액트 강의를 시청하면서 중요 포인트 정리해본다.

📌 Components' Lifecycle

---

컴포넌트는 아래의 인생 주기를 겪는다

Mount → Update → Unmount

페이지에 장착 → 가끔 update → 필요없으면 제거 됨

✏️ 왜 내가 컴포넌트 lifecycle을 알아야 되지?

중간중간 간섭 가능 = 중간중간 코드 실행 가능

✏️ 어떻게 컴포넌트의 lifecycle에 간섭을 하나요?

lifecycle 중간 중간 실행할 코드를 hook합니다

📌 컴포넌트에 hook하는 방법

---

function About(props) {
  useEffect(() => {
    //mount, update시 여기 코드가 실행 됨
  }
}    

📌 컴포넌트 update하는 방법

---

function About(props) {
  useEffect(() => {
    //mount, update시 여기 코드가 실행 됨
  }
}    
            
let [count, setCount] = useState(0)
  
return (
  <div className="container">
  {count}
	<button onClick={() => { setCount(count+1) }}>버튼</button>

📌 useEffect 특징

---

• useEffect 안에 있는 코드는 html 렌더링 후, 마지막으로 동작한다

• 그러므로 렌더링이 오래 걸릴 것 같은 코드는 useEffect 함수 안에 넣어주면 된다. 왜냐하면 React는 위에서 부터 코드를 순차적으로 실행하고 useEffect를 맨 나중에 실행하기 때문에

• 비유하자면 무거운 짐을 가방 가장 밑 부분에 실는게 효율적인 것과 비슷하다고 보면 된다

📌 useEffect 안에 적는 코드 특징

---

• 어려운 연산
• 서버에서 데이터 가져오는 작업
• 타이머 장착할 때

📌 useEffect 이름 근원

---

리액트에서 Side Effect라는 것이 있는데 함수의 핵심 기능과는 상관없는 부가 기능이라고 한다. useEffect()안에 들어가는 코드는 Side Effect 코드들의 보관함이라고 생각하면 된다.

---

useEffect 수업 노트

//useEffect 기본 형태
useEffect(() => {}, []);

첫 번째 함수는 call back 함수 {}
두 번째 함수는 배열