useEffect

컴포넌트가 렌더링된 이후에 특정 작업을 수행하는 Hook이다.
컴포넌트가 mount혹은 unmount상태일 때 실행된다.
useEffect는 undefined를 반환한다.
최초 실행은 자동으로 실행된다.

인자

setup함수와 dependencies(의존성 배열)

예시

• 첫 번째 예시에서는 setup함수만 사용했다.
  - setup힘수만 사용할 경우 변화가 일어날 때마다 setup함수가 실행된다.

import { useEffect } from "react";

const App = () => {
    useEffect(() => {
        console.log("hello");
    });
    return (
        <div>
            <h1>useEffect 테스트</h1>
        </div>
    );
};

export default App;

• 두 번째 예시
  - 의존성 배열에 value를 넣고 abcd를 입력하자 입력 횟수만큼 4번 setup함수가 실행된다.
  하지만 count 즉, 증가 버튼을 4번 누르자 setup함수는 실행되지 않는다.

import { useEffect, useState } from "react";

const App = () => {
    const [value, setValue] = useState("");
    const [count, setCount] = useState(0);

    useEffect(() => {
        console.log("hello");
    }, [value]);
    return (
        <div>
            <h1>useEffect 테스트</h1>
            <input type="text" value={value} onChange={(e) => setValue(e.target.value)} />
            {count}
            <button
                onClick={() => {
                    setCount(count + 1);
                }}
            >
                증가
            </button>
        </div>
    );
};

export default App;

이처럼 useEffect는 렌더링이후에 특정 작업을 주고싶을 때 사용한다.

하루를 마치며

오늘은 설 연휴 마지막날이다. 나름 열심히한다고 공부를 했지만 숙련주차가 쉽지않아서 속도를 못내고 있다. 강의를 들어보면서 느낀점이 있다. 내 속도에 맞춰서 들어야 한다는 것이다. 매번 나의 속도보다 빠르게 듣다보니 얼렁뚱땅 공부하게되고 그 상태로 개인 과제를 하다보니 아쉬운 부분이 많이 보였다. 그래서 이번에는 내 속도에 맞춰 강의를 듣고 개인 과제를 해볼 생각이다.