styled-components 사용법

안녕하세요!

평소에 이쁜 UI를 보면서 어떻게 내 프로젝트에 적용할 수 있을 지 궁금하시지 않으셨나요?

리액트 네이티브에서는 일반적으로 UI 스타일링을 위해 styled-components를 사용합니다.

이번 글에서는 리액트 네이티브에서 styled-components를 어떻게 사용하는지에 대해 알아보겠습니다.

1. styled-components란?

styled-components는 JavaScript 파일 안에서 CSS를 작성할 수 있게 해주는 라이브러리로, 컴포넌트 기반 스타일링을 간편하게 구현할 수 있습니다. 

리액트 네이티브에서는 컴포넌트 스타일링을 위한 styled-components를 적극적으로 활용하여 코드의 가독성을 높일 수 있습니다.

2. styled-components 사용법

먼저, styled-components를 프로젝트에 설치합니다.

npm install styled-components
//또는
yarn add styled-components

3. 사용 예제

// Button.js


import styled from 'styled-components/native';


export const StyledButton = styled.TouchableOpacity`
  background-color: ${(props) => (props.primary ? 'blue' : 'white')};
  padding: 10px;
  margin: 5px;
`;


export const ButtonText = styled.Text`
  color: ${(props) => (props.primary ? 'white' : 'blue')};
`;

위의 예제에서는 StyledButton과 ButtonText라는 스타일드 컴포넌트를 만들었습니다. 

StyledButton은 TouchableOpacity를 감싸고 있으며, 조건에 따라 배경색과 텍스트 색상이 변경됩니다.

4. 컴포넌트에서 사용

// App.js


import React from 'react';
import { View } from 'react-native';
import { StyledButton, ButtonText } from './Button';


const App = () => {
  return (
    <View>
      <StyledButton primary>
        <ButtonText primary>Primary Button</ButtonText>
      </StyledButton>


      <StyledButton>
        <ButtonText>Secondary Button</ButtonText>
      </StyledButton>
    </View>
  );
};


export default App;

App.js에서는 StyledButton과 ButtonText를 가져와 간단하게 사용하고 있습니다. 

primary prop에 따라 스타일이 동적으로 적용되는 것을 확인할 수 있습니다.

styled-components를 사용하면 리액트 네이티브 앱의 UI를 더욱 간편하게 스타일링할 수 있습니다. 

컴포넌트 기반의 스타일링은 코드의 가독성을 향상시키고, 유지보수를 용이하게 만듭니다. 

styled-components를 활용하여 리액트 네이티브 앱을 개발할 때, 더 나은 코드 구조와 스타일링을 적용해보세요.