Notice
Recent Posts
Recent Comments
Link
«   2024/03   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
Archives
Today
Total
관리 메뉴

차근차근

[React-Native] (5) 스타일 본문

대학교/FE

[React-Native] (5) 스타일

SWKo 2020. 3. 14. 02:39

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와 비슷하게 동작하지만, 리액트 네이티브는 다른 구조와 방식으로 스타일을 다룬다.

'대학교 > FE' 카테고리의 다른 글

[React Hooks] Hooks (1)  (0) 2020.03.21
[React-Native] (6) 플랫폼 API  (0) 2020.03.15
[React-Native] (4) 모바일 컴포넌트  (0) 2020.03.11
[React-Native] (3) 애플리케이션 만들기  (0) 2020.03.10
[Redux] Redux를 이용한 CRUD  (0) 2020.03.08
Comments