[2주차] 4장 스타일링

---

🎨 스타일링

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

---

방법1. 인라인 스타일링

: 컴포넌트에 직접 스타일 입력

HTML의 인라인 스타일링과 비슷,
but 객체 형태로 전달해야함 (HTML은 문자열 형태로 스타일 입력)

• 장점 :
  어떤 스타일이 적용되는지 잘 보인다
• 단점 :
  비슷한 역할을 하는 컴포넌트에 동일한 코드 반복
  해당 스타일 적용 이유를 명확하게 이해하기 어려움

<Text
style={{
       flex: 1,
       backgroundColor: "#fff",
      }}
        >
          내용
</Text>

---

방법2. 클래스 스타일링

: 스타일 시트에 스타일을 정의하고 컴포넌트에는 정의된 스타일의 이름으로 적용

= CSS 클래스를 사용하는 방법과 유사

 

• 장점 : 전체적인 스타일을 관리하기가 쉽다

const App = () => {
  return (
      <Text style={styles.text}>Inline Styling - Text</Text>
  );
};

const styles = StyleSheet.create({
  text: {
    padding: 10,
    fontSize: 26,
    fontWeight: "600",
    color: "black",
  },
});

---

한번에 두가지 스타일링 적용하기

• 클래스스타일링 인라인스타일링 동시에

<Text style={(textStyles.text, { color: "green" })}> Inline Styling - Text </Text>

• 클래스스타일링 두개 이상 동시에 적용

<Text style={[textStyles.text, textStyles.error]}> Inline Styling - Error </Text>

 

간단하게 화면을 확인하는 상황 -> 인라인스타일 ㄱㅊ
장기적으로는 -> 클래스 스타일링이 나음

 

---

🌷 스타일 속성들

---

1. flex

: width 나 height 와 달리 비율로 크기를 결정

• 숫자를 값으로 받음 (단위가 없음)
• 값이 0일때 -> width height 따라 결정
• 값이 양수일때 -> flex 값에 비례하여 크기 조정

---

2. 정렬

flexDierection

: 자식 컴포넌트가 쌓이는 방향을 변경

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

 

justifyComponent

: flexDirection 에서 결정한 방향과 동일한 방향으로 정렬

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

 

alignItems

: flexDirection 에서 결정한 방향과 수작인 방향으로 정렬

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

---

3. 그림자

iOS

• shadowColor : 그림자의 색
• shadowOffset : (width 와 height 이용) 그림자 거리
• shadowOpacity : 그림자의 불투명도
• shadowRadius : 그림자의 흐림 반경

android

• elevation : 그림자의 고도

---

platform

: 플랫폼 (iOS, android) 별로 다른 코드가 적용되게 하는 리액트 모듈
https://reactnative.dev/docs/platform-specific-code#platform-module

...Platform.select({
      ios: {
        shadowColor: "#000",
        shadowOffset: {
          width: 10,
          height: 10,
        },
        shadowOpacity: 0.5,
        shadowRadius: 10,
      },
      android: {
        elevation: 20,
      },
    }),

 

---

🖌 스타일드 컴포넌트

: 자바스크립트 파일 안에 스타일을 작성하는 CSS-in-JS 라이브러리
= 스타일이 적용된 컴포넌트

---

https://styled-components.com/

styled-components

 

• 카멜표기법이 아닌 하이픈 사용 가능
• CSS 속성과 이름이 같을때 타입과 단위도 통일
• 입력값에 맞춰 타입이 달라지는 경우가 없다
• 재사용 가능한 컴포넌트들을 관리할 수 있다
• Tagged Template Literals

---

설치

npm install styled-components

---

기본문법

import styled from 'styled-components/native'; 

const 이름 = styled.컴포넌트이름`
    내용
`

ex

const TextComponent = styled.Text`
    color: #fff;
`

---

이미 존재하는 컴포넌트 재사용

const 컴포넌트이름 = styled(상속받을컴포넌트이름)`
    내용
`

const NameTextComponent = styled(TextComponent)`
    color: blue;
`

---

props 사용하기

const 이름 = styled.컴포넌트이름`
  속성: ${(props) =>
    조건 ? 참일때의 속성값 : 거짓일때의 속성값};
`;

ex

const ButtonContainer = styled.TouchableOpacity`
  background-color: ${(props) =>
    props.title === "Seondal" ? "#3498db" : "#9b59b6"};
`;

---

attrs

• 스타일을 작성하는 곳에서 컴포넌트의 속성 설정 가능
• 속성 설정할 때 전달된 props 사용 가능 -> props 따라 속성 설정

const 이름 = styled.컴포넌트이름.attrs((props) => ({
  속성: props.props요소,
}))`
  속성1: ${(props) => props.props요소};
  속성2: 속성값;
`;

---

ThemeProvider

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

앱개발이나 웹개발에서 나이트모드 등을 설정할때 사용하면 좋을듯

 

---