study: 리네다기 | 2장 - 컴포넌트

Lumpen·2023년 4월 9일

reactnative study

Study

목록 보기

35/92

컴포넌트란 구성요소 라는 뜻으로
프론트엔드에서의 컴포넌트란 유저 인터페이스를 구성하는 요소로 이해하면 된다
단순 UI 뿐 아니라 내부 로직까지 포함하는 개념이다

리액트 네이티브의 컴포넌트

View: 웹에서 div 같이 영역의 레이아웃 및 스타일 담당
Text: 리액트 네이티브에서 텍스트 작성시 글을 감싸줘야만 하는 컴포넌트
SafeAreaView: iPhoneX 이상 기종의 디스플레이에서 노치 영역, 하단 컨트롤러 영역을 차단해주는 컴포넌트

2018년 이후에는 주로 함수 컴포넌트로 컴포넌트를 작성한다
각 컴포넌트는 하나의 모듈 단위로 import, export 를 하여 구성

가상 기기가 작동중이어도 Metro 가 실행중이 아니라면 코드가 즉시 반영되지 않는다

해당 책에서는 function 키워드로 선언하는 방식을 선호한다
리액트 공식 매뉴얼과 앤드류 클락, 댄 아브라모프 또한 function 키워드로 함수 컴포넌트를 작성한다
하지만 화살표 함수로 작성한 컴포넌트 또한 기능에 영향이 없다

기능에 문제가 없다면 개인적으로 화살표 함수로 작성하는 편이 좋지 않나 생각되는데..
화살표 함수에는 this 바인딩, arguments 객체 등
리액트 컴포넌트를 작성하는데 불필요한 것들을 포함하지 않기 때문이다

Props

Props 는 properties 의 줄임말로 컴포넌트의 속성을 의미한다
Props 를 통해 컴포넌트 생성 시 임의의 값을 넣어줄 수 있다

defaultProps

컴포넌트에 Props 를 지정하지 않아도 사용할 기본 값을 설정할 때 사용한다
최근에도 자주 사용되는 방식인지는 모르겠다..

JSX 문법

닫는 코드를 꼭 작성해줘야 한다
컴포넌트에서 JSX return 시 꼭 하나의 태그로 감싸줘야 한다
이 때문에 2가지 태그를 반환해야 하는 경우 불필요하게 View 태그 등을 사용할 수도 있지만
JSX Fragment 를 사용하는 방법을 권장한다 (빈 태그로 태그 전체를 감싸주는)
JSX 내부에서 자바스크립트 코드를 사용할 때는 태그 내에 중괄호로 감싸서 사용한다

StyleSheet

리액트 네이티브에서는 스타일 시트를 제공하여 다른 CSS 프레임워크를 사용하지 않더라도
CSS 코드를 편리하게 관리할 수 있다

import React from 'react';
import {View, StyleSheet} from 'react-native';

function Box(props) {
	return <View style={[styles.box, props.rounded ? styles.rounded : null]} />;
}

const styles = StyleSheet.create({
  box: {
    width: 64,
    height: 64,
    backgroundColor: 'black',
  },
  rounded: {
    borderRadius: 16,
  },
});

export default Box;