리액트 네이티브 styled-components 정리

리액트 네이티브에서 styled-components를 사용하면, CSS-in-JS 방식으로 컴포넌트의 스타일을 선언할 수 있다.

# 기본 개념

설치: styled-components를 설치한다.

npm install styled-components​

사용법: styled-components를 사용하여 스타일링된 컴포넌트를 정의한다. 이 컴포넌트는 리액트 네이티브의 기본 컴포넌트를 확장하여 스타일을 적용할 수 있다.

# 사용 예시

import React from 'react';
import styled from 'styled-components/native';

// styled-components로 스타일링된 컴포넌트 정의
const StyledView = styled.View`
  background-color: lightblue;
  padding: 20px;
  border-radius: 10px;
`;

const StyledText = styled.Text`
  color: darkblue;
  font-size: 18px;
`;

const App = () => (
  <StyledView>
    <StyledText>Hello, styled-components!</StyledText>
  </StyledView>
);

export default App;

# 주요 기능

1. 템플릿 리터럴: 스타일을 정의할 때 템플릿 리터럴을 사용한다. CSS 문법과 유사하며, 스타일을 읽기 쉽게 만들어 준다.

2. props 사용: 스타일을 동적으로 변경하려면 props를 사용할 수 있다.

const StyledButton = styled.TouchableOpacity`
  background-color: ${props => props.primary ? 'blue' : 'gray'};
  padding: 10px;
  border-radius: 5px;
`;

3. 함수 사용: 스타일을 함수로 정의할 수 있어, 더 복잡한 로직을 포함할 수 있다.

const StyledView = styled.View`
  background-color: ${props => props.bgColor || 'white'};
  padding: ${props => props.padding || '10px'};
`;

4. 기본 스타일: 기본값을 설정할 수 있으며, props가 제공되지 않을 때 기본 스타일이 적용된다.

const StyledText = styled.Text`
  font-size: ${props => props.fontSize || '16px'};
  color: ${props => props.color || 'black'};
`;

5. 컴포넌트 조합: 다른 styled-component와 함께 사용할 수 있으며, 재사용성과 유지보수성을 높일 수 있다.

const Wrapper = styled.View`
  padding: 20px;
`;

const Content = styled.View`
  background-color: lightgray;
  padding: 10px;
`;

const App = () => (
  <Wrapper>
    <Content>
      <StyledText>Nested components</StyledText>
    </Content>
  </Wrapper>
);

# 성능 최적화

• 스타일시트 캐싱: styled-components는 스타일을 캐싱하여 성능을 최적화한다. 스타일을 한 번 정의하면, 이후에는 재사용된다.
• 조건부 스타일링: 스타일을 조건부로 변경할 수 있어, 특정 props나 상태에 따라 스타일을 동적으로 조정할 수 있다.

# 디버깅

• 디버그 도구: styled-components는 개발 도구와 통합되어, 컴포넌트의 스타일을 쉽게 디버깅할 수 있다. styled-components의 개발자 도구를 사용하면, 스타일과 props를 실시간으로 확인할 수 있다.