[React Native] styled-component 설치 및 사용 방법

React Native 환경에서 styled-components 가 사용 가능하다고 해서

설치해서 프로젝트에 활용해보았다.

 

프로젝트를 생성한 뒤 터미널을 통해 styled-components 를 생성하는 방법부터

알아보도록 하자.

---

00.  스타일드 컴포넌트 설치

npm install styled-components

react natvie에서 styled-components를 사용하기 위한 명령어이다.

위와 같이 뜨면 설치가 완료된 것이다.

01. 의존성 에러 해결 방법 (선택)

styled-components 의 경우 react-dom을 필요로 하기 때문에 react-dom이 없다면 의존성 문제가 발생할 수 있다.

npm install react-dom

해당 에러를 해결하기 위해서는 npm install react-dom 을 통해 dom을 설치한 후, 명령어를 재실행하면 된다.

react native 의 환경에서만 사용하고자 한다면 npm install styled-components/native 를 입력하여 사용하면 된다.

 

두가지 방법을 하였는데도 에러가 났다면 styled-components가 React Native 와 호환되는 버전인지 확인해보자!

---

styled-components를 설치했다면 간단하게 사용하는 방법에 대해 알아보도록 하자.

[styled-components 예제]

import React from "react";
import styled from "styled-components/native";
import TextStyle from "./TextStyle";
import { TouchableOpacity, Text, useWindowDimensions } from "react-native";


const Box = styled(TouchableOpacity)`
	background-color: ${(props) => props.bgColor || 'lightgray'}; 
  	width: ${(props) => props.width}px;
  	height: ${(props) => props.height}px;
    border-radius : 15px;
`;

function SquareBox() {

	const { width, height } = useWindowDimensions(); 

	return(
    	<Box
        width = {width*0.9}
        height = {height*0.08} 
        >
        	 <TextStyle text="test" weight="bold" size="xsmall" />
        </Box>
    )
}

스타일트 컴포넌트를 설치하고 사용하기 위해서는 상단에 import styled from "styeld-components/native"; 가

기재되어 있어야 한다. TextStyle 의 경우 다른 컴포넌트에서 만든 것을 Import 하여 불러왔다.

 

+) 여기서 사용한 useWindowDimensions()란?

React Native 에서 현재 화면 크기를 가져오는 방법으로 화면 크기에 따라 동적으로 스타일 조정이 가능하다.

Dimensions.get("window")와 달리 화면 크기가 변할 때 자동으로 업데이터 되어 useState나 useEffect 없이 실시간으로

반응형 UI 적용이 가능하다.

 

React 와 달리 vh, vw 가 없어서 동적으로 조정하기 위해 찾아낸 방법이다.

해당 예제의 경우, 너비는 전체 화면의 90%, 높이는 전체 화면의 8%로 설정하였다.

위처럼 작성할 경우, 어떤 기기에서도 적절한 크기의 버튼이 나오게 된다.

 

useWindowDimensions()에 대하여 자세한건 다음에 알아보도록 하겠다.

위 예제에 따라 완성된 모양이다. 

---

코드 중복을 줄이고 컴포넌트 기반 스타일링을 통해 코드의 유지보수를 쉽게 하기 위해 styled-components를 설치하여

사용해보았다. 사용해보니 해당 CSS를 다른 파일에서 찾는 것이 아니라 컴포넌트 내부에서 확인할 수 있어 수정하기에 용이했으며,

Props에 따라 스타일을 변경할 수 있어 동적으로 제어가 가능했다.