[React-Native] (5) 스타일

0. 스타일의 선언과 조작

• 리액트 네이티브는 모든 스타일이 자바스크립트 안에 존재하고 명시적으로 컴포넌트에 스타일 객체를 연결해야 한다.
• 리액트 네이티브에서는 스타일시트 대신에 자바스크립 기반의 스타일 객체를 사용한다.
• 먼저, 인라인 스타일을 사용할 수 있다.
• 인라인 스타일이 최선의 방법은 아니지만 문법적으로는 가장 간단하게 리액트 네이티브의 컴포넌트에 스타일을 적용하는 방법이다.
• 약식으로 간단히 스타일에 변화를 줄 때 쓴다.

• 많이 쓰는 방식은 StyleSheet.create방식이다.
  • 반복적인 객체 할당을 줄여 성능적인 이점이 있다. 코드를 명확하게 구조화할 수도 있다.
  • 한번 생성된 스타일은 변경할 수 없다(immutable).
• 두 개 이상의 스타일을 합치고 싶을 때 어떻게 해야 할까?
  • style속성은 스타일 객체로 구성된 배열로 지정할 수 있다. 게다가 인라인 스타일도 추가할 수 있다.

---

1. 구조화 및 상속

• 스타일을 어떻게 구조화해야 할까?
• 스타일 객체 내보내기
  • 스타일 코드가 더 복잡해지면 컴포넌트의 자바스크립트 파일에서 스타일을 분리하고 싶을 것이다.
  • 일반적인 해결 방법은 컴포넌트마다 구분된 폴더를 갖는 것이다.
• 스타일을 props로 전달하기
  • 스타일은 컴포넌트의 props로 전달할 수 있다.
  • 이 패턴은 확장 가능한 컴포넌트를 만들 때 사용할 수 있따.
  • 부모 컴포넌트가 해당 컴포넌트를 좀 더 효과적으로 다루고 스타일을 지정할 수 있게 된다.
• 스타일의 재사용과 공유
  • 대개 스타일을 재사용하기보다 스타일이 적용된 컴포넌트를 재사용하게 된다.
  • 컴포넌트와 스타일을 별도의 디렉터리로 구분하면 사용 목적에 따라 스타일 파일을 명확히 구분할 수 있다.
  • 공유하여 재상요 하게 되는 스타일에는 색상 팔레트, 폰트, 표준 마진과 패딩 등이 있다.
• 구조화하는 방법은 다양하며 하나의 정답만 존재하는 것은 아니다.

---

2. 위치 잡기 및 레이아웃 디자인하기

• 리액트 네이티브로 스타일을 적용할 때 CSS와 가장 큰 차이점은 위치 지정 방법이다.
• CSS는 다양한 방법이 있는 반면 리액트 네이티브의 위치 지정 방법은 소수 정예이다.
• flexbox와 절대 위치 지정이 핵심이다. 여기에 margin이나 padding과 같은 친숙한 속성을 함께 사용한다.
• Flexbox를 이용한 레이아웃
  • Flexbox는 CSS3의 레이아웃 모드이다. 리액트 네이티브는 Flexbox에 상당히 의존적이다.
  • 리액트 네이티브에서는 다음과 같은 flexbox속성을 사용할 수 있다.
    • flex
    • flexDirection
    • flexWrap
    • alignSelf
    • alignItems
  • 그리고 다음과 같은 속성은 레이아웃과 밀접한 관계가 있다.
    • height
    • width
    • margin
    • border
    • padding
• flexbox의 핵심은 가변적인 사이즈의 엘리먼트가 주어지더라도 레이아웃을 예측할 수 있게 하는 것이다.
• 다양한 스크린 방향(orientaition)을 고려해야 하는 모바일 화면을 만들 때 flexbox는 유용할 수 밖에 없다.
• alignItems 속성은 교차축(cross-axis)에서의 위치를 결정한다.
• 교차축이란 flexDirection과 직교하는 방향을 말한다.

 

• 절대적 위치 지정도 가능하다.
  • position: "absolute"
  • absolute로 지정되면 부모의 위치에 상대적인 좌표로 위치가 잡힌다.
  • 절대적 위치 지정은 상당히 유용하게 쓰인다.
  • 예를 들어 스마트폰의 상태바 바로 아래에 위치할 컨테이너 뷰를 만들고 싶을때 같은 경우이다.
• 스타일을 다루는 다른 방법들은 대부분 CSS와 비슷하게 동작하지만, 리액트 네이티브는 다른 구조와 방식으로 스타일을 다룬다.