📌 목차

✨ 초보자를 위한 리액트 강좌

💁🏻

1. 강의 소개
2. 설치(create-react-app)
3. 컴포넌트,JSX
4. 첫 컴포넌트 만들기
5. CSS 작성법
6. 이벤트 처리
7. state,useState
8. props
9. 더미 데이터 구현
10. 라우터 구현 react-router-dom
11. json-server,REST API
12. useEffect,fetch()로 API 호출
13. custom Hooks
14. PUT(수정),DELETE(삭제)
15. POST(생성),useHistory
16. 마치며
17. 부록: 타입스크립트 적용하기

useEffect,fetch()로 API 호출

useEffect라는 훅이 있는데 useState와 마찬가지로 react에서 import해온다.

useEffect는 어떤 상태 값이 바뀌었을 때 동작하는 함수를 작성할 수 있다.

useEffect는 첫번째 매개변수로 함수를 받는다.

이 함수가 호출된 타이밍은 랜더링 결과가 실제 돔에 반영된 직후 이다.

그러니까 이 모습이 다 그려지고 나서 함수가 찍힌 것.

그리고 컴퍼넌트가 사라지기 직전에도 마지막으로 호출된다.

import { useEffect, useState } from 'react'
import { Link } from 'react-router-dom'

export default function DayList() {
  const [days, setDays] = useState([])

  useEffect(() => {
    fetch('http://localhost:3001/days')
      .then((res) => {
        return res.json()
        //이렇게 하면 json으로 데이터를 반환해서 Props로 받아올 수 있다.
      })
      .then((data) => {
        setDays(data)
      })
  }, [])

  return (
    <ul className="list_day">
      {days.map((day) => (
        <li key={day.id}>
          <Link to={`/day/${day.day}`}>Day {day.day}</Link>
        </li>
      ))}
    </ul>
  )
}

useEffect의 두번째 매개변수로는 배열을 넣어주는데,

여기서의 배열은 의존성 배열이다.

렌더링 후 딱 한번만 값을 호출하려면 빈 배열을 입력하면 된다.

Day.js도 마찬가지로 useEffect를 사용해서 데이터를 호출한다.

import { useEffect, useState } from 'react'
import { useParams } from 'react-router-dom'
import Word from './Word'

export default function Day() {
  const { day } = useParams()
  const [words, setWords] = useState([])

  useEffect(() => {
    fetch(`http://localhost:3001/words?day=${day}`)
      .then((res) => {
        return res.json()
      })
      .then((data) => {
        setWords(data)
      })
  }, [day])

  return (
    <>
      <h2>Day {day}</h2>
      <table>
        <tbody>
          {words.map((word) => (
            <Word word={word} key={word.id} />
          ))}
        </tbody>
      </table>
    </>
  )
}