[영화 웹 서비스 만들기] #8. Effects

~6.4까지의 강의

 

App.js

import { useState } from "react";


function App() {
  const [counter, setValue] = useState(0);
  const onClick = () => setValue((prev) => prev + 1);
  console.log("call an api");
  return (
    <div>
      <h1>{counter}</h1>
      <button onClick={onClick}>click me</button>
    </div>
  );
}

export default App;

 

딱히 달라진 건 없지만, state 변경시, 모든 코드가 다시 실행된다.

console로 확인가능

계속해서 호출되고 있는 모습

---

위에서 state 변경 시 모든 코드가 다시 실행되는 것을 확인할 수 있었다. 

그런데 가끔은 우리가 특정 코드의 실행을 제한하고 싶다.

즉, component가 처음 render되고 다시는 실행하지 않게 하는 것이다.

 

How? -> React가 개발해 둔 것은 useEffect를 사용하는 것이다.

useEffect?

useEffect는 두개의 argument를 가지는 함수이다.

첫 번째 argument는 우리가 딱 한번만 실행하고 싶은 것이다. (두 번째는 나중에 보도록 하자.)

 

App.js

import { useEffect, useState } from "react";


function App() {
  const [counter, setValue] = useState(0);
  const onClick = () => setValue((prev) => prev + 1);
  console.log("i run all the time");
  useEffect(() => {
    console.log("CALL THE API....");
  }, []);
  return (
    <div>
      <h1>{counter}</h1>
      <button onClick={onClick}>click me</button>
    </div>
  );
}

export default App;

항상 실행될 코드를 "i run all the time"이라고 하고,

그 다음에는 useEffect component를 사용하자.

이렇게 하면 우리 코드가 딱 한번만 실행될 수 있도록 보호해준다.

즉, state가 변화하든 무슨 일이 일어나든 코드가 단 한번만 실행될 거라고 확신할 수 있다.

 

useEffect의 효과

---

 

 

앞서 배운 useEffect 안에 있는 console.log 는 딱 한 번만 실행이 되었다.

특정 부분만 변화했을 때 원하는 코드들을 실행할 수 있는 방법은 무엇일까?

[] 에 무엇을 써주지 않으면 딱 한 번만 실행된다.

즉, [] 안에 원하는 값을 써주면, 그 값이 변화 될 때만 작동한다.

그래서 아무것도 써주지 않으면 코드가 한 번만 실행되는 것이다.

 

App.js

import { useEffect, useState } from "react";


function App() {
  const [counter, setValue] = useState(0);
  const [keyword, setKeyword] = useState("");
  const onClick = () => setValue((prev) => prev + 1);
  const onChange = (event) => setKeyword(event.target.value);
  useEffect(() => {
    console.log("I run only once.");
  }, []);
  useEffect(() => {
    console.log("I run when 'keyword' changes.");
  }, [keyword]);
  useEffect(() => {
    console.log("I run when 'counter' changes.");
  }, [counter]);
  useEffect(() => {
    console.log("I run when keyword & counter change");
  }, [keyword, counter]);
  return (
    <div>
      <input
        value={keyword}
        onChange={onChange}
        type="text"
        placeholder="Search here..."
      />
      <h1>{counter}</h1>
      <button onClick={onClick}>click me</button>
    </div>
  );
}

export default App;

 

(좌) 처음 (우-1) 검색 (우-2) 버튼 클릭

여기서 'keyword & counter'라고 해서 둘 다 동시에 변화라고 생각하지 말자!

동시에 변화하는 걸 인식하는 건 불가능 (자세한 건 나중에)

 

useEffect에 if문 넣어서 조건 만족할 수도 있다.

 

---

전체적인 복습

React component는 새로운 데이터가 들어올 때마다 refresh한다. 즉, 변화가 일어날 때 refresh한다.

근데 가끔은 딱 한번만 실행하고 싶거나, 변화할 때만 실행되게 하고 싶을 수가 있다.

-> 그래서 useEffect를 사용한다!

첫 번째는 실행 시킬 것, 두 번재는 dependency React가 지켜보아야 하는 것들이다. 이것들이 변화할 때 React가 코드를 실행시킨다.

 

코드를 언제 실행할 지 선택하는 것은 useEffect이다.

state를 변화시킬 때 component를 재생하는 것이다. 즉, 언제 코드를 실행할지 선택권을 가질 수 있다.

 

여기까지 중요하고 다음 강의는 알아두면 좋은데 그렇게 중요하지는 않은 것들이다.

 

---

Cleanup function (그렇게 많이 쓰는 것은 아님)

 

우리가 할 것은 component가 destroy될 때 실행될 function을 return 하는 것이다.

이렇게 하면 언제 생성되고, 언제 없어졌는지 확인 할 수 있다.

cleanup function

component가 destroy될 때 뭔가 할 수 있도록 해주는 것이다.
return () => 

useEffect는 함수를 받고, dependency가 변화될 때 호출된다. component가 파괴될 때도 함수를 호출하려면 hi가 bye를 return해야 한다.

잘 설명 해주셨음 but, 따라 치기는 귀찮,,,

같은 기능을 하는 서로 다른 코드를 비교해보자.

 

Hello1

function Hello() {
  useEffect(function () {
    console.log("hi :)");
    return function () {
      console.log("bye :(");
    };
  }, []);
  return <h1>Hello</h1>;
}

 

 

 

Hello2

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

(개인적으로 이게 이해하기에는 더 쉬운 것 같음)

 

App.js

import { useEffect, useState } from "react";


function Hello() {
  useEffect(function () {
    console.log("hi :)");
    return function () {
      console.log("bye :(");
    };
  }, []);
  /*useEffect(() => {
    console.log("hi :)");
    return () => console.log("bye :(");
  }, []);*/
  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>
  );
}

export default App;

버튼 이런건 다루지 않겠음

자바스크립트 쓸 때 {} 잊지 말자!