5. 피드 페이지 만들기

이번엔 피드 페이지를 만들어볼 것이다.

인스타그램 프로필처럼 3열로 정렬된 이미지들이 무한스크롤되도록 만드는 것이 목표...

우선 서버에 연결을 해놓은 상황이 아니라 테스트 이미지들을 public/test_img 폴더에 몇 장 넣어놓고 진행한다.

public 폴더에 존재하는 이미지를 넣고 싶을 때는 아래와 같은 형식으로 <img> 태그를 이용하면 된다.

<img src="test_img/1.jpg"/>

이 때 주의할 점은 이미지주소에는 상대경로로 넣어야 한다!

 

axios 라이브러리의 get 요청을 통해 이미지들을 갖고 올 건데 우선 이 기능이 잘 되는지 테스트해보기 위해 버튼을 클릭하면 public/data/test.json 파일에 저장된 데이터들의 이미지를 갖고 오도록 해보겠다. 

임의로 넣은 public/data/test.json 파일의 내용은 대충 아래와 같다.

[
  {
    "subject": "1번째 일기",
    "date": "2022/10/01",
    "representative_img": "test_img/1.jpg",
    "content": "한강 불꽃 축제"
  },
  ...생략
  {
    "subject": "9번째 일기",
    "date": "2022/10/09",
    "representative_img": "test_img/9.jpg",
    "content": "초코에몽"
  }
]

 

import { Button } from "react-bootstrap";
import axios from "axios";
import { useState } from "react";

function Feed() {
  const [data, setData] = useState([]);

  return (
    <div>
      <div>Nickname</div>
      {data.map((idx, i) => {
        return <Img i={i} />;
      })}
      <Button
        onClick={() => {
          axios
            .get("http://localhost:3000/data/test.json")
            .then((result) => {
              setData(result.data);
              console.log(data);
            })
            .catch(() => {
              console.log("failed to load data");
            });
        }}
      >
        버튼
      </Button>
    </div>
  );
}

function Img(props) {
  return (
    <img
      className="col-md-4"
      src={"test_img/" + (props.i + 1) + ".jpg"}
      width="33%"
    />
  );
}

export default Feed;

버튼 클릭하면 오른쪽과 같이 사진이 출력됨.

버튼을 클릭하면 json 파일 형식으로 된 테스트 데이터들을 불러와서 data라는 state에 저장하고 map 함수를 이용하여 데이터들을 순회하며 그에 맞는 이미지들을 불러와서 보여준다. 

일단 axios로 이미지 불러오기 잘 되는지 확인하려고 이렇게만 만들어본거고, 피드 페이지에 들어오면 바로 사진들이 나오도록 구현할 것이다. 그리고 스크롤 내리면 자동으로 이미지들이 계속 보이도록 할 예정이다.