처음 배우는 리액트 네이티브 - 김범준 책 정리
4장 스타일링
4.1 스타일링
리액트 네이티브는 자바스크립트를 이용해 스타일링 가능
- 컴포넌트에 style 속성이 있어 속성에 인라인 스타일을 적용하는 방법
- 스타일시트에 정의된 스타일을 사용하는 방법
4.1.1 인라인 스타일링
이전 3장에서 간략히 살펴봤듯이 html에서는 문자열 형태로 스타일 입력하지만 리액트 네이티브에서는 객체 형태로 컴포넌트에 직접 스타일 입력 가능
카멜 표기법으로 작성
const App = () => {
return (
<View
style={{
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
}}
></View>
);
};
장점
어떤 스타일이 적용되는지 잘보임
단점
비슷한 역할을 하는 컴포넌트에 동일 코드 반복
어떤 이유로 해당 스타일이 적용되었는지 코드만으로 이해하기 어려움
4.1.2 클래스 스타일링
웹 프로그래밍에서 css 클래스를 이용하는 방식과 유사
스타일시트에 정의된 스타일을 사용하는 방법
const App = () => {
return (
<View style={styles.container}>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
},
});
장기적인 측면에서 클래스 스타일을 사용하는 것이 관리가 용이함
4.1.3 여러개의 스타일 적용
여러 개의 스타일을 적용해야 할 경우는 배열을 이용하여 style 속성에 여러 스타일을 적용할 수 있음
const App = () => {
return (
<View style={styles.container}>
<Text style={[styles.text, styles.error]}>Error</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
},
text: {
fontSize: 26,
fontWeight: '600',
color: 'black',
},
error: {
fontWeight: '400',
color: 'red',
},
});
주의할 점
배열 스타일의 순서에 주의
뒤에오는 스타일이 앞에 있는 스타일을 덮음
- [styles.text, styles.error]
- [styles.error, styles.text]
두 가지가 다르게 나타나므로 주의
const App = () => {
return (
<View style={styles.container}>
<Text style={[styles.text, styles.error, {color: 'green'}]}>Green Error</Text>
</View>
);
};이런 식으로 배열안에 인라인 스타일과 클래스 스타일 방식을 혼용해서 사용할 수 도 있음
4.1.4 외부 스타일 이용하기
외부 파일에 스타일을 정의하고 여러 개의 파일에서 스타일을 공통으로 사용하는 경우
import { StyleSheet } from 'react-native';
export const viewStyles = StyleSheet. create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
},
});
export const textStyles = StyleSheet.create({
text: {
fontSize: 26,
fontWeight: '600',
color: 'black',
},
error: {
fontWeight: '400',
color: 'red',
},
});
두 개의 스타일 시트 작성하고 모두 외부에서 사용할 수 있도록 export
import { viewStyles, textStyles } from './styles';
const App = () => {
return (
<View style={viewStyles.container}>
<Text style={[textStyles.text, textStyles.error, {color: 'green'}]}>Green Error</Text>
</View>
);
};다른 파일에서 import 하여 사용하면 됨
4.2 리액트 네이티브 스타일
리액트 네이티브에서 자주 사용되는 중요한 스타일 속성들
4.2.1 flex와 범위
flex는 값으로 숫자를 받으며 값이 0일 때는 설정된 width와 height 값에 따라 크기가 결정, 양수인 경우 flex 값에 비례하여 크기가 조정
const styles = Stylesheet.create({
header: {
flex: 1,
},
contents: {
flex: 2,
},
footer: {
flex: 1,
},
});
이렇게 작성할 경우 화면 전체를 1:2:1의 비율로 나누어 채우게 됨
header와 footer의 height을 80으로 고정하고 싶다면 다음과 같이 작성
const styles = Stylesheet.create({
header: {
height: 80,
},
contents: {
flex: 1,
height: 640,
},
footer: {
height: 80,
},
});
이렇게 할 경우 Contents 컴포넌트가 나머지 부분을 모두 차지하게 됨.
4.2.2 정렬
flexDirection
- column: 세로 방향 정렬 (기본값)
- column-reverse: 세로 방향 역순 정렬
- row: 가로 방향 정렬
- row-reverse: 가로 방향 역순 정렬
flexDirection은 자식 컴포넌트가 쌓이는 방향임
justifyContent
flexDirection의 방향과 동일한 방향축 정렬하는 속성
- flex-start
- flex-end
- center
- space-between
- space-around
- space-evenly
alignItems
flexDirection의 방향과 수직이 되는 방향축 정렬하는 속성
- flex-start
- flex-end
- center
- stretch
- baseline
4.2.3 그림자
리액트 네이티브에서 그림자와 관련된 스타일 속성 네가지
- shadowColor
- shadowOffset: width, heigh 지정하여 그림자 거리 설정
- shadowOpacity
- shadowRadius: 흐림 반경
iOS 에서만 적용
- elevation: 안드로이드 그림자 속성
이렇게 각 플랫폼마다 다를 경우에는 Platform 모듈을 이용할 수 있음
4.3 스타일드 컴포넌트
css 에서 사용하던 것과 차이가 있어서 불편함 이런 점을 스타일드 컴포넌트로 해결 가능
- 스타일드 컴포넌트: https://styled-components.com/
4.3.1 스타일드 컴포넌트 사용법
import styled from 'styled-components/native';
const Title = styled.h1`
font-size: 1.5em;
text-align: center;
color: #BF4F74;
`;
styled.[컴포넌트 이름] 뒤에 백틱(`)을 사용하여 만든 문자열을 붙이고 그 안에 스타일을 지정하면 됨.
태그드 템플릿 리터럴(tagged template literals) 라고 함.
import styled from 'styled-components/native';
const whiteText = css`
color: #fff;
font-size: 14px;
`;
const BoldText = styled.Text`
${whiteText}
font-size: 14px;
`;
css를 이용하여 재사용 가능한 코드 관리 가능
import styled from 'styled-components/native';
const StyledText = styled.Text`
font-size: 14px;
`;
const ErrorText = styled(StyledText)`
color: red;
`;
완성된 컴포넌트를 상속받아 이용할 수 있음. 상속 받아 새로운 컴포넌트를 만들 때 이름을 styled(상속 컴포넌트 이름) 으로 소괄호로 감싸야 함.
4.3.2 스타일 적용하기
import styled from 'styled-components/native';
const ButtonContainer = styled.TouchableOpacity`
background-color: #fff;
`;
const Title = styled.Text`
color: red;
font-size: 20px;
`;
const Button = props => {
return (
<ButtonContainer>
<Title>{props.title}</Title>
</ButtonContainer>
);
};
export default Button;
TouchableOpacity 컴포넌트에 스타일이 적용된 ButtonContainer 컴포넌트를 새로 만드는 방식으로 여러 컴포넌트를 만들고 버튼 컴포넌트를 만듬
다른 파일에서 이 버튼 컴포넌트를 사용할 수 있음.
4.3.3 props 사용하기
기존 방식으로 스타일시트 사용하면 스타일시트 내에서 props에 접근할 수 없음
스타일드 컴포넌트에서는 스타일을 작성하는 백틱 안에서 props에 접근할 수 있는 장점이 있음
4.3.4 attrs 사용하기
스타일드 컴포넌트에서 속성을 설정할 때 attrs를 사용할 수있음
const StyledInput = styled.TextInput.attrs(props => ({
placeholder: 'Enter a text...',
placeholderTextColor: props.borderColor,
}))`
border-color: ${props => props.borderColor};
`;
const Input = props => {
return <StyledInput borderColor={props.borderColor} />;
};4.3.5 ThemeProvider
스타일드 컴포넌트의 ThemeProvider는 Context API를 활용해 미리 정의한 값들을 사용할 수 있도록 props로 전달함
src/theme.js
export const theme = {
purple: '#9b59b6',
blue: '#3498db',
};src/App.js
import styled, { ThemeProvider } from 'styled-components/native';
import { theme } from './theme';
const App = () => {
return (
<ThemeProvider theme={theme}>
<Container> ... </Container>
</ThemeProvider>
);
};Button 컴포넌트에서 스타일을 정의할 때 props로 전달되는 theme을 이용할 수 있음
src/components/Button.js
const ButtonContainer = styled.TouchableOpacity`
background-color: ${props =>
props.title === 'mk' ? props.theme.blue : props.theme.purple};ThemeProvider를 이용하여 미리 다크모드와 라이트모드를 만들어두고 애플리케이션 색 테마를 변경할 수 있음
