styled-components

2019-05-23

react-native 스타일링을 위해 styled-components 라이브러리를 활용하는 방법에 대해 알아보자.

react-native 프로젝트 생성

typescript를 적용한 프로젝트에서 진행합니다. RN에 typescript를 적용하는 방법은 이전 블로그를 참고하세요.

styled-components 라이브러리 설치

styled-components 라이브러리와 typescript 연동을 위한 라이브러리를 설치합니다.

npm install --save styled-components
npm install --save-dev @types/styled-components babel-plugin-styled-components
  • styled-components: styled-components 라이브러리입니다.
  • @types/styled-components: typescript에 필요한 styled-components의 타입입니다.
  • babel-plugin-styled-components: 필수는 아니지만 디버깅시 class명을 확인하기 쉽게 만들어 줍니다. babel.config.js에 아래와 같이 설정해 줍니다.
module.exports = {
  ...
  plugins: ['babel-plugin-styled-components'],
};

사용법

styled-components는 전체 스타일을 관리하기 위한 theme 기능을 제공합니다. theme을 사용하는 방법과 기본적인 사용법을 알아봅니다.

기본 사용법

  • 기본 스타일 적용
// src/App.tsx
...
import styled from 'styled-components/native';
...
const Container = styled.View`
  flex: 1;
  justify-content: center;
  align-items: center;
  background-color: #f5fcff;
`;
const MainText = styled.Text`
  font-size: 20;
  text-align: center;
  margin: 10px;
  color: red;
`;
...
interface Props {}
interface State {}
export default class App extends React.Component<Props, State> {
  render() {
    return (
      <Container>
        <MainText>Hello world</MainText>
      </Container>
    );
  }
}
  • props를 이용해 동적으로 스타일 적용
// src/App.tsx
...
import styled from 'styled-components/native';
...

interface IContainerProps {
  background: string;
}

const Container = styled.View`
  flex: 1;
  justify-content: center;
  align-items: center;
  background-color: ${(props:IContainerProps) => props.background ? props.background : 'white'};
`;
const MainText = styled.Text`
  font-size: 20;
  text-align: center;
  margin: 10px;
  color: red;
`;
...
interface Props {}
interface State {}
export default class App extends React.Component<Props, State> {
  render() {
    return (
      <Container background="red">
        <MainText>Hello world</MainText>
      </Container>
    );
  }
}

Theme 사용법

공식 사이트에는 typescript를 이용하여 theme을 사용하는 방법이 자세히 나와있습니다.

공식 사이트와 예제 사이트를 참고하면 styled-components를 사용하기 위해서는 상대 경로로 지정해야하는 문제가 있다.

그래서 우리는 공식 사이트 방식이 아닌 “props를 이용해 동적으로 스타일 적용”방법을 응용해서 사용합니다.

// src/@types/index.d.ts
interface ITheme {
  color: {
    white: string;
    black: string;
  };
  fonts: {
    normal: string;
  };
}
// src/Theme.tsx
export default {
  color: {
    white: '#FFFFFF',
    black: '#000000',
  },
  fonts: {
    normal: '14px',
  },
};
...
// src/App.tsx
import { ThemeProvider } from 'styled-components';
import styled from 'styled-components/native';
import Theme from './Theme';
...

interface IContainerPorps {
  theme?: ITheme;
}

const Container = styled.View`
  flex: 1;
  justify-content: center;
  align-items: center;
  background-color: ${(props:IContainerProps) => props.theme && props.theme.color.black};
`;
const MainText = styled.Text`
  font-size: 20;
  text-align: center;
  margin: 10px;
  color: red;
`;
...
interface Props {}
interface State {}
export default class App extends React.Component<Props, State> {
  render() {
    return (
      <ThemeProvider theme={Theme}>
        <Container>
          <MainText>Hello world</MainText>
        </Container>
      </ThemeProvider>
    );
  }
}

참고

Buy me a coffeeBuy me a coffee
Posts