서버로부터 받은 반복적인 데이터를 map()을 이용하여 보여주려 한다.
현재 진행 중인 프로젝트가 동아리 관련 플랫폼인데, 그 중 동아리 리뷰를 조회 화면에서 사용했던 map()을 예시로 들어보겠다.
참고한 레퍼런스는 네이버 방문자 리뷰이다.
위 사진과 같이 키워드와 한줄평이 포함된 리뷰를 반복적으로 보여줄 것이다.
구현할 내용은 다음과 같다.
- clubId로 구분되는 각 동아리의 리뷰
- 각 리뷰마다 포함되어있는 키워드
여기서 map() 함수는
여러 개의 리뷰 데이터를 보여줄 때와 하나의 리뷰에서 여러 개의 키워드를 보여줄 때
총 2번 사용한다.
1. 데이터 저장할 배열 변수 선언
const [reviewData, setReviewData] = useState([]);useState를 사용하여 데이터를 담을 변수를 선언한다.
이 때, 배열을 저장해야하므로 useState([]) 와 같이 괄호 안에 대괄호를 넣어준다.
2. 데이터 불러온 후 저장
useEffect(() => {
const fetchData = async () => {
try {
const res = await customAxios.get(`v1/clubs/${clubId}/reviews`);
if (res.data.success) {
setReviewData(res.data.data.reviews);
}
} catch (error) {
console.error('Error fetching reviews:', error);
}
};
fetchData();
}, [clubId]);useEffect 훅을 사용하여 clubId가 바뀔 때 마다 데이터를 불러올 수 있도록 한다.
3. map()을 이용하여 렌더링
data.map((item) => ("UI"))
- data : 불러올 데이터 (위에서 선언한 배열 변수)
- item : map 함수 내에서 접근할 수 있는 변수 이름 -> item.key_name으로 접근
1) 리뷰 컨테이너
return (
<>
{reviewData.map((review) => (
<div key={review.reviewId} className="review_box_container">
<div className="review_box">
<div className="review_box_header">
<p>익명 {review.reviewId}</p>
<span>{review.dateTime}</span>
</div>
<div className="review_box_contents">
{/* 키워드 */}
</div>
<p>{review.content}</p>
</div>
</div>
))}
</>
);reviewData의 value는 map() 함수 내에서 review. 으로 접근이 가능하다.
즉, review.reviewId로 접근하면 reviewData의 key 중 하나인 reviewId의 value에 접근할 수 있다.
💡 여기서 주의할 점은 map() 함수의 각 자식 컴포넌트에는 고유한 key 속성을 부여해주어야 한다.
(여기서는 reviewId로 부여해주었다.)
- 리액트가 효율적으로 컴포넌트 변경 사항을 추적하고 업데이트 하기 위한 것 !
- Key 속성은 map() 함수 내부의 최상위 요소에 설정해야 한다. (그렇지 않아도 오류는 나지 않지만 원칙은 최상위 요소)
- key를 설정해주지 않으면 아래와 같은 경고 메시지가 뜬다.
2) 리뷰 키워드
{review.keywords.map((item, index) => (
<KeywordBar key={index} text={item} />
))}여기서 review.keywords의 value도 배열 형태이므로 map()함수를 이용하여 렌더링이 가능하다.
해당 value에는 key로 설정해줄 유니크한 값이 따로 없기 때문에 index를 추가하여 고유한 key 속성으로 부여해준다.
단, 각 항목의 순서가 변하지 않을 때만 index를 사용하는 것이 좋다. 만약 항목의 순서가 변경될 수 있다면 고유한 key를 생성해서 구분해주어야 한다.
👩🏻💻 결과화면 👩🏻💻
(혹시라도 제가 잘못 알고 있는 부분이 있다면 언제든지 피드백 부탁 드립니다 🤍)
