[React] array data 마지막 자식 요소에 border bottom line css 추가하는 방법

Intro

안녕하세요. 이번 시간에는 리액트에서 array 데이터의 마지막 자식 요소에 border bottom line 추가하는 방법에 대해 알아보겠습니다. 

 

How to solve the problem

1. map 함수를 사용하여  데이터 배열의 길이를 구해줍니다. 

const arrayLength = array.length;

 

2. map 함수에서 현재 데이터 요소의 인덱스 값을 받아 옵니다.

array.map((item, index) => {
  //...
})

 

3. 인덱스 값이 배열 길이보다 1 작은 경우에는 border bottom을 추가합니다

array.map((item, index) => {
  const isLastItem = index === arrayLength - 1;
  
  return (
    <div key={index} style={{ borderBottom: isLastItem ? '1px solid red' : 'none' }}>
      {item}
    </div>
  );
})

 

위 코드에서 isLastItem 은 현재 데이터 요소가 마지막 요소인지를 확인하는 변수입니다. borderBottom 스타일 속성으로 마지막 요소인 경우에만 1px solid red 을 주어 하단 라인을 추가하고, 그 외의 경우에는 none을 주어 라인이 나타나지 않도록 했습니다.

 

이 방법을 사용하면 배열의 마지막 요소에만 border bottom을 추가할 수 있습니다:)