React(39) 리액트 훅 - json-server 사용하여 통신하기

 

 

리액트 훅 영단어장을 만드는 실습 중이다.

json-server 로 통신하여 영단어 데이터를 호출하여 사용해보자.

 

Hoxy ....  json-server 실행하는 방법을 모르신다면 ? 지난 포스팅을 참고해주세요.

React(38) 리액트 훅 - json-server 로 RESTful API 만들기

 

---

React(39) 리액트 훅 - json-server 사용하여 통신하기

화면에서 날짜별 버튼이 나오고, 그 버튼을 누르면 해당 날짜에 암기해야할 영단어가 나온다.

간단해보이지만 객체 뭉텅이 안에서 필요한 데이터만 쏙쏙 골라내어 화면에 가져올 것이다.

 

DayList.js 

useState 로 days 를 선언한다. 통신해서 받아올 json 데이터를 담을 변수이다.

useEffect 에서 json-server와 통신하여 데이터 받아올 메소드를 구현한다. 처음 화면 렌더링 되자마자 딱 한번 받아온다.

그리고는 받아온 데이터를 days에 담아놓고 map() 함수로 날짜별 버튼을 만들자.

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

export default function DayList() {
  const [days, setDays] = useState([])	// days(변수)와 setDays(변수값 변경용 함수)를 useState로 선언한다.

  useEffect(() => { 			// 새로고침 시 아래내용이 ↓ 렌더링된다.
    fetch("http://localhost:3001/days") // fetch() 로 비동기 통신 -> promise를 반환한다.
      .then(res => {			// 통신 성공시 데이터가 res에 담긴다.
        return res.json(); 		// 그리고 res를 → json으로 변환
      })
      .then(data => {			// 그리고 data 객체는 
        setDays(data)			// setDays 에 들어가 days내용이=data로 변환된다.
      })
  }, []) 				// 두번째 인자로 [] 넣으면 렌더링이 최초 한번만 실행된다.
  
  return (
    <ul className="list_day">
      {days.map((day) => (		// days 를 map()로 검사한다. days 의 원소는 day 이다.
        <li key={day.id}>		// 키 값을 day의 id 값으로 정해준다.
          <Link to={`/day/${day.day}`}>Day {day.day}</Link> // 위에서 받아온 day 객체의 day 값을 표시한다.
        </li>
      ))}
    </ul>
  );
}

 

- 실행화면

날짜별 버튼이 아주 잘 만들어졌다.

 

 

Day.js

위에서 만든 날짜별 버튼을 클릭하면 그날 외워야 할 단어들이 나온다.

 

로직은 DayList.js 와 동일하다.

useState 로 words 를 선언한다. 얘는 통신해서 받아올 json 데이터를 담을 변수이다.

useEffect 에서 json-server 와 통신하여 데이터 받아올 메소드를 구현한다. [day] 상태가 변할 때마다 렌더링한다.

→ 즉, { day } 는 useParam() 을 이용해서 결국 url 값을 가져오므로 url 이 변경될 때마다 렌더링된다는 의미이다.

그리고는 Word 컴포넌트에 받아온 데이터를 prop으로 내려보낸다. 

import { useParams } from "react-router-dom"
import { useEffect, useState } from "react"
import Word from "./Word"    		 // 상세한 단어데이터가 들어있는 Word 컴포넌트를 임포트하자

export default function Day() {
  const { day } = useParams() 		 // http://local____/day → 요기서 ay 값을 가져온다.
  const [words, setWords] = useState([]) // words(변수)와 setWords(변수값 변경용 함수)를 useState로 선언한다.


  useEffect(() => { 			 // 새로고침시 렌더링이 된다.
    fetch("http://localhost:3001/words") // 로 비동기 통신 -> promise를 반환한다.
      .then(res => {			 // 통신 성공시 데이터가 res에 담긴다.
        return res.json(); 		 // 그리고 res를 → json으로 변환
      })
      .then(data => {			 // 그리고 data 객체는 
        setWords(data)			 // setWords 에 들어가 words 내용이 =data로 변환된다.
       
      })
  }, [day]) 		// useEffect 내부에서 url에 day와 같이 특정값을 가져올때는 day를 넣어준다.
  
  return (
    <div>
      <h2>Day {day}</h2>
      <table>
        <tbody>
          {words.map((word) => (		// words 를 map()로 검사한다. words 의 원소는 word 이다.	
            <Word word={word} key={word.id}/>   // Word 컴포넌트에 받아온 데이터를 prop으로 물려준다.
          )}
        </tbody>
      </table>
    </div>
  );
}

 

- 실행화면

버튼을 클릭하면 <Word> 컴포넌트로 넘어가 Day1에 암기할 단어가 잘 보인다.

 

 

ref: https://www.youtube.com/c/%EC%BD%94%EB%94%A9%EC%95%99%EB%A7%88/playlists