[회사소개페이지]데이터 불러오기/화면 랜더링

목표:
json-server로 mock 데이터를 만들어보고 product list 화면에 map()함수를 통해 불러와서 그려내본다.

과정:
1) [설치] mac 기준

npm install -g json-server

2) 작업하는 폴더의 최상단에 json-server 폴더를 만들고 db.json 파일을 생성합니다.
배열을 value로 가지고 있는 객체입니다. 불러올때 key이름인 products로 불러오게됩니다.

{
    "products": [
{
    "img": "/dataimg/acc1.jpeg",
    "title": "acc",
    "content":"acc"
},
{
    "img": "/dataimg/acc2.jpeg",
    "title": "acc",
    "content":"acc"
},
{
    "img": "/dataimg/acc3.jpeg",
    "title": "acc",
    "content":"acc"
},
{
    "img": "/dataimg/acc4.jpeg",
    "title": "acc",
    "content":"acc"
},
{
    "img": "/dataimg/bkl1.jpeg",
    "title": "buckle",
    "content":"buckle"
},
{
    "img": "/dataimg/bkl2.jpeg",
    "title": "buckle",
    "content":"buckle"
},
{
    "img": "/dataimg/bkl3.jpeg",
    "title": "buckle",
    "content":"buckle"
},
{
    "img": "/dataimg/bkl4.jpeg",
    "title": "buckle",
    "content":"buckle"
},
{
    "img": "/dataimg/bkl5.jpeg",
    "title": "buckle",
    "content":"buckle"
},
{
    "img": "/dataimg/btn1.jpeg",
    "title": "button",
    "content":"button"
},
{
    "img": "/dataimg/btn2.jpeg",
    "title": "button",
    "content":"button"
},
{
    "img": "/dataimg/btn3.jpeg",
    "title": "button",
    "content":"button"
},
{
    "img": "/dataimg/btn4.jpeg",
    "title": "button",
    "content":"button"
},
{
    "img": "/dataimg/strap.jpeg",
    "title": "strap",
    "content":"strap"
}
]
} 

3) server를 실행하는 코드입니다. 주의할 것은 클라이언트에서 접근하여 사용할 것이기 때문에
터미널을 닫지말고 프런트 코드를 작업하고 실행은 새 터미널에 해주어야 합니다.

npx json-server --watch json-server/db.json --port 8001

성공 시에 이런 화면이 보이게 됩니다.

여기까지 해줬으면 mock 서버가 만들어진 것입니다. 이제 리액트 프런트 코드를 작성해보겠습니다.

일단은 버튼을 누르면 데이터가 mock서버에서 불러와지는 형태로 먼저 만들어보겠습니다.

import React from "react";
import { useState } from "react";

const All = () => {
  const [products, setProducts] = useState([
   {img:'',
     title:'',
     content:''}
   ]);

  const getProducts = () => {
    fetch("http://localhost:8001/products")
      .then((response) => {
        return response.json();
      })
      .then((data) => {
        console.log(data);
        setProducts(data);
      })
      .catch((e) => {
        console.log(e);
      });

   
  };

  return (
    <div>
      <h4 style={{ color: "white" }}>모든 상품 페이지</h4>
      <button onClick={getProducts}>데이터 가져오기</button>
      <ul>
        {products.map((p) => (
          <li key={p.img}>
            <img src={p.img} alt="product_img"/>
            {p.title}
            {p.content}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default All;

이슈: 큰 이슈는 없이 만들어졌지만 리액트로 만들고 있다면 화면에 랜더링을 일어나게 하기 위한 상태를 변화시켜주는 부분을 염두하도록 합니다. 고려해야할 것은 아무대로 useState(initial state) 즉 최초 화면이 랜더링되면서 어떤 화면을 화면에 페인팅할지일 것입니다. 만약 초기 상태를 설정해두지 않는다면 useState의 초기변수 즉
products가 undifined 상태가 되어서 화면에 랜더링 될 부분이 없게 될것입니다. 또한 우리가 json 서버에 데이터를 배열로 만들어서 넣어줬기 때문에 배열을 초기 상태로 설정해야 합니다. 그렇지 않으면 products.map()은 함수가 아니라는 에러를 만나게 됩니다.

잘 만들어졌기 때문에 이제 버튼을 누르는 것이 아닌
처음 화면이 랜더링 될때 서버에서 데이터를 가져와서 화면에 그려주는 코드로 바꾸어보겠습니다.

완성코드:

import React from "react";
import { useState , useEffect } from "react";

const All = () => {
  const [products, setProducts] = useState([
    {img:'',
     title:'',
     content:''}
  ]);

useEffect(()=>{
    fetch("http://localhost:8001/products")
      .then((response) => {
        return response.json();
      })
      .then((data) => {
        console.log(data);
        setProducts(data);
      })
      .catch((e) => {
        console.log(e);
      });
},[])

 
  return (
    <div>
      <h4 style={{ color: "white" }}>모든 상품 페이지</h4>
      <ul>
        {products.map((p) => (
          <li key={p.img}>
            {p.img}
            {p.title}
            {p.content}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default All;

jsx 부분에서 버튼을 지우고 useEffect를 추가하였습니다. 빈배열을 의존성에 추가해 컴포넌트가 마운트되고 언마운트 될 때 한번 만 실행되도록 추가합니다. 만약 빈 배열 의존성을 추가하지 않으면 상태를 바꾸어주는 set 함수 호출=>데이터를 불러오기=>상태 변화=>화면 재랜더링의 부분이 계속해서 실행되게 되므로 주의합니다.