React Native 에서 styled-components 사용하기

* 들어가기 전 *

1. React에서 제공해주는 StyleSheet와 비교해서 styled-component의 장점을 소개하려고 합니다.

import React from "react";
import { View } from "react-native-web";

const styles = StyleSheet.create({
  btn:{
    flex:1,
    justifyContent:"center",
    alignItems:"center"
  }
})

export default function App() {
  <View style={styles.btn}/>
}

StyleSheet는 분명 사용하기 좋고 잘 만들어놓은 기능이지만 단점으로는 자바스크립트 문법으로 css를 작성해야 한다는 점이 있습니다.

 

예를 들면 align-items:center로 작성하면 오류가 나죠 그래서 css를 자바스크립트 문법으로 써야 하는데 자연스럽지 않다고 생각합니다.

 

따라서 이러한 점들을 보완해주는 Styled-component를 소개하려고 합니다

 

설치법

npm i styled-components

 

사용 방법 

import styled from "styled-components/native";

 

장점 

 

1. css 코드를 Native Component가 써도 스타일을 적용할 수 있습니다.

// StyleSheet 의 경우

const styles = StyleSheet.create({
  btn:{
    flex:1,
    justifyContent:"center",
    alignItems:"center"
  }
})

export default function App() {
  <View style={styles.btn}/>
}

----------------------------------

// styled 의 경우

const Btn = styled.TouchableOpacity`
  flex: 1;
  justify-content: center;
  align-items: center;
`;

export default function App() {
  <Btn />;
}

2. 컴포넌트 코드를 보았을 때 명확히 알 수 있습니다.

export default function App() {
  <View>
    <View>
      <Btn />
    </View>
    <View></View>
    <View></View>
  </View>;
}

-------------------

const Btn = styled.TouchableOpacity`
  flex: 1;
  justify-content: center;
  align-items: center;
`;

const Header= styled.View``

const Container =styled.View``

const Footer =styled.View``

const Content = styled.View``

export default function App() {
  <Container>
    <Header>
      <Btn />
    </Header>
    <Content></Content>
    <Footer></Footer>
  </Container>;
}

3. 컴포넌트를 가져올 때 import를 하지 않아도 됩니다.

import { View,Text,Touchable ,TouchableOpacity} from "react-native";
//styled 를 사용하면 임포트하지 않아도 됩니다

4. props를 통해 변수를 보낼 수 있습니다.

const Btn = styled.TouchableOpacity`
  flex: 1;
  background-color: ${(props) => (props.selected ? "red" : "blue")};
  justify-content: center;
  align-items: center;
  width: 100vw;
`;

export default function App() {
  return (
    <Container>
      <Header>
        <Btn selected={false}>
          <BtnText>GilPOP</BtnText>
        </Btn>
        <Btn selected={true}>
          <BtnText>GilPOP</BtnText>
        </Btn>
      </Header>
      <Content></Content>
      <Footer></Footer>
    </Container>
  );
}

변수에 따라서 다르게 보여주는 모습

 

 

더욱 편하게 만들어줄 기능 Theme 을 이용해 보세요

 

1. App을 ThemeProvider로 감싸줍니다.

export default function App() {
  const isDark = useColorScheme() === "dark";
  return (
    <ThemeProvider theme={isDark ? darkTheme : lightTheme}>
      <Container>
        <Header>
          <Btn>
            <BtnText>GilPOP</BtnText>
          </Btn>
        </Header>
      </Container>
    </ThemeProvider>
  );
}

 

2. styles 파일을 만들어서 사용할 색이나 폰트 사이즈, radius 값을 넣어줍니다

export const lightTheme = {
  mainBgColor: "#FFFFFF",
  textColor: "#263238",
};

export const darkTheme = {
  mainBgColor: "#263238",
  textColor: "#FFFFFF",
};

3. styled에 theme의 전역 변수를 이용합니다. ( ThemeProvider에 감싸져 있는 컴포넌트들은 전부 사용 가능합니다.)

const Btn = styled.TouchableOpacity`
  flex: 1;
  background-color: ${(props) => props.theme.mainBgColor};
  justify-content: center;
  align-items: center;
  width: 100vw;
`;

const BtnText = styled.Text`
  color: ${(props) => props.theme.textColor};
  font-size: 28px;
`;

 

응용 방법

useColorSchema()를 이용하면 사용자의 휴대폰이 dark 모드인지 light 모드인지 알 수 있습니다.

 

이를 이용해서 dark모드 , light 모드를 변경해줄 수 있습니다.

  const isDark = useColorScheme() === "dark";
  return (
    <ThemeProvider theme={isDark ? darkTheme : lightTheme}>

라이트모드

다크모드

 

이렇듯 Theme을 이용하면 동일한 코드로 다르게 표현할 수 있다는 큰 장점이 있습니다.

 

사용하면 유용한 방법들

1.vscode-styled-components extension을 설치하면 자동완성을 도와줍니다

 

2. 마찬가지로 npm install @types/styled-components @types/styled-components-react-native를 설치하면 타입 스크립트를 사용하지 않아도 자동완성을 도와줍니다.

npm install @types/styled-components @types/styled-components-react-native