[ReactJS로 영화 웹 서비스 만들기] Effects

• reactjs는 state가 바뀔 때마다 해당 component 전체가 다시 렌더링 됨

  • 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>
      );
    }

    console.log("call an api")는 한번만 실행하고 싶어도 state 변화할 때마다 다시 실행
• component 내의 특정 부분(코드)을 state 변화할 때마다 렌더링되지 않게하기 -> useEffect 함수 사용

  • import { useState, useEffect } from "react";
    
    function App() {
      const [counter, setValue] = useState(0);
      const onClick = () => setValue((prev) => prev + 1);
      // console.log("call an api");
      console.log("i run all the time");
      useEffect(() => {
        console.log("i run only once");
      }, []);
      return (
        <div>
          <h1>{counter}</h1>
          <button onClick={onClick}>click me</button>
        </div>
      );
    }
    export default App;

    console.log("i run only once")는 state가 바뀌어도 다시 렌더링 되지 않음 (최초 한번만 실행)
  •  
  • 첫 번째 인자(함수)에 선택적으로 렌더링 하고 싶은 코드 삽입

  • import { useState, useEffect } from "react";
    
    function App() {
      const [counter, setValue] = useState(0);
      const [keyword, setKeyword] = useState("");
      const onClick = () => setValue((prev) => prev + 1);
      console.log("I run all the time");
      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' or 'counter' changes");
      }, [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;

     
  • useEffect 두번째 인자(리스트)로 어떤 state가 변화하는가에 따라 다시 렌더링할지 여부 설정 가능
• Cleanup function: component가 삭제되었을때 실행되는 함수 (useEffect 첫번째 인자 return 이후 삽입)

  • import { useState, useEffect } from "react";
    
    function Hello() {
      // useEffect(function () {
      //   console.log("hi :)");
      //   return function () {
      //     console.log("bye :(");
      //   };
      // }, []);
      // Hello 컴포넌트 생성 시 hi, 삭제 시 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>
      );
    }

    component가 삭제될 때에도 원하는 코드 실행 가능