useEffect

create-react-app

한 파일당 한 컴포넌트를 가지고 있고, index.js에서 그 컴포넌트를 import

style 적용 시 .css 바로 import하지 않고,
import styles from "./Button.modules.css"

• create-react-app이 css코드를 javascript 오브젝트로 변환시켜줌
• javascript 오브젝트는 btn을 안에 갖고 있음
• create-react-app이 클래스를 랜덤으로 만들어줌

---

useEffect

• 두 개의 argument를 가지는 function

• argument1 {} : 실행하려는 코드

• argument2 [] : dependency(지켜보려는 것) -> 해당 리스트의 값이 변화할 때만 실행된다.

• 몇몇 컴포넌트 코드가 다시 실행되는 것은 원하지 않음
  ➡️ 컴포넌트 처음 실행되고 다시 실행되지 않도록 하기 위한 방법

• useEffect(() => {}, []) : 함수 형태 & 리스트 형태

---

✏️ 코드의 특정 부분만이 변화했을 때 해당 코드들을 실행(re-render)할 수 있는 방법???

useEffect(() => { console.log("SEARCH FOR", keyword); }, [keyword])

'keyword'가 변화할 때 코드를 실행할 거라고 react.js에게 알림

useEffect(() => { console.log("CALL THE API"); }, []);

리스트 비어있으면 한 번만 실행

중괄호 안에 조건 넣어서 해당 조건에만 실행될 수 있게도 조절 가능

useEffect(() => {
    console.log("I run when 'keyword' & 'counter' changes.");
  }, [keyword, counter]);

--> 대괄호 안에 여러 argument 있을 수 있음

<h>

Cleanup

• react.js는 component가 destroy될 때도 코드를 실행할 수 있다
• functions 하나 만들어서(Hello), 그 안에서 create와 destroy component 만들고, create 컴포넌트가 destroy될 때 return 값 실행으로 destroy 실행하게 함

🖥️ 코드

import { useState, useEffect } from "react";

function Hello() {
  useEffect(() => {
    console.log("created :D");
    return () => console.log("destroyed :(");
  }, []);
  return <h1>Hello</h1>;
}

function App() {
  const [showing, setShowing] = useState(false);
  const onClick = () => setShowing((prev) => !prev);
  return (
    <div>
      {showing ? <Hello /> : null}
      <button onClick={onClick}>{showing ? "Hide" : "Show"}</button>
    </div>
  );
}

---

🖥️ 동일한 동작

function Hello() {
  function byFn() {
    console.log("bye :(");
  }
  const hiFn = () => {
    console.log("created :D");
    return byFn;
  };
  useEffect(hiFn, []);
  return <h1>Hello</h1>;
}

⚠️ index.js에서 App 컴포넌트 import해서 실행 시, <React.StrictMode> 활성화되어있음
➡️ 개발 과정 중 안전을 위해 켜는 기능이며, 배포 시 자동으로 해제
➡️ console.log 여러 번 동작되어서 해당 부분 주석 처리하였음