[코드잇] 리액트로 데이터 다루기(1)

1. mock 데이터 추가하기

 

App.js

import ReviewList from './RevieList';
import items from '../mock.json';

function App() {
  return (
    <div>
      <ReviewList items={items} />
    </div>
  );
}

export default App;

ReviewList.js

function ReviewList({ items}) {
  console.log(items);
  return <ul></ul>;
}

export default ReviewList;

 

 

2. map으로 배열 렌더링하기 

- 배열 메소드 map에서 콜백 함수의 리턴 값으로 리액트 엘리먼트를 리턴

 

ReviewList.js

import './ReviewList.css';

function formatDate(value) {
  const date = new Date(value);
  return `${date.getFullYear()}. ${date.getMonth() + 1}. ${date.getDate()}`;
}

function ReviewListItem({ item }) {
  return (
    <div className="ReviewListItem">
      <img className="ReviewListItem-img" src={item.imgUrl} alt={item.title} />
      <div>
        <h1>{item.title}</h1>
        <p>{item.rating}</p>
        <p>{formatDate(item.createdAt)}</p>
        <p>{item.content}</p>
      </div>
    </div>
  );
}

function ReviewList({ items }) {
  return (
    <ul>
      {items.map((item) => {
        return (
          <li>
            <ReviewListItem item={item} />
          </li>
        );
      })}
    </ul>
  );
}

export default ReviewList;

 

 

3. sort로 정렬 바꾸기 

- 배열 메소드의 sort 메소드를 사용하면 배열 정렬 가능

 

App.js

import { useState } from 'react';
import ReviewList from './ReviewList';
import items from '../mock.json';

function App() {
  const [order, setOrder] = useState('createAt');
  const sortedItems = items.sort((a,b) => b[order] - a[order]);

  const handleNewestClick = () => setOrder('createdAt');

  const handleBestClick = () => setOrder('rating');

  return ( 
    <div>
      <div>
        <button onClick={handleNewestClick}>최신순</button>
        <button onClick={handleBestClick}>베스트순</button>
      </div>
      <ReviewList items={sortedItems} />
    </div>
  );
}

export default App;

 

 

4. filter로 아이템 삭제하기 

- 베열 메소드 filter와 배열형 스테이트를 활용하여 삭제 기능 구현

 

App.js

import { useState } from 'react';
import ReviewList from './ReviewList';
import mockItems from '../mock.json';

function App() {
  const [order, setOrder] = useState('createdAt');
  const [items, setItems] = useState(mockItems);
  const sortedItems = items.sort((a, b) => b[order] - a[order]);

  const handleNewestClick = () => setOrder('createdAt');

  const handleBestClick = () => setOrder('rating');

  const handleDelete = (id) => {
    const nextItems = items.filter((item) => item.id !== id);
    setItems(nextItems);
  };

  return (
    <div>
      <div>
        <button onClick={handleNewestClick}>최신순</button>
        <button onClick={handleBestClick}>베스트순</button>
      </div>
      <ReviewList items={sortedItems} onDelete={handleDelete} />
    </div>
  );
}

 

ReviewList.js

import './ReviewList.css';

function formatDate(value) {
  const date = new Date(value);
  return `${date.getFullYear()}. ${date.getMonth() + 1}. ${date.getDate()}`;
}

function ReviewListItem({ item, onDelete }) {
  const handleDeleteClick = () => {
    onDelete(item.id);
  };

  return (
    <div className="ReviewListItem">
      <img className="ReviewListItem-img" src={item.imgUrl} alt={item.title} />
      <div>
        <h1>{item.title}</h1>
        <p>{item.rating}</p>
        <p>{formatDate(item.createdAt)}</p>
        <p>{item.content}</p>
        <button onClick={handleDeleteClick}>삭제</button>
      </div>
    </div>
  );
}

function ReviewList({ items, onDelete }) {
  return (
    <ul>
      {items.map((item) => {
        return (
          <li>
            <ReviewListItem item={item} onDelete={onDelete} />
          </li>
        );
      })}
    </ul>
  );
}

export default ReviewList;

 

5. 배열 렌더링시 key 설정

 

- 배열을 렌더링할 땐 반드시 key를 설정해야함

- 배열에 index는 배열의 순서에 따라서 부여되는 값이기 때문에 key로 삭제 불가

 -> 배열의 index는 배열의 순서에 따라서 다른 데이터를 가리킴

- 각 데이터를 구분할 수 있는 고유한 값으로 지정해야 함

 

- key Prop은 배열을 렌더링할 때 최상위 태그에다가 지정 

 

ReviewList.js

function ReviewList({ items, onDelete }) {
  return (
    <ul>
      {items.map((item) => {
        return (
          <li key={item.id}>
            <ReviewListItem item={item} onDelete={onDelete} />
          </li>
        );
      })}
    </ul>
  );
}