[ReactJS로 영화 웹 만들기 ]4.useEffect

이민선(Jasmine)·2022년 12월 13일
1
post-thumbnail

click me 버튼을 클릭하면 call an api를 출력해주는 코드이다.

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;


맨처음 새로고침을 눌렀을 때 (click 횟수가 0) 앱이 렌더링되어 call an api가 출력되었다.
그런데 상상 속의 내가 오피스에 있고 API를 통해 진짜 데이터를 가져왔는데 state가 변화하면, state 변화로 인해 API를 또 call 하게 된다.
state가 바뀌면 리렌더링이 되기 때문이다.
오늘은 리렌더링을 방지하기 위해 useEffect를 사용하는 방법을 공부한다.

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");
  useEffect(() => {
    console.log("CALL THE API..");
  }, []);
  return (
    <div>
      <h1>{counter}</h1>
      <button onClick={onClick}>click me</button>
    </div>
  );
}

export default App;

이처럼 실행하고 싶은 함수를 useEffect의 첫번째 인자로 넣으면 state가 바뀌어도 다시 실행되지 않는다.


17번 광클하더라도 CALL THE API는 한 번만 호출된다.

그렇다면 useEffect의 두번째 인자로 전달되는 저 배열의 정체는 무엇일꽈??
Dependencies라고 부른다. reactJS가 감시해야하는 것이다.
이제 조건부 Effect를 배워보자.

import { useState, useEffect } 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);
  };
  console.log("I run all the time");
  useEffect(() => {
    console.log("CALL THE API..");
  }, []);
  useEffect(() => {
    if (keyword !== "" && keyword.length > 5) {
      console.log("SEARCH FOR", keyword);
    }
  }, [keyword]);
  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;

Search for 'keyword'를 출력해주는 함수에 useEffect를 사용한다고 해보자.
이때 두번째 인자로 keyword가 들어가게 된다면, 이는 keyword말고 다른 state이 변화하면 리렌더링 안돼! 라고 하는 것이다. 예를 들어 버튼을 클릭하면 keyword말고 다른 state이 변화하는 것이므로 Search for 'keyword가 출력되지 않는다.'

맨 처음 새로고침할 때는 Search for ""가 출력되고, click me 버튼을 22번이나 눌러 state이 계속 변해도 search for ""은 더 이상 출력되지 않는다.

하지만 글자는 keyword는 출력이 되지롱!

만약 5글자를 초과하여 입력해야만 search for keyword를 출력하고 싶다면

import { useState, useEffect } 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);
  };
  console.log("I run all the time");
  useEffect(() => {
    console.log("CALL THE API..");
  }, []);
  useEffect(() => {
    if (keyword !== "" && keyword.length > 5) {
      console.log("SEARCH FOR", keyword);
    }
  }, [keyword]);

  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;


if 조건문을 걸었더니
12345까지는 search for 키워드가 출력이 안되다가
123456부터 출력이 되기 시작한다.

정리하자면,

  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' or 'counter' changes");
  }, [keyword, counter]);

첫번째: 한 번만 실행되고 더 이상 실행되지 않음. 빈 배열이므로.
두번째: keyword가 변화할 때만 실행됨.
세번째: counter가 변화할 때만 실행됨.
네번째: keyword 또는 counter가 변화할 때만 실행됨.

profile
기록에 진심인 개발자 🌿

0개의 댓글