React Native에서의 테두리 없는 마지막 자식 요소 구현 – CSS

React Native에서 맨 마지막 요소에 테두리 없이 CSS :last-child를 구현하는 방법

React Native로 작업하고 있는데 책 목록을 렌더링할 때 하단에 테두리가 있는데 맨 마지막 책에서 테두리를 제거하는 문제를 직면할 수 있습니다. 일반 CSS에서는 :last-child 선택자를 사용하여 쉽게 이를 달성할 수 있습니다. 그러나 React Native에서는 약간 다른 접근 방식을 사용해야 합니다.

방법 1: 로직 사용

원하는 결과를 얻기 위해 컴포넌트의 render 메서드에서 어떤 로직을 사용하는 것이 간단한 방법입니다. 현재 책이 배열의 마지막 인덱스인지 확인하고 조건에 따라 다른 스타일을 적용할 수 있습니다.

return books.map((book, i) => {
  return(
    <View style={ (i === books.length - 1) ? styles.noBorderBook : styles.book} key={i}>
      <Text style={(i === books.length - 1) ? styles.noBorderBook : styles.book}>{book.title}</Text>
    </View>
  );
});

위의 코드에서는 현재 반복자 i를 책 배열의 길이에서 1을 뺀 값과 비교합니다. 만약 마지막 책이라면 styles.noBorderBook 스타일을 적용하고, 그렇지 않다면 일반적인 styles.book 스타일을 사용합니다.

방법 2: extended-stylesheet 사용

대안적인 접근 방식은 react-native-extended-stylesheet 패키지를 사용하는 것입니다. 이 패키지는 :last-child와 같은 의사 선택자를 지원합니다. 이를 통해 컴포넌트의 마지막 자식에 대한 특정한 스타일을 정의할 수 있습니다.

import EStyleSheet from 'react-native-extended-stylesheet';

const styles = EStyleSheet.create({
  book: {
    borderBottomWidth: 1,
    borderBottomColor: '#000000'
  },
  'book:last-child': {
    borderBottomWidth: 0
  }
});

return books.map((book, i) => {
  const style = EStyleSheet.child(styles, 'book', i, book.length);
  return(
    <View style={style} key={i}>
      <Text style={style}>{book.title}</Text>
    </View>
  );
});

위의 코드에서는 EStyleSheet 객체 내에 두 개의 스타일을 정의합니다. 첫 번째 스타일인 book은 하단에 테두리가 있는 책의 일반적인 스타일을 나타냅니다. 두 번째 스타일인 book:last-child는 마지막 자식에 대한 borderBottomWidth를 0으로 재정의합니다. 그런 다음 EStyleSheet.child()를 사용하여 배열의 각 책에 동적으로 스타일을 적용합니다.

결론

위에서 설명한 두 가지 방법 중 하나를 구현함으로써 React Native에서 :last-child 동작을 성공적으로 구현하고 목록의 맨 마지막 책에서 하단 테두리를 제거할 수 있습니다. 로직 기반 접근 방식을 선호하거나 react-native-extended-stylesheet 패키지를 사용하기를 선택하더라도 배열의 마지막 자식의 위치에 기반하여 스타일을 맞춤 설정할 수 있는 유연성을 가지게 됩니다.

참고 자료 : 

reactjs