[React] 좋아요 기능 중복 선택 문제 해결

결론 : 리스트에서 toggle해서 컴포넌트에 전해주는 방식으로 코딩해야 개별 선택이 된다.

애프터

 

안됐을 때 :( 

컴포넌트에서만 toggle하는 것으로 설계 : 리스트에서 뿌려진 모든 버튼이 선택됨

 

됐을 때 :)

리스트에서 toggle하고 컴포넌트에 props로 전달하는 방식으로 설계 : 정상 작동

 

postRestaurant.jsx (컴포넌트)

import { useState } from 'react';
import { Link } from "react-router-dom";

const posts = ({posts, loading, reverse}) => {
        return(
        <>
        { loading && <div> loading ... </div>}
            {
                posts.map((post,index) => (
                        <tr key={index}>
                        <td>{post.id}</td>
                        <td><Link to="/detail2">{post.title}</Link></td>
                        <td>{post.region}</td>
                        <td>{post.price}</td>
                        <td>{post.regdate}</td>
                        <td>{post.hit}</td>
                        <td><div id={index} className="heartNotActive" onClick={reverse}></div></td>
                        </tr>
                ))
            }
        </>
    );
};

export default posts;

 

restaurant.jsx (리스트 - postRestaurant.jsx가 import된 )

import React, { useState } from 'react';
import Posts from "../board/postRestaurant"; 
import Category from "../category.jsx";
import Pagination from "../board/pagination.jsx";

export default function restaurant() {
  const onToggle = (event) => {
    let classList = event.target.closest('td').children[0].classList.length;
    if(classList === 1) {
      let heartNum = event.target.closest('td').children[0].classList.add('isActive');
    } else {
      let heartNum = event.target.closest('td').children[0].classList.remove('isActive');
    }
  }
  
  /*
  
  ..생략
  
  */
  
  return (
            <div className="container-fluid">
               <div className="row">
                  <div className="col-12">
                  <Category />
                  <div className="section">
                  <div className="restaurant-landmark"></div>
                  <h1 className="page-tit">Popular restaurants in Jeju</h1>
                    <table class="table">
                    <thead class="text-center">
                      <tr>
                           <th>번호</th>
                           <th>제목</th>
                           <th>지역</th>
                           <th>가격</th>
                           <th>날짜</th>
                           <th>조회수</th>
                           <th>Like</th>
                        </tr>
                     </thead>
                     <tbody class="text-center align-middle">
                      <Posts 
                      posts={currentPosts(posts)} 
                      loading={loading}
                      reverse={onToggle}></Posts> 
                    </tbody>
                  </table>
                  <Pagination
                     postsPerPage={postsPerPage}
                     totalPosts={posts.length}
                     paginate={setCurrentPage}
                  ></Pagination>
                  </div>
                  </div>
                  </div>
               </div>
        );
    }