스타일링
1. 인라인 스타일링
: 컴포넌트에 직접 스타일 입력하는 방식
: 객체 형태로 전달 (HTML 과의 차이점)
직접 인라인 스타일링으로 텍스트 스타일을 조정해보겠다.
첫번째 텍스트에는 글자 색을 black으로 굵기도 600으로 설정했고,
두번째 텍스트에는 글자 색을 red, 굵기는 400으로 설정한 결과
각각의 텍스트에 서로 다른 스타일이 적용된 것을 확인할 수 있었다.
이와 같이 인라인 스타일링은
어떤 스타일링이 적용되는지 직관적으로 잘 보인다는 장점이 있다.
import React from 'react'
import { View, Text } from 'react-native'
const InlineStyle = () => {
return (
<View
style={{
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
}}
>
<Text
style={{
padding: 10,
fontSize: 26,
fontWeight: '600',
color: 'black',
}}
>Inline Styling - Text</Text>
<Text
style={{
padding: 10,
fontSize: 26,
fontWeight: '400',
color: 'red',
}}
>Inline Styling - Error</Text>
</View>
)
}
export default InlineStyle
2. 클래스 스타일링
: 스타일시트에 정의된 스타일 사용
: 클래스로 스타일 정의
위에서 인라인 스타일링으로 적용한 텍스트 스타일을 이번에는 StyleSheet를 활용해
클래스로 스타일을 지정한 후 실행해보았다.
그 결과 인라인 스타일링과 동일하게 클래스 스타일링도 텍스트에 의도한 스타일이 잘 적용되는 것을 확인할 수 있었다.
클래스 스타일링은 코드가 깔끔하며 전체적인 스타일을 관리하기 더 쉽다는 장점이 있다.
import React from 'react'
import { StyleSheet, View, Text } from 'react-native'
const ClassStyle = () => {
return (
<View style={styles.container}>
<Text style={styles.text}>Class Styling - Text</Text>
<Text style={styles.error}>Class Styling - Error</Text>
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
text: {
padding: 10,
fontSize: 26,
fontWeight: '600',
color: 'black',
},
error: {
padding: 10,
fontSize: 26,
fontWeight: '400',
color: 'red',
}
})
export default ClassStyle
3. 여러개 스타일 적용
여러개의 스타일을 적용해야할 때는 배열을 이용해 style 속성에 여러개 스타일을 적용하면 된다.
이는 중복된 코드 사용을 줄이고 공통 스타일 관리가 편해진다는 장점이 있다.
다만, 주의해야할 점은
뒤에 오는 스타일이 앞의 스타일을 덮는다는 점을 기억하고 있어야 한다.
<Text style={[styles.text, styles.error]}>Inline Styling - Error</Text>
이외에도
클래스 스타일과 인라인 스타일 혼용도 가능하다.
마찬가지로 배열을 사용해 스타일을 적용하면 된다.
<Text style={[styles.text, { color: 'green' }]}>
Inline Styling - Text
</Text>
4. 외부 스타일 적용
외부에 스타일을 적용 후 사용하는 방법이다.
styles.js 파일을 생성하고 모든 스타일을 정의한 후 스타일을 사용하고자 하는 파일에
해당 스타일을 불러오기만 하면된다.
import { viewStyles, textstyles } from './styles’;<Text style={[textstyles.text, { color: 'green' }]}>
Inline Styling - Text
</Text>
리액트 네이티브 스타일
1. flex와 범위
- width : 폭
- height : 높이
const styles = StyleSheet.create({
container: {
width: '100%',
alignltems: 'center',
justifyContent: 'center',
height: 80,
},
header: {
backgroundColor: '#f1c40f',
},
contents: {
backgroundColor: '#1abc9c',
height: 640,
},
footer: {
backgroundColor: '#3498db',
},
text: {
fontSize: 26,
}
});
고정값을 사용해서 레이아웃을 구성하면
기기의 화면 크기에 따라 의도한 레이아웃이 보이지 않을 수 있다.
현재 나의 가상환경에서도 설정한 화면이 공백뿐만 아니라 크기를 넘어가는 것을 확인할 수 있다.
이때 flex를 사용해 문제를 해결할 수 있다.
- flex : 비율로 크기 설정 (0 = width, height 값에 따름 / 양수 = flex값에 비례 / 1 = 차지할 수 있는 모든 영역 차지)
레이아웃을 1:2:1로 만들기 위해 flex값을 1, 2, 1로 준 결과 기기 상관없이 화면을 채우는 레이아웃이 만들어졌다.
header, footer의 크기를 80으로 고정하고 싶다면 header, footer에만 고정 값을 주고 나머지 레이아웃을
flex 비율로 설정하면 된다.
2. 정렬
1️⃣ flexDirection
자식 컴포넌트가 쌓이는 방향 조정
- column： 세로방향으로정렬（기본값）
- column-reverse： 세로 방향 역순 정렬
- row: 가로 방향으로 정렬
- row-reverse: 가로 방향 역순 정렬
2️⃣ justifyContent
flexDirection 방향과 동일한 방향으로 정렬
- flex-start： 시작점에서부터 정렬（기본값）
- flex-end： 끝에서부터정렬
- center： 중앙정렬
- space-between: 컴포넌트 사이의 공간을 동일하게 만들어서 정렬
- space-around: 컴포넌트 각각의 주변 공간을 동일하게 만들어서 정렬
- space-evenly: 컴포넌트 사이와 양 끝에 동일한 공간을 만들어서 정렬
3️⃣ alignltems
flexDirection 방향과 수직 방향으로 정렬
- flex-start： 시작점에서부터 정렬（기본값）
- flex-end： 끝에서부터정렬
- center： 중앙정렬
- stretch: align Items 의 방향으로 컴포넌트 확장
- baseline： 컴포넌트 내부의 텍스트(text) 베이스라인(baseline)을 기준으로정렬
3. 그림자
- shadowColor： 그림자 색 설정
- shadowoffset： width와height값을 지정하여 그림자거리 설정
- shadowOpacity ： 그림자의 불투명도 설정
- shadowRadius： 그림자의 흐림 반경 설정
위 속성들은 iOS에만 적용되는 속성들이다.
안드로이드에서는 elevation 속성을 사용해야한다.
각 플랫폼마다 적용 여부가 다른 속성이 있기때문에 리액트 네이티브에서 제공하는
Platform 모듈을 이용해 명확하게 작성하는 것이 좋다.
const styles = StyleSheet.create({
shadow: {
backgroundcolor: '#fff',
width: 200,
height: 200,
...Platform.select({
ios: {
shadowColor: '#000',
shadowoffset: {
width: 10,
height: 10,
},
shadowOpacity: 0.5,
shadowRadius: 10,
},
android: {
elevation: 20,
}
}),
},
});
스타일드 컴포넌트
자바스크립트 파일 안에 스타일을 작성하는 CSS-in-JS 라이브러리로 설치가 필요하다.
npm install styled-components
스타일드 컴포넌트는 styled.[컴포넌트 이름]`스타일` 형태로 정의하며
반드시 존재하는 컴포넌트 이름을 지정해야한다.
css를 이용해 재사용 가능한 코드를 관리할 수 있다는 장점이 있다.
import styled from 'styled-components';
const MyTextComponent = styled.Text`
color: #fff;
`;
또한,
스타일드 컴포넌트는 완성된 컴포넌트를 상속받아 이용할 수도 있다.
const StyledText = styled.Text`
color: #000 ;
font-size: 20px;
margin: 10px;
padding: 10px;
`;
const ErrorText = styled(StyledText)`
font-weight: 600;
color: red;
`;
스타일드 컴포넌트로 지정한 컴포넌트의 스타일은 해당 역할에 맞는 지정된 이름을 통해 스타일을 적용할 수 있다.
<StyledText>StyledText</StyledText>
props, attrs 사용
1️⃣ props
Button 컴포넌트에서 props로 전달되는 title의 값이 Hanbit인 경우 바탕색 을 다르게 표현하고 싶다면
아래와 같이 조건식을 작성해주면 된다.
const Button props => {
return (
<TouchableOpacity
style={[
styles.container,
{ backgroundcolor props.title === 'Hanbit' ? '#3498db' : '#9b59b6' },
]}
>
<Text style={styles.title}>{props.title}</Text>
</TouchableOpacity>
);
};
스타일드 컴포넌트에서는 백틱 안에서 props에 접근할 수 있으므로 아래와 같이 정의한다.
const Buttoncontainer = styled.TouchableOpacity`
background-color: ${props =>
props.title === 'Hanbit' ? '#3498db' : '#9b59b6'};
border-radius: 15px;
padding: 15px 40px;
margin: 10px 0px;
justify-content: center;
`;
2️⃣ attrs
props로 전달된 값에 따라 디자인이 변경되도록 수정하는 속성
예를들어,
props로 borderColor 값을 전달하면 전달된 값을 받아서 스타일을 수정하는 역할을 한다.
const Styledlnput = styled.Textinput.attrs(props => ({
placeholder: 'Enter a text...',
placeholderTextColor: props.borderColor,
}))`
border-color: ${props => props.borderColor};
font-size: 24px;
`;
const Input = props => {
return <StyledInput borderColor={props.borderColor} />;
};
3️⃣ ThemeProvider
스타일드 컴포넌트의 ThemeProvider는 Context API를 활용해 애플리케이션 전체에서 스타일드 컴포넌트를 이용할 때 미리 정의한 값들을 사용할 수 있도록 props로 전달한다.
'공부 > ReactNative' 카테고리의 다른 글
| [ReactNative] useState, useEffect, useRef | 처음 배우는 리액트네이티브 6-1장, 6-2장, 6-3장 (0) | 2025.01.22 |
|---|---|
| [ReactNative] To-Do-List 애플리케이션 | 처음 배우는 리액트네이티브 5장 (0) | 2025.01.22 |
| [ReactNative] props, state, event | 처음 배우는 리액트네이티브 3-3장, 3-4장 (0) | 2025.01.16 |
| [ReactNative] 컴포넌트 | 처음 배우는 리액트네이티브 3-2장 (0) | 2025.01.15 |
| [ReactNative] JSX | 처음 배우는 리액트네이티브 3-1장 (0) | 2025.01.15 |