React useEffect and useState simple flow, 리액트 useEffect와 useState의 플로우를 간단하게 알아보기

우선 플로우를 설명하기에 앞서 rendering된 예제 페이지는 이렇게 생겼습니다.

import { useState, useEffect } from 'react'

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

  useEffect(()=>{
    console.log("useEffect function")
    fetch(url)
    .then(response => response.json())
    .then(json => setTrips(json))
  }, [url])

  console.log(trips)

  return(
    <div className="trip-list">
      <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>
      {console.log("return statement")}
    </div>
  )
}

export default TripList

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

 

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

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

 

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

 

3. console.log("useEffect function") - useEffect() 함수가 실행됨. useEffect() 내의 fetch(url)이 실행돼서 /trips WS를 통해 데이터를 가져옴. 그 데이터는 useEffect()내의 setTrips() 에 전달되며 trips에 새로운 값이 저장됨. 여기서 setTirps()은 useState이므로 TripList 컴포넌트를 재실행함. 이때에 useEffect()의 dependency값에 의해여 useEffect()는 실행이 안됨. 

 

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

 

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

 

 

여기서 setUrl을 실행하는 "European Trips"버튼을 누를 때 일어나는 flow를 알아보겠습니다.

 

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

 

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

setUrl("http://localhost:3000/trips?loc=europe") 이 실행되면서 TripList component가 다시 실행됩니다. 그리고 url은 새로운 값을 가지게 됩니다. 이로서 나타나는 flows는 아래와 같습니다.

 

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

 

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

 

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

 

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

 

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