[React-native] 스타일링
👩💻 스타일링
📌스타일링
✏️ 인라인 스타일링
:컴포넌트에 style속성에 객체 형태로 스타일링 지정
background-color처럼 하이픈-> backgroundColor 카멜 표기법으로 작성
리액트 네이티브에서는 자바스크립트를 이용해 스타일링 수행
✏️ 클래스 스타일링
:스타일시트에 정의된 스타일을 사용
스타일시트에 스타일을 정의하고 정의된 스타일의 이름으로 적용
-> 웹 프로그래밍에서 CSS 클래스를 이용하는 방법과 유사
✏️ 여러개 스타일 적용
:여러 개의 스타일을 적용해보자.
- 여러 개의 스타일을 적용해야 할 경우는 "배열"을 이용할 수 있음
- 뒤에 오는 스타일이 앞에 있는 스타일을 "overwrite" 함
상황에 따라 인라인 스타일과 클래스 스타일 방식 혼용 가능
✏️ 외부 스타일링 참고
: 스타일관련 객체만으로 이루어진 js파일을 생성해서 여러 스타일 객체 관리
📌 리액트 네이티브 스타일
✏️ 리액트 네이티브 스타일
: 리액트 네이티브는 다양한 스 타일 속성 제공
리액트 네이티브는 다양한 스타일 속성 제공
– 기존 웹 프로그래밍 유사 속성과 특정 플랫폼에서만 적용되는 스타일 속성도 있음
고정값을 이용해 컴포넌트의 높이를 설정하면 기기마다 화면 크기가 차이가 있기 디바이스마다 서로 다른 모습 출력됨
✏️ Flex
: "Flex"란?
- Flex : 컴포넌트 영역 크기를 비율을 사용해 상대적으로 설정
- flex가 1로 설정된 경우 자신이 차지할 수 있는 영역을 모두 차지
- 동일한 부모 컴포넌트에 있는 컴포넌트 두 개의 flex값이 각각 1과 2:
- – 영역을 1:2의 비율로 나누어 채움
- header -> height : 80, content -> flex:1, footer : 80
위처럼 height를 너무 크게 지정하면 아래 Footer가 출력되지않고, 화면 비율이 맞지 않게 된다.
이러한 경우를 없애기 위해 'Flex'를 사용한다.
style 각각에 flex로 영역 크기 비율을 정해준다.
app.js에도 View의 style을 flex:1로 지정하여 전체 화면을 채울 수 있도록 한다 !
정상 비율로 출력된다 !
📌 정렬
✏️ flexDirection
:컴포넌트가 쌓이는 방향을 설정함
- column: 세로 방향으로 정렬(기본값), 위에서 아래로
- column-reverse: 세로 방향 역순 정렬, 아래에서 위로
- row: 가로 방향으로 정렬, 오른쪽으로, 왼쪽에서 오른쪽으로
- row-reverse: 가로 방향 역순 정렬, 오른쪽에서 왼쪽으로
자기 자신이 쌓이는 방향이 아니라 자식 컴포넌트가 쌓이는 방향을 설정함
- justifyContent : flexDirection에서 결정한 방향과 동일한 방향으로 정렬
- alignItems : flexDirection에서 결정한 방향과 수직인 방향으로 정렬(– justifyContent와 반대 방향)
✏️ justifyContent
:"flexDirection"과 같은 방향으로 정렬한다
만약 "flexDirection"이 row라면
✏️ justifyContent
:"flexDirection"과 반대방향으로 정렬한다.
만약 "flexDirection"이 row라면
📌 정렬
✏️ 그림자
:그림자는 리액트 네이티브에서 플랫폼마다 다르게 적용되는 스타일 속성
📌 스타일드 컴포넌트
✏️ 스타일드 컴포넌트란?
:스타일드 컴포넌트에 대해 알아보자
✏️ 스타일드 컴포넌트 정의
:스타일드 컴포넌트에 대해 알아보자
✏️ 스타일드 컴포넌트 적용하기
:스타일드 컴포넌트를 사용해보자 !
스타일드 컴포넌트는 일반적인 컴포넌트처럼 사용할 수 있다
import styled from "styled-components/native"
:스타일드 컴포넌트를 사용하기 위해 무조건 import 해주어야한다.
const ButtonContiner = styled.TouchableOpacity .....
const Title = styled.Text .....
: 각각 아래의 Button 함수에서 사용 될 스타일 컴포넌트이며, TouchableOpacity의 역할과 Text의 역할을 한다 ( + style 추가)
=> 이렇게 Button 이라는 함수는 부모 컴포넌트의 title을 버튼 이름으로 가지는 버튼 컴포넌트로 만들어졌다.
export default Button;
:app6.js로 내보내기 위함
import styled from "styled-components/native"
:위와 같이 스타일드 컴포넌트를 사용하기 위해 무조건 import 해주어야한다.
const Container = styled.View `.....`
: View에 스타일드 컴포넌트를 적용해서 쓰기 위함
const app6 = () => {
return (
<Container> :위에서 만든 Container를 사용
<Button title = "냥냥냥"></Button>
:title을 적용해주면 Button 컴포넌트에서 사용한 props에 의해 버튼의 이름이 "냥냥냥"으로 바뀐다
<Button title = "Hanbit"></Button>
</Container>
)}
위의 코드를 styled가 아닌 기본 방법 (StyleSheet)으로 작성하면?
아래 참고
✏️ props 사용하기
:props를 사용해보자
스타일드 컴포넌트를 이용하면 ${} 표현식에서 arrow 함수 표현식을 사용해 스타일드 컴포넌트에 전달된 props를 전달받아서 처리할 수 있다. 때문에 스타일이 작성되는 부분과 컴포넌트가 사용되는 부분을 구분하여 관리가 가능하다.
아래 예제를 확인하자
윗 단원 예제에서 몇몇 코드들을 추가해주었다.
${props => props.title === "abc" ? "#9b59b6" : "#3498db"};
${}를 통해서 if 조건문을 넣음
<ButtonContainer title = {props.title}>
: 꼭 넣어줘야함. props의 title값을 알아야 Container에서 if 중첩문을 처리할 수 있음
✏️ attrs 사용하기
:attrs를 사용해보자.
- 기본 컴포넌트가 제공하는 속성을 스타일드 컴포넌트에서 정의 (placeholder, placeholderTextColor)
- 그러나 매번 필요한 속성을 값을 정의해야 함
이번에는 스타일드 컴포넌트의 attrs를 이용해서 props로 전달된 borderColor값에 따라 Input 컴포넌트의 디자인이 변경되도록 수정해보자 .
아래의 코드를 보자 !
✏️ ThemeProvider
:ThemeProvider를 사용해보자
:스타일을 정의할 때 미리 정의한 색을 사용하는 방법
- 최상위 컴포넌트로 ThemeProvider 컴포넌트를 사용해야 함
- ThemeProvider 컴포넌트의 자식 컴포넌트에서는 스타일드 컴포넌트를 이용
- 할 때 props로 theme을 전달받아 미리 정의된 색을 이용할 수 있음
ThemeProvider를 이용하여 두 개의 색을 정의해두고 사용자의 선택에 딸 theme에 알맞은 값을 설정하는 코드를 작성해보자.
