[React Native] 컴포넌트 스타일링

반응형

CSS

import “./style.css”;를 작성하여 불러오는 간단한 방식으로, css를 이용하여 스타일링하는 방법이다.

CSS로 스타일링을 하면 코드가 길어지는 경우가 생기는데, 이럴 땐 SASS 또는 SCSS 등을 통해 해결할 수 있다.

Sass(syntactically awesome stylesheet)

자주 사용하는 css 전처리기 중 하나이다. css3의 확장으로 Dart기반으로 작동하며, 더 쉽게 작성하게 해주는 방식이다.

스타일 코드의 재활용성을 높여주고 코드의 가독성을 높이므로 유지보수에 도움이 된다.

확장자는 .scss와 .sass 두가지를 지원한다.

.sass

Import하기 위해서 node-sass를 설치한다.

$ yarn add node-sass

//utils.scss
@import '../../../node_modules/library/styles';
@import '~library/styles';

node_modules 디렉터리의 라이브러리를 호출해서 사용한다.

$font-stack:    Helvetica, sans-serif
$primary-color: #333
// 들여쓰기로 구분
body
  font: 100% $font-stack
  color: $primary-color

중괄호({})와 세미콜론(;)을 사용하지 않는다.

.scss

기존 css 작성법과 크게 다르지 않다.

utils파일로 분리하고 import하여 사용한다.

클래스 안에 또 다른 클래스의 스타일 적용이다.

// 변수 사용
$red: #fa5252;
$orange: #fd7e14;

// mixin 만들기 (재사용되는 스타일 블록을 함수처럼 사용 할 수 있음)
// CSS에서 사용하는 함수를 뜻한다.
@mixin square($size) {   
  $calculated: 32px * $size;
  width: $calculated;
  height: $calculated;
}
.SassComponent {
  display: flex;
  .box {
    background: red; // 일반 CSS 에서 .SassComponent .box 와 마찬가지
    cursor: pointer;
    transition: all 0.3s ease-in;
    &.red { 
      // 현재 선택자 참조(&)- 가독성이 좋아짐 
      // .red 클래스가 .box 와 함께 사용 됐을 때
      background: $red;
      @include square(1);  
      // mixin으로 선언한 것을 include로 적용
    }
    &.orange {
      background: $orange;
      @include square(2);
    } }

 

Css Module

CSS를 전역적이지 않고 지역적으로 사용할 수 있게 만들어준다.

CSS클래스의 이름을 파일마다 고유한 이름값 옵션이다.

즉, [파일 이름]_[클래스 이름]_[해시값]형태로 자동으로 만들어서 컴포넌트 스타일 클래스 이름이 중첩되는 현상을 방지해주는 기술이다.

[파일이름].module.css확장자로 파일을 저장하기만 하면 CSS Module이 적용된다.

 

반응형

 

styled-components

액트와 리액트 네이티브의 컴포넌트에 스타일 관리를 위해 사용하는 오픈 소스 라이브러리이다.

동일한 컴포넌트에서 컴포넌트 이름을 쓰듯 스타일을 지정하는 것을 styled-components라고 부른다.

CSS파일을 import 하지 않아도 CSS작업을 할 수 있다.(CSS 문법 사용)

// styled-components 라이브러리에서 import 해온 styled라는 객체를 이용합니다
// 아래와 같이 div 태그를 만들고 백틱(‘)내부에 스타일을 지정해주면 Text, Container라는 스타일드 컴포넌트를 만들 수 있습니다
import React from "react";
import styled from "styled-components";
function App() {
  return (
// Container, Text는 컴포넌트이므로 props값을 통해 전달 받은 값을 유동적으로 스타일 줄 수 있다.
 <Container>
   <StyledButton type="primary"> test Button </StyledButton>
 </Container>
  );
}

// Styled-Component로 만들어진 컴포넌트들은 스타일 상속이 가능하다.
// 기존 div태그를 이용해서 스타일 컴포넌트를 정의한다.(기존 div태그의 속성을 그대로 상속 받는다.)
// div태그는 블록단위로 묶어 정의할 때 사용한다.
// const 컴포넌트 명 = styled.속성 태그(div, span, button....등)`
//  속성 정의 `;
const Container = styled.div` 
  background-color: #f6e58d;
`;

const StyledButton = styled(Button)`
  margin: 30px;
  background-color: blue;
`;
export default App;

스타일 컴포넌트 이름은 대문자로 시작해야 한다.

tagged template literal 백틱(‘ ’)을 사용하면 타입에 상관없이 Function, Number, Array, Object 등을 전달하고 이를 실행할 수 있다.