https://s3-us-west-2.amazonaws.com/secure.notion-static.com/6c599e8c-25b0-46d3-9abc-2eb012accb1b/Jan-02-2021_22-45-23.mp4

프로젝트에서 구현해야 할 부분이어서 개인적으로 학습한 내용인데,

여기서는 클래스 컴포넌트를 사용하였다.

아직 react hooks를 잘 모르기 때문에....🙄

이제 리덕스와 훅스를 사용하는 팀 프로젝트에 이와 같은 페이지를 추가해야 한다!

// 클라이언트
import React from 'react';
import axios from 'axios';
import './App.css';

const categoryList = ['전체', '정치', '경제', '연예', '스포츠', '사회', '생활/문화', '세계', 'IT/과학', '기타' ];

class App extends React.Component {

    constructor(props) {
      super(props);
      this.state = {
        dataList: [],
      }
      this.handleClick = this.handleClick.bind(this);
    }

    async componentDidMount() {
      await axios
      .get('<http://localhost:4000>')
      .then(res => {
        return res.data.data;
      })
      .then(data => {
        console.log('! componentDidMount: ', data[0].category);
        this.setState({dataList: data});
      });
    }

    handleClick = (e) => {
      const updateRender = async () => {
        await axios
        .get('<http://localhost:4000>')
        .then(res => {
          return res.data.data;
        })
        .then(data => {

          const sameCategory = data.filter(item => {
            return e === item.category;
          })

          if(e === '전체') {
            this.componentDidMount();
          }

          this.setState({ dataList: sameCategory });

        });
      }

      updateRender();
    }
    
    render() {
      return (
        <div>
          <div className="category-area">
            {categoryList.map(item => {
            return <div className="category" onClick={() => this.handleClick(item)}>{item}</div>
            })}
          </div>

          <div>
            총 {this.state.dataList.length}개가 검색되었습니다.
          </div>
  
          {this.state.dataList.map(item => {
            return (
              <div key={item.id} className="data">
                <h2>title</h2>
                <div>{item.title}</div>
                <h2>description</h2>
                <div>{item.text}</div>
                <h2>category</h2>
                <div>{item.category}</div>
              </div>
            )
          })
          }
        </div>
      );
    }
    
}

export default App;

// 서버
const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const app = express();

app.use(cors({ // cors 설정 X : 콘솔창에 에러가 뜨고 JSON 형식으로 데이터를 받아오지 못함.
    origin: '<http://localhost:3000>'
}));

app.use(bodyParser.json());

const data = [
    {
      id: 1,  
      image: '',
      title: "또덩",
      text:
        "이렇고 저렇고나ㅓㄹㄴ이ㅏ러ㅣㄹ나링리ㅏ니;ㅇㄴ;ㅣㄹ미;ㅁㅇ멜때내나ㅏㅣ타ㅣ",
      category: "기타",
      publisher: "야호일보",
    },
    {
      id: 2,
      image: '',
      title: "누가 하희라? 하희라·최수종 딸, 엄마 꼭닮은 미모 시선집중1",
      text:
        "배우 하희라가 가족 여행에서 찍. 배우 최수종이 아내인 배우 하희라를 똑 닮은 딸 윤서 양을 공개해 화제를 모으고 있다. 최수종은 24일 자신의 SNS에 “가족사진 촬영...",
      category: "연예",
      publisher: "중앙일보",
    },
    {
      id: 3,
      image: '',
      title: "누가 하희라? 하희라·최수종 딸, 엄마 꼭닮은 미모 시선집중2",
      text:
        "배우 하희라가 가족 여행에서 찍. 배우 최수종이 아내인 배우 하희라를 똑 닮은 딸 윤서 양을 공개해 화제를 모으고 있다. 최수종은 24일 자신의 SNS에 “가족사진 촬영...",
      category: "연예",
      publisher: "중앙일보",
    },

		// ...

    {
        id: 10,
      image: '',
      title: "코로나 관련 늬우스 1",
      text:
        "오늘 확진자가.....",
      category: "사회",
      publisher: "중앙일보",
    },
  ];

app.get('/', (req, res) => {
    res.status(200);
    res.send({ data: data });
});

app.listen(4000, () => {
    console.log('4000 start');
});

✅ 리액트 훅으로 리팩토링 해보기 참고 !

How To Call Web APIs with the useEffect Hook in React | DigitalOcean