React, useEffect and useCallback flow, 리액트 useEffect와 useCallback 의 사용법과 플로우에 대하여

우선 플로우를 설명하기에 앞서 rendering된 예제 페이지와 코드는 아래와 같습니다.

import { useState, useEffect, useCallback } from 'react'
import './TripList.css'

const TripList = () => {
  const [trips, setTrips] = useState([]) 
  const [url, setUrl] = useState('http://localhost:3000/trips')

  const fetchTrips = useCallback(async () => {
    console.log("fetchTrips useCallback function")
    const response = await fetch(url)
    const json = await response.json()
    setTrips(json)
  }, [url])  // useCallback will return a memoized version of the callback that only changes if one of the dependencies has changed.

  // As a first argument, we pass in a function.
  // And then as a second argument, we pass what's known as a
  // dependecy array.
  useEffect(()=>{
    console.log("useEffect function")
    fetchTrips()
  }, [fetchTrips])  // for the first rendering, useEffect is triggerd. And then triggered only when these dependencies changed, useEffect triggerd

  console.log(trips)

  return(
    <div className="trip-list">
      {console.log("return statement")}
      <h2>Trip List</h2>
      <ul>
        {trips.map(trip=>(
          <li key={trip.id}>
            <h3>{trip.title}</h3>
            <p>{trip.price}</p>
          </li>
        ))}
      </ul>
      <div className="filters">
        <button onClick={ () => setUrl("http://localhost:3000/trips?loc=europe")}>
          European Trips
        </button>
        <button onClick={()=>setUrl("http://localhost:3000/trips")}>
          All trips
        </button>
      </div>
    </div>
  )
}

export default TripList

 

console.log() 함수를 통하여 React라이브러리의 useEffect, useState 그리고 useCallback의 관계와 flow를 간단하게 알아보겠습니다.

 

먼저 TripList 컴포넌트가 실행될때 console창을살펴보면 아래의 결과를 볼수 있습니다.

1. console.log(trips) - useState([])에 의해 trips에는 []이 저장됨

 

2. console.log("return statement") - Trip List 컴포넌트의 리턴값이 실행됨

 

3. console.log("useEffect function") - useEffect() 함수가 실행됨. useEffect() 내의 fetchTrips() 함수가 실행됨.

 

4. console.log("fetchTrips useCallback function") - useCallback hook내의 함수가 실행됨. "http://localhost:3000/trips" url을 통하여 데이터를 가져와서 setTrips에 그 데이터를 전달함. setTrips(json)에 의해 TripList 컴포넌트가 rerendering됨

 

5. console.log(trips) - 위 4번 단계를 거쳐서 trips은 fetch를 통해 얻은 새로운 값을 반환함

 

6. console.log("return statement") - 리턴 실행

 

이 후 useEffect는 실행되지 않습니다. 왜냐하면 url이 새롭게 변하지 않았으므로 fetchTrips는 이전과 같은 콜백함수 object ID를 가지기 때문입니다.

 

그렇다면 "European Trips"버튼을 누르면 어떠한 일이 일어날까요?

"European Trips"버튼을 누를 때 일어나는 flow를 알아보겠습니다.

 

"European Trips"버튼을 누른후 새롭게 rendering된 페이지는 이렇습니다.

그리고 console창에 출력된 값은 아래와 같습니다.

6. setUrl("http://localhost:3000/trips?loc=europe") 이 실행되면서 TripList component가 다시 실행됩니다. 그리고 url은 새로운 값을 가지게 됩니다. 그러므로 fetchTrips 은 이전과는 다른 콜백함수 object ID를 가지게 됩니다.

 

7. console.log(trips) - 4단계에 저장되었던 값이 화면에 출력됨

 

8. console.log("return statement") - Trip List 컴포넌트의 리턴값이 실행됨

 

9. console.log("useEffect function") - 이때에 useEffect()의 url dependency값에 의해여 useEffect()는 실행이 됨. 왜냐하면 6단계에서 fetchTrips의 값(object ID)이 변했기 때문임. useEffect() 내의 fetch(url)이 실행돼서 trips?loc=europe WS를 통해 데이터를 가져옴. 그 데이터는 useEffect()내의 setTrips() 에 전달되며 trips에 새로운 값이 저장됨. 여기서 setTirps()은 useState이므로 TripList 컴포넌트를 재실행함. 그리고 나서 url은 같은 값을 가지므로 useEffect()는 실행이 안 됨.

 

10. console.log("fetchTrips useCallback function") - useCallback hook내의 함수가 실행됨. "http://localhost:3000/trips?loc=europe" url을 통하여 데이터를 가져와서 setTrips에 그 데이터를 전달함. setTrips(json)에 의해 TripList 컴포넌트가 rerendering됨

 

11. console.log(trips) - 위 10번 단계를 거쳐서 trips은 fetch를 통해 얻은 새로운 값을 반환함

 

12. console.log("return statement") - 리턴 실행

 

여기서 그렇다면 "European Trips"버튼을 또다시 누르면 어떠한 일이 일어날까요?

console창에 출력된 값은 아래와 같습니다.

TripList 컴포넌트가 rerendering 되지도 않았으며 url 값이 변하지도 않았기 때문에 fetchTrips이 가지는 object ID는 이전과 같습니다. 그러므로 useEffect는 실행이 되지 않습니다.