[React] useEffect란? (+ useState, useReducer과 함께 정리)

이번에 useEffect를 정리하면서 

Carbon | Create and share beautiful images of your source code 

Carbon | Create and share beautiful images of your source code

이런걸 알게된다. 

이런 편리한 사이트가 있다는걸 이제 알았네잉... 

두고두고 써먹어야지

---

리액트를 사용하는 갠프에서 제일 많이 사용되는건 useState, useEffect, useReducer이었던 것 같다.

뷰 처음 배울때도 간단한것들부터 너무 어려웠는데, 리액트도 하다보면 괜찮아지겠지...

 

1. useEffect란 무엇인가

리액트 공식 문서에 따르면 useEffect란 외부 시스템과 컴포넌트를 동기화하는 React Hook이라고 한다. 

근데 그렇게 말하면 알아들을 리가 있나.... 

좀 더 알아듣게 설명을 해보자면, 컴포넌트가 랜더링 될 때 마다 특정 작업(Side effect)를 실행할 수 있도록 하는 hook이라고 한다. 지피티 선생 왈,

리액트에서 컴포넌트가 화면에 나타나거니, 값이 바뀔 때 어떤 일을 하고 싶을 떄 쓰는 함수에요!👽

라고 하신다. 따라서 화면에 랜더링 될 때 특정 작업을 한다는 뜻이다.

 

예를 들어,

useEffect(() => {
  // 이 안에 있는 코드는 컴포넌트가 화면에 나타날 때 실행된다.
  console.log("바보야!")
}, [])

여기서 [ ]는 "의존성 배열"이라고 하며, 비어있으면 처음에만 실행된다. 

참고로 위 코드는 맨 처음 한번만 실행 되는데, 값이 바뀔 때마다 실행하고 싶다면

useEffect(() => {
  console.log("바보메롱👅")
}, [입력값])

입력값이 바뀔 때마다 실행된다.

 

2. 어디서 사용되어지느냐

공식문서에선 외부 시스템과의 연결에서 많이 사용된다고 했다.

이런느낌이겠지

보아하니 뷰의 watchEffect랑 유사하지 않나...라는 생각이 점점 든다.

function Counter(){
  const [count, setCount] = useState(0)
  
  useEffect(() => {
  	document.title = `지금 카운트는 ${count}입니다.`
  }, [count])

    return (
        <div>
            <p>지금까지 {count}번 눌렀어요</p>
            <button onClick={()=> setCount(count + 1)}> Press me 💞 </button>
        </div>
    )
}

 

onClick을 통해 count를 1씩 증가시키면 count의 상태가 바뀌는데, count가 의존성 배열 안에 들어가 있으므로 ([count]) 버튼을 클릭할 때 마다 상태가 바뀌어 title의 ${count}가 1씩 증가할 것이다. 

 

3. useEffect의 구조

 

1️⃣ useEffect(() => {...} , [...])

useEffect는 전체가 하나의 hook으로, 최상의 컴포넌트 또는 커스텀 Hook에서만 호출할 수 있다 =

리액트의 Hook이기 때문에 항상 컴포넌트 함수 맨 위쪽에 작성해야 한다! (return전)

function MyComp() {
  useEffect(() => {
    console.log("이건 돼요!");
  }, []);
}

 

2️⃣ 첫번째 매개변수 = Effect 함수(=setup영역)

() => {
  console.log("컴포넌트가 나타났거나, 의존성이 바뀌었어요!");
}

effect 함수, setup함수, setup영역 등등으로도 불리고 있다.

반드시 전달해야 하는 작성 영역이며, 콘솔출력, 서버 연결, 타이머 시작, DOM 조작 등등을 할 수 있다.

 

3️⃣ 두번째 매개변수 = 의존성 배열(=dependencies 영역)

[값1, 값2]

언제 이 effect를 실행할지 결정한다. 

 

4️⃣ 세번째 매개변수 = Cleanup 함수 (=cleanup영역)

useEffect(() => {
  console.log("🟢 연결 시작!")

  const timer = setInterval(() => {
    console.log("⏰ 1초마다 실행 중!")
  }, 1000)

  return () => {
    console.log("🔴 연결 종료!")
    clearInterval(timer) // 타이머 정리!
  }
}, [])

컴포넌트가 사라지기 직전, 또는 Effect가 다시 실행되기 전에 실행된다.

주로 소켓 연결 끊기, 타이머 멈추기, 이벤트 리스너 제거 등에서 사용된다.

 

4. useState vs useEffect vs useReducer

이 3개가 하도 많이 나와서 내가 직접 비교분석을 했었다.

useState🧠	useEffect⏰	useReducer 🤖
“값을 저장”  값을 저장하고, 나중에 바꿀 수 있도록 한다. = 값을 바꾸고 나면 그 값이 화면에 반영된다. "기억하기(state)“	“값이 바뀌면 실행“ Vue의 watch, watchEffect와 유사한 기능을 한다. 무언가를 실행할 때 사용(api 호출, 이벤트 등록 등)  = 화면이 바뀐 후 또는 바뀐 다음에 실행된다. "반응하기(effect)”	“여러 값들을 한번에 제어하기“ 복잡한 값들을 정리해서 한번에 바꾼다. 상태를 어떻게 변경할지 규칙을 정하고 (dispatch), 규칙(reducer)에 맞추어 상태를 변경한다 “액션(action)을 입력받아 새로운 상태로 바꾸기(reduce)”
숫자, 문자열, on/off(flag)와 같은 간단한 상태의 값을 저장한다 (1:1)	값이 바뀌면 “무언가를 하자!”할 때	여러가지 상태나 선택지를 다룰 때 (useState의 여러 개 제어 버전) (1:多)
점수 저장, 이름 기억하기	알람 울리기, 콘솔에 로그 출력	체크리스트, 장바구니, 퀴즈 결과 저장

 

useState는 가방이다.

• 점수, 이름, 좋아요 등을 눌렀는지...간단하고 작은 값들을 넣고 꺼낼 수 있다.
• setCount(=setter함수를 설정)를 통해 값을 바꾼다.

 

useEffect는 알람시계이다.

 

• 값이 바뀌는 경우 ➡️ 무언가 하는 trigger이 발동된다.
• Count가 바뀐다면 무언가를 “실행”한다.

useReducer은 로봇이다.

• 명령어를 주면(=dispatch) 로봇이 상태를 정리해서 바꿔준다(=action)
• Plus라고 말하면(=dispatch)  점수를 1 올린다(=action)
• Reducer에 대한 함수가 따로 필요하다!

 

출처 : https://ko.react.dev/reference/react/useEffect#usage