[ReactJS] Effect - ReactJS 로 영화 웹 서비스 만들기 (6)

 

이론의 마지막!!

Effect

 

 

---

 

 

#6. Effects

 

ReactJS 는 우리 대신 자동으로 refresh 해줌
거기다 state 의 변화가 일어날 때만 refresh 함

이 때, 컴포넌트의 모든 코드들이 재실행

 

하지만 component 가 처음 render 될 때만 코드를 실행하고 싶거나

특정 state 가 변할 때만 실행하고 싶은 코드가 있을 수 있음

 

useEffect 를 이용하면 그것이 가능하다.

 

예시)

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

  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;

 

글자 하나하나 입력할 때마다 모든 게 새로 그려진다.

keyword 가 변화할 때만 검색 가능하게 하고 싶다.

 

=> useEffect 를 이용하자.

 

 

useEffect

언제 코드가 실행될지 결정하는 방법

 

useEffect(a, b);

 

a : b 에 따라 실행하고 싶은 코드 (함수)

b : 실행하는 기준, dependencies

- reactJS 가 지켜보는 대상 -> 변화하면 실행하도록 함

ex)

[ ] => 딱 한번

[variable] => 해당 변수의 변화가 일어날때마다

 

예시)

// 항상 실행
console.log("i run all the time");

// 처음 render 될 때만 딱 한 번 실행
useEffect(() => {
  console.log("I run only once.");
}, []);

// keyword 가 변할 때마다 실행
useEffect(() => {
  console.log("I run when 'keyword' changes.");
}, [keyword]);

// counter 가 변할 때마다 실행
useEffect(() => {
  console.log("I run when 'counter' changes.");
}, [counter]);

// keyword, counter 가 변할 때마다 실행
useEffect(() => {
  console.log("I run when 'keyword & counter' changes.");
}, [keyword, counter]);

// 조건문을 이용해 특정 조건에 맞게 변경했을 때만 실행하도록 함
useEffect(() => {
  if (keyword !== "" && keyword.length > 5) {
    console.log("Search For", keyword);
  }
}, [keyword]);

 

 

useEffect 속 함수

보통은 useEffect 안에서 함수를 만들어 사용하는 방식을 많이 사용

 

useEffect(() => {}, []);
useEffect(function() {}, []);

 

방식은 일반 함수와 화살표 함수 두가지가 있으며

사용자에 따라 더 편하고 좋은 것의 차이는 있지만 보통은 화살표 함수를 더 많이 사용

 

// 일반 함수
useEffect(function() {
  console.log("hi :)");
  return function() {
    console.log("bye :(");
  };
}, []);

// 화살표 함수
useEffect(() => {
  console.log("hi :)");
  return () => console.log("bye :(");
}, []);

 

화살표 함수가 더 간결하고 보기 좋다.

 

 

참고) Cleanup Function

(많이 사용하는 것은 아니지만 알고 있으면 좋음)

 

component 는 단지 jsx 를 return 하는 function

 

component 가 destroy 될 때도 특정 코드 실행 가능

-> 함수를 return 하면 된다.

(사실상 Hide 는 숨기는게 아니라 destroy)

 

useEffect(() => {
  console.log("created :)");
  return () => console.log("destroyed :(");
}, []);

 

자주 일어나는 것은 아니지만 가끔 필요할 수도 있음

 

 

---

 

 

공식 이론 끝!!
다음부턴 실전 연습이다.