🎅 일단 설치

npm install -g json-server

db폴더를 생성하고, db.json에 json데이터를 넣은 후

json-server --watch data/db.json 

localhost:3000/nations에 들어가면 db.json의 nations 배열이 들어가있다.

🎄 url 활용하기

localhost:3000/nations/2

localhost:3000/nations?loc=europe

🎅 데이터 가져오기

const [nations, setNations]=useState([]);
const [url, setUrl] = useState("http://localhost:3000/nations")
    
    
 useEffect(()=>{
        const fetchData = async() =>{

          try {
            const response = await fetch(url);

            if(!response.ok){
              throw new Error("네트워크 응답에 문제가 있다")
            }
            const json = await response.json();
            //response.json() 도 프로미스 반환하므로 기다려야함.
            setNations(json);

          } catch (error) {
            console.error('데이터를 가져오는데 문제가 발생했습니다.',error)
          }

            
        }

        fetchData();
    },[url]);

🎅 컴포넌트 style하기

import styled from "styled-components"

//styled 컴포넌트도 컴포넌트이기때문에 대문자로써주자
const Item = styled.div`
    margin: 60px auto;

    ul{
        padding: 10px;
    }
    li{
        margin: 20px 0;
        border: 1px solid black;
        box-sizing: border-box;
        padding: 10px;
        border-radius: 10px;
        list-style: none;
        box-shadow: 4px 4px 6px rgba(0,0,0,0.1);
    }
`

🎅 return 값

<Item>
  <h2>나라 목록</h2>
  <ul> 
    {nations.map((nation)=>{
      return <li key={nation.id}> 
        <h3>나라 이름 : {nation.title}</h3>
        <p>인구 수 : {nation.population}</p>
      </li>
    })} 
  </ul>
  <div>
    <button onClick={()=>{setUrl("localhost:3000/nations?loc=europe")}}>
      유럽 목록
    </button>
    <button onClick={()=>{setUrl("http://localhost:3000/nations")}}>
      전체 목록
    </button>
  </div>
</Item>

---

5월 17일 수업