| React | Hook의 useEffect (+component Lifecycle 간섭하기)

컴포넌트도 인생이 있다.
컴포넌트 인생 중간중간에 간섭해보자.

1. 생성이 될 수도 있고 ( mount)
2. 재 렌더링이 될 수도 있고 (update)
3. 삭제가 될 수도 있다.( unmount)

---

이렇게 우리 코드에 갈고리를 달아서 넣어주면 된다.
=> 페이지 장착시, 업데이트 시, 제거 시 코드 실행 가능
갈고리는 영어로 hook, 그래서 저걸 Lifecycle hook이라고 부른다.

---

useEffect 이란?

: 컴포넌트가 렌더링 될 때 특정 작업을 실행할 수 있도록 하는 Hook
useEffect을 사용하면 함수 컴포넌트에서도 side effect를 사용할 수 있다.
(함수의 핵심기능 외에 쓸데없는 기능들을 프로그래밍 용어로 side effect)

🌟 한마디로, 컴포넌트의 핵심 기능은 html 렌더링이라
그거 외의 쓸데없는 기능들은 useEffect 안에 적으라는 소리
(오래걸리는 반복 연산, 서버에서 데이터 가져오는 작업, 타이머 달기 자주 사용)

 

< useEffect 형태 >

1. 렌더링 될 때마다 실행

useEffect(() => {
    // 작업
});

2. 화면에 첫 렌더링될 때 실행 => 의존성 배열의 값이 바뀔 때 실행

의존성 배열? 이 배열이 변경되면 함수가 실행되게끔

useEffect(() => {
    // 작업
},[의존성배열]);

3. 화면에 첫 렌더링될 때만 실행 (의존성 배열: 빈 값)

useEffect(() => {
    // 작업
},[ ]);

---

# 실습. 특정 것만 렌더링 될 수 있게 하기!!

import React, { useState, useEffect } from "react";

function App() {
  const [count, setCount] = useState(1);
  const [name, setName] = useState("");

  const handleCountUpadte = () => {
    setCount(count + 1);
  };

  const handleInputChange = (e) => {
    setName(e.target.value);
  };
  // 렌더링마다 매번 실행됨 -> 랜더링 이후
  useEffect(() => {
    console.log("렌더링⭐️");
  });
  // 마운팅 + count가 변화할 때마다 실행됨
  useEffect(() => {
    console.log("❗️count 변화");
  }, [count]);

  // 마운팅 + name 변경될 때마다 실행됨
  useEffect(() => {
    console.log("✅ name 변화");
  }, [name]);

  // [ ]넣으면 , 첫 마운팅 될때만 실행된다.!!
  useEffect(() => {
    console.log("마운팅💎 ");
  }, []);

  return (
    <div className="App">
      <button onClick={handleCountUpadte}>Update</button>
      <span>count: {count} </span>
      <input type="text" value={name} onChange={handleInputChange} />
      <span>name:{name}</span>
    </div>
  );
}

export default App;

 

결과 화면

결과 화면을 보면 알다시피

Update버튼 클릭하면 count: 1 이 1씩 증가하고,
input창에 값을 입력하면 name: 옆에 값이 출력된다.


1. 렌더링될때 마다 매번 실행됨

 useEffect(() => {
    console.log("렌더링⭐️");
  });

어떤 값을 변화할때마다 계속 실행된다.
만약에 그 안에 무거운 작업을 하고 있다면 굉장히 비효율적일 것이다.

⇒ 이렇게 계속 불필요하게 렌더링 되는 것을 useEffect 사용하여 특정 것만 렌더링 될 수 있게 하는 것


2_1. 처음 마운팅 + count가 변화할 때마다 실행됨(Update버튼 클릭)
input에 값을 아무리 넣어도 값이 불러오지 않는다.!

  useEffect(() => {
    console.log("❗️count 변화");
  }, [count]);

2_2. 처음 마운팅 + name 변경될 때마다 실행됨(input의 값 넣기)
update버튼을 아무리 눌러도 값이 불러오지 않는다.

  useEffect(() => {
    console.log("✅ name 변화");
  }, [name]);

3. [ ] 넣으면 , 맨 처음 마운팅 될 때만 실행된다.!!
맨 처음에만 불러오고 그 이후에는 다른 것들을 클릭, 입력해도 불러오지 않는다.

  useEffect(() => {
    console.log("마운팅💎 ");
  }, []);

 

 

[참고]

인프런: 처음만난 리액트