React Native에서 외부 스타일과 인라인 스타일 결합하기

React Native: 외부 및 내부 스타일을 결합하는 방법?

스타일링은 React Native에서 잘 디자인되고 시각적으로 매력적인 사용자 인터페이스를 구축하기 위한 중요한 측면입니다. 경우에 따라서는 원하는 결과를 얻기 위해 외부 스타일과 내부 스타일을 결합해야 할 수도 있습니다. 특히 변수나 조건에 따라 동적으로 특정 스타일을 적용하고 싶을 때 이 기능은 유용합니다.

옵션 1: 배열 구문 수정

배열 구문을 계속 사용하려는 경우, 스타일을 결합하는 방식을 조정해야 합니다. 다음과 같이 하지 마세요:

<TouchableHighlight style={[styles.button]{ backgroundColor: '#f00'}}>

대신에 다음처럼 수정하세요:

<TouchableHighlight style={[styles.button, { backgroundColor: '#f00' }]}>

이렇게 하면 styles.button에서 정의한 외부 스타일과 인라인 스타일인 { backgroundColor: '#f00' }이 올바르게 적용됩니다.

옵션 2: 전개 구문 사용

다른 접근 방법은 전개 구문을 사용하여 외부 스타일과 내부 스타일을 병합하는 것입니다:

<TouchableHighlight style={{ ...styles.button, backgroundColor: '#f00' }}>

이 접근 방식은 styles.button 객체를 인라인 스타일과 직접 병합하여 두 스타일을 동시에 적용할 수 있도록 합니다.

옵션 3: React Native에서 올바른 방법

React Native에서 외부 및 내부 스타일을 결합하는 테스트된 추천 방법은 양쪽에 전개 구문을 사용하는 것입니다:

<TouchableHighlight style={{ ...styles.button, ...{ backgroundColor: '#f00' } }}>

이 방법은 styles.button에서 가져온 스타일과 인라인 스타일이 올바르게 병합되어 TouchableHighlight 컴포넌트에 적용되도록 보장합니다.

옵션 4: 일부 컴포넌트의 제한 해결

일부 컴포넌트에서는 스타일 속성으로 콜백 함수가 필요한 경우가 드뭅니다. 이러한 경우에는 스타일을 올바르게 병합하기 위해 사용자 정의 Button 컴포넌트를 구현할 수 있습니다:

import React, { type ComponentProps } from 'react'
import { Pressable, StyleSheet } from 'react-native'

const baseButtonStyles = StyleSheet.create({
  base: {
    // 여기에 스타일을 작성하세요...
  },
})

export const Button = ({
  children,
  style,
  ...rest
}: { children: React.ReactNode } & ComponentProps<typeof Pressable>) => {
  return (
    <Pressable
      style={
        typeof style === 'function' ? (state) => [baseButtonStyles.base, style(state)] : [baseButtonStyles.base, style]
      }
      {...rest}>
      {children}
    </Pressable>
  )
}

이 Button 컴포넌트를 사용하면 스타일을 속성으로 전달할 수 있습니다. 이 컴포넌트는 객체든 콜백 함수든 스타일을 올바르게 병합합니다.

이러한 접근 방식 중 하나를 따라 React Native에서 외부 및 내부 스타일을 쉽게 결합할 수 있습니다. 요구 사항에 가장 적합한 방법을 선택하고 React Native 프로젝트에서 스타일링의 유연성과 다양성을 즐기세요!

참고 자료 : 

reactjs