[React/ReactNative] React-Native에서 인라인 스타일(inline-style)대신 styled-component를 사용해보자!

인라인 스타일(Inline-style)?

인라인 스타일은 자바스크립트 객체의 형태로 태그 안에 스타일 코드를 집어넣는 형식인데, 예를 들면

<View style={{marginTop : 30, flex : 1}}>
	{children}
    </View>

위와 같은 형식을 인라인 스타일이라 한다.

 

허나 인라인 스타일은 자바스크립트 엔진 쪽의 스레드에서 UI 스레드 쪽으로 브리지를 경유하므로,

동적 스타일이 아닌 정적 스타일을 사용할 때에는 앱의 디스플레이 속도가 느려지는 치명적인 단점이 있다.

(이 때문에 React 공식문서에서도 인라인 스타일을 지양하도록 권고하고 있다.)

 

이러한 이유 등으로 인해 React Native에서는 StyleSheet.create로 스타일 코드를 정의하여 사용하게 되는데,

StyleSheet.create 함수를 통해 만들어진 객체는 UI 스레드쪽으로 생성되기 때문에 컴포넌트가 랜더링 되는 데 느려지는 현상을 막을 수 있다.

 

그러나 개인적으로 개발할 때 일일이 스타일 코드를 추가하여 넣어줘야하는 단점과 함께 TSX 태그가 많아질수록 이 스타일 코드가 어디를 의미하는지 알기도 힘들뿐더러 코드도 더러워지는 치명적인 단점이 있다.

 

그래서 이 단점들을 보완하면서도 css형식의 스타일링을 하기에 접근성과 사용성 모두 좋은 라이브러리를 기술해보고자 한다.

 

styled-component?

 

스타일 컴포넌트는 React 컴포넌트의 CSS 스타일링 라이브러리로서, StyleSheet.create 함수에서는 자바스크립트 문법으로 css 코드를 작성해야하는 단점과, 각 컴포넌트별로 일일이 react-native에서 임포트해주어야 하는 단점을 보완해주며 스타일 코드쪽으로 props를 보내어 동적인 스타일링을 구현할 수 있는 장점이 있는 라이브러리이다.

 

Installing

npm install styled-components

 

Caution

import styled from "styled-components/native";

styled component를 react-native 환경에서 import 할 때에는 뒤에 /native를 붙여주어야 한다!

 

Usage

새로운 .tsx 파일을 생성할 때, 나는 주로 VS Code의 사용자 코드 조각 구성 기능으로 커스텀한 템플릿을 이용하는데,

컴포넌트를 감싸는 최상위 View를 Container로 명명하여 사용한다.

여기서 styled-component의 또다른 장점!

각각의 컴포넌트들을 내 마음대로 이름지어 태깅하는데 나중에 코드를 리뷰할 때 알아보기가 너무 쉬운 장점이 있다.

 

...

return (
	<View>
    	<View>
        	<View>
            	<View>
                </View>
            </View>
        </View>
    </View>
)

위와 같은 예시를 볼 때, 한 TSX 문법 안에 View 컴포넌트가 여러개 들어갈 경우 나중에 랜더링 구문을 수정할 때 알아보기가 너무 어렵다는 단점이 있으나, styled-component는 같은 View 컴포넌트라도 개발자가 알아보기 쉬운 이름으로 지정할 수 있어 가독성이 매우 좋다는 장점이 있다.

import styled from 'styled-components/native';

const Container = styled.View`
	flex : 1;
`;
const HeaderContainer = styled.View`
	flex : 1;
`;
const FooterContainer = styled.View``;

...


return (
	<Container>
    	<HeaderContainer>
        
        </HeaderContainer>
        
        <FooterContainer>
        
        </FooterContainer>
    </Container>
)

위와 같은 형식을 보면 나중에 어떤 개발자가 보더라도 수정이 용이하고, Header쪽의 코드를 수정해야 할 경우에는 HeaderContainer 내부의 컴포넌트들만 보면 되므로 알아보기도 너무 쉽다.

 

styled Component에 대한 포스팅은 이후에 더 다뤄보도록 하자.