[React] 리뷰, 별점 기능구현하기

1. 리뷰, 별점기능?

2차프로젝트에서 강의 상세페이지를 작업하게 되었는데 페이지에 들어가는 기능중 리뷰기능과 별점 기능이있어 블로그에 정리해보려고 한다.

1-1. 리뷰 기능 구현하기

우선 데이터로 받아온 리뷰들을 화면에 뿌려주기위해서 map메소드를 사용하여 컴포넌트를 뿌려주는 식으로 구현해봤다, 프로젝트 진행 중간에 블로그 작성을해서 백엔드 api가 아직 없기때문에 mock데이터로 작업하였다.

import styled from 'styled-components';
const ReviewComment = props => {
  
  return (
    <CommentBody>
      <UserProfile>
        <UserImg src=''>(유저 프로필 사진)</UserImg>
        <UserInfo>
          <UserName>(유저 이름)</UserName>
        </UserInfo>
      </UserProfile>
      <UserComment>{data.userComment}</UserComment>
    </CommentBody>
  );
};

export default ReviewComment;

우선 porops로 전달받은 데이터들을 화면에 뿌려줄 자식컴포넌트의 레이아웃을 만든다.

//전달받은 데이터를 state에 저장

useEffect(() => {
    fetch('/data/userInfoData.json')
      .then(res => res.json())
      .then(data => setUserComment(data));
  }, []);

그후 부모 컴포넌트에서 useEffect hock을 사용하여 데이터들을 동적으로 관리하기위해 State에 저장해준다.

userComment.map((data, index) => (
          <ReviewComment key={index} data={data} ARRAY={ARRAY}></ReviewComment>
        ))
      )}

map함수를 사용하여 첫번째 인자로 데이터자체를, 두번째 인자로 index를 넘겨주어서 데이터가 저장된 userComment배열안의 객체 수만큼 자동으로 index가 할당되고 그 개수만큼 컴포넌트가 렌더링 되는 구조이다. 또한 배열에 저장된 데이터 자체를 props로 자식요소에게 넘겨준다.

import styled from 'styled-components';
const ReviewComment = props => {
const { data } = props;
  return (
    <CommentBody>
      <UserProfile>
        <UserImg src={data.images}></UserImg>
        <UserInfo>
          <UserName>{data.userName}</UserName>
          <UserStarts>
            {ARRAY.map((el, index) => (
              <FaStar
                key={index}
                size="14"
                className={score[el] && 'yellowStar'}
              ></FaStar>
            ))}{' '}
            {data.score}.0
          </UserStarts>
        </UserInfo>
      </UserProfile>
      <UserComment>{data.userComment}</UserComment>
    </CommentBody>
  );
};

prpos로 전해받은 리뷰데이터를 구조분해 할당을 이용하여 props안의 data객체에 접근한다. 그리고 화면에 보여질 리뷰의 내용을 전달받은 데이터의 키값에 접근해 원하는 내용이 출력 될수있도록 코드를 수정한다.

그럼 받아온 데이터 배열의 오브젝트 갯수만큼 서로다른 내용의 리뷰들이 화면에 출력되게 된다.

2. 별점기능 추가하기

모든 리뷰에는 점수가 있듯이 별점기능을 구현해야하는데 어떻게 구현해야할지 방법도 생각나지않고 막막하기만했던게 사실이다. 하지만 구글링을통해 알아보던중 react-icons 패키지를 사용하여 구현하는 방식을 사용하였다.

2-1. 화면에 별 출력하기

//예시코드
import { FaStar } from 'react-icons/fa';

const ARRAY = [0, 1, 2, 3, 4];

우선 컴포넌트안에서 FaStar컴포넌트를 react-icons에서부터 inport해준다 그후, 인덱스가 5개인 배열을 선언해준다.

{ARRAY.map((el, index) => (
              <FaStar
                key={index}
                size="14"
              ></FaStar>
            ))}

그후 mpa메서드를 사용하여 ARRAY배열의 index개수만큼 별이 화면에 출력되게끔 만든다.

별 5개가 잘출력되는걸 확인할수있다.

2-2. 별점 기능넣기

const [score, setScore] = useState([false, false, false, false, false]);

먼저 state선언한뒤 기본값으로 인덱스가 5인 배열에 값을 false로 지정해준다. false로 하는이유는 불린값이 true일때 별의 색상이 바뀌는 로직을 구현할것이기때문이다.

 const starScore = index => {
    let star = [...score];
    for (let i = 0; i < 5; i++) {
      star[i] = i <= index ? true : false;
    }
    setScore(star);
  };

그리고 함수의 인자로 들어온 숫자의 크기만큼 기존배열의 불린값을 변경해줄 함수를 작성해준다.