[리액트 네이티브 스타일링] flex 정렬, 스타일드 컴포넌트(styled-components), ThemeProvider

리액트 네이티브 스타일링은 웹 프로그램의 CSS 문법과 약간의 차이가 있다.

 

먼저 프로젝트를 생성해준다.

expo init react-native-style

 

리액트 네이티브는 자바스크립트를 이용해 스타일링이 가능함.

style 컴포넌트 속성이 있고, 인라인 스타일링 적용 or 스타일시트 사용 2가지 방법이 있다.

 

🤍스타일링

 

1. 인라인 스타일링

 

인라인 스타일링은 HTML 방식처럼 컴포넌트에 직접 스타일을 입력하는 방식이다.

웹프로그래밍 방식과 유사하지만,

위의 Text 컴포넌트처럼 비슷한 역할을 하는 컴포넌트에 중복 코드가 발생한다는 단점이 있다.

2. 클래스 스타일링

 

클래스 스타일링은 스타일시트(StyleSheet)에 정의된 스타일을 사용하는 방법이다,

위의 인라인 스타일링 방식보다 코드가 간결해진다.

 

🤍리액트 네이티브 스타일 속성

 

1. flex와 범위

 

폭과 높이는 width와 height로 나타낼 수 있는데, Header, Footer를 일정한 높이로 지정하고 Contents 컴포넌트가 나머지 영역을 차지하도록 구성하고 싶을 때 flex를 활용할 수 있다.

 

먼저 Layout.js를 작성해 주고

App.js에서 Header, Footer, Contents 3개의 컴포넌트를 사용하도록 수정하면

아래와 같은 실행 화면이 나온다.

(내 핸드폰은 아이폰 12프로 기준이고) 테스트 기기의 화면 크기가 다를 경우 공백이 커지는 등 다른 화면이 나타날 수 있다. 이때, flex를 통해 고정값을 이용하면 기기마다 화면의 크기 차이로 다른 모습이 나오는 문제점을 해결할 수 있다.

✅ flex 적용 모습!!

 

2. 정렬

 

✅flexDirection : 컴포넌트가 쌓이는 방향을 변경할 수 있음.

• column : 세로 방향으로 정렬(기본값)
• column-reverse : 세로 방향 역순 정렬
• row : 가로 방향으로 정렬
• row-reverse : 가로 방향 역순 정렬

✅justifyContent, alignItems : 컴포넌트를 배치할 방향을 결정한 후 방향에 따라 정렬하는 방식을 결정

• flex-start : 시작점에서부터 정렬(기본값)
• flex-end : 끝에서부터 정렬
• center : 중앙 정렬
• space-between : 컴포넌트 사이 공간을 동일하게 만들어서 정렬
• space-around : 컴포넌트 각각의 주변 공간을 동일하게 만들어서 정렬
• space-evenly : 컴포넌트 사이와 양 끝에 동일한 공간을 만들어서 정렬

 

• flex -start : 시작점에서부터 정렬(기본값)
• flex-end : 끝에서부터 정렬
• center : 중앙 정렬
• stretch : alignItems의 방향으로 컴포넌트 확장
• baseline : 컴포넌트 내부의 텍스트(text) 베이스라인(baseline)을 기준으로 정렬

 

3. 그림자

• shadowColor : 그림자 색 설정
• shadowOffset : width와 height 값을 지정하여 그림자 거리 설정
• shadowOpacity : 그림자 불투명도 설정
• shadowRadius : 그림자 흐림 반경 설정

=>iOS에만 적용됨, Android에서는 elevation이라는 속성으로 그림자 표현 가능.

 

ShadowBox.js 작성

✅Platform 모듈을 이용해 각 플랫폼마다 다른 코드가 적용되도록 코드 작성

완성된 ShadowBox 컴포넌트를 App 컴포넌트에서 사용해 보면

아래와 같은 그림자가 나타난다.

 

🤍스타일드(styled) 컴포넌트

스타일드 컴포넌트는 자바스크립트 파일 안에 스타일을 작성하는 CSS-in-JS 라이브러리임.

npm install styled-components

💡비주얼 스튜디오 코드에서 styled-components 자동완성을 사용하려면 아래 확장 프로그램을 설치해 주면 된다.

(나만 안 되는 건지...자동완성이 안 되어서 찾아보고 설치했다. 책에는 안 나와있음)

TouchableOpacity 컴포넌트에 스타일이 적용된 ButtonContainer라는 이름의 컴포넌트를 생성.

 

스타일드 컴포넌트(styled-components)를 사용하면 역할에 맞는 이름을 지정할 수 있는 장점이 있다.

App 컴포넌트에서 사용하는 View 컴포넌트 수정

실행 화면

✅props 사용하기

Button 컴포넌트에서 props로 전달되는 title의 값이 특정 조건을 만족할 경우 바탕색을 다르게 표현하고 싶을 때 사용.

스타일드 컴포넌트에서는 스타일을 작성하는 백틱 안에서 props에 접근 가능하다는 장점을 이용해 스타일을 작성하는 곳에서 조건에 따라 스타일을 변경할 수 있다.

실행 화면

✅ThemeProvider 사용하기

스타일드 컴포넌트의 ThemeProvider는 Context API를 활용해 애플리케이션 전체에서 스타일드 컴포넌트를 이용할 때 미리 정의한 값을 사용할 수 있도록 props로 전달한다.

 

theme.js에 버튼 색을 정의해 두고

Button 컴포넌트에서 스타일을 정의할 때 props로 전달되는 theme를 이용하도록 수정

useState를 이용해 상태를 관리할 isDark, 상태를 변경할 setIsDark 함수를 만들고 리액트 네이티브의 Switch 컴포넌트를 활용해 isDark의 상태를 변경할 수 있도록 화면 구성.

ThemeProvider 컴포넌트의 theme 속성에는 isDark 상태에 따라 theme.js 파일에 정의된 darkTheme or lightTheme 가 적용되도록 구현.

실행 화면