[React] 2. useEffect

1. useEffect

- state가 변할때마다 react는 모든 컴포넌트를 자동으로 re-render한다.

- 이때 useEffect를 사용하면 한번만 실행될 컴포넌트들을 따로 지정할 수 있다.

- API 불러오기 등 

- useEffect는 두개의 인자를 받는데 처음받는 인자가 바로 한번만 render될 컴포넌트이다. 

import { useState, useEffect } from "react";

function App() {
  const [counter, setValue] = useState(0);
  const onClick = () => setValue((prev) => prev + 1);
  console.log("I run all the time");
  const iRunOnlyOnes = () => {
    console.log(" I run only once.")
  }
  useEffect(iRunOnlyOnes, []); 
  
  return (
    <div>
      <h1 className={styles.title}>{counter}</h1>
      <Button text={"continue"}/>
      <button className={Mybtn.btn} onClick={onClick}>click me</button>
    </div>
  );
}

 

2. useEffect의 두번째 인자

- [dependency1, dependency2 ...]

- dependency(지켜보려는것)라고 부른다.

- array이므로 여러개의 dependency를 넣어줄 수 있다.  

- useEffect를 사용하면 특정 state가 바뀔때만 컴포넌트가 re-render되게 할 수 있다.

- useEffect(component, [state1, state2 ... ])

- react는 state가 변화될 때 모든 component를 다시 render한다.

- useEffect를 통해 언제 특정 코드를 실행시킬지 정할 수 있다. 

import { useState, useEffect } from "react";

function App() {
  const [counter, setValue] = useState(0);
  const [keyword, setKeyword] = useState("");

  const onChange = (event) => setKeyword(event.target.value);
  const onClick = () => setValue((prev) => prev + 1);

  useEffect(() => {console.log("I run only once");}, []); // 한번만 실행
  useEffect(() => {console.log("counter is up");}, [counter]); // counter가 바뀔때 실행
  useEffect(() => {
    if (keyword != "" && keyword.length > 5){ // keyword가 6자 이상으로 바뀔때 실행
      console.log("searching movies");
    }  
  } ,[keyword])
  
  return (
    <div>
      <h1 className={styles.title}>{counter}</h1>
      <input  
        value={keyword}
        placeholder="search movies"
        type="text"
        onChange={onChange}
      />
      <button onClick={onClick}>click me</button>
    </div>
  );
}

export default App;

 

3.  Cleanup

- 컴포넌트가 생성될 때 뿐만아니라 파괴될때도 특정 코드를 실행시키고 싶다. 

- useEffect의  effect에서 다름 함수를 return하면 된다. 

function Hello(){
    useEffect (() => {
      console.log("created :)"); // 생성될 때 실행 
      return () => console.log("destroyed :)"); // 파괴될 때 실행 
    }, []);
    return <h1>Hello</h1>;
  }