[RN] study 3week / component 기본기

React Navtive 스터디 3week

도서: [리액트 네이티브를 다루는 기술 / 김민준 / 길벗]

(2장 컴포넌트) => 리액트를 다뤄봐서 어렵지 않았음

 

component = 구성 요소, 유저 인터페이스를 구성하는 요소

 

1.3장 새 리액트 네이티브 프로젝트 만들기

npx react-native init LearnReactNative

 

2장 컴포넌트

 

SafeAreaView : iPhone X 이상 기종에서 디스플레이의 보이지 않는 영역 및 최하단 영역에 내용이 보여지는 것을 방지.

View : 가장 기본적인 컴포넌트로 레이아웃 및 스타일 담당.

Text : 텍스트를 보여주는 역할

 

2.1 나만의 컴포넌트 만들기

 

const Greeting = () => { … }

function Greeting() { … } 

화살표 함수 문법을 썼을 때의 장점은, 복잡한 로직 없이 바로 반환하는 코드라면 중괄호 코드 블록과 return 키워드를 생략할 수 있다는 것이다. =>(책에서는) function 키워드 사용 선언 방식으로 사용할 예정:  리액트 공식 매뉴얼, 페이스북 리액트 개발팀 일원이자 영향력 있는 인물들이 주로 사용하기 때문.

 

2.2 Props

 

Props는 properties를 줄인 말로 컴포넌트의 속성을 의미.

defaultProps 설정할 수도.

리로드(Reload)방법
1) 단축키 => iOS에서는 command + R, 안드로이드에서는 R 두 번

또는 

2) 개발자 메뉴 띄운 다음 Reload 눌러도 됨.
개발자 메뉴 띄우기 단축키 => iOS에서는 command + D, 안드로이드에서는 command + M(윈도우와 리눅스에서는 Ctrl + M)

 

2.4.4. JSX 안에서 자바스크립트 표현식을 보여줄 땐 중괄호로 감싸기

여는 태그와 닫는 태그 사이에 자바스크립트 표현식을 사용할 때 중괄호 사용.

 

2.4.5 주석 작성하기

JSX에서 주석 작성하는 방법은 두 가지

1. {/*와 */} 사이에 주석을 넣는 것.
2. // 문자를 사용해 주석 작성. JSX의 여는 태그 또는 스스로 닫는 태그에서만 사용할 수 있으며, 이 주석을 작성한 다음에는 꼭 새 줄을 입력해줘야 함!

 

2.5 styleSheet로 컴포넌트에 스타일 입히기

RN에서는 별도의 CSS 파일에 스타일 작성하지 않고, 자바스크립트 파일 안에서 StyleSheet라는 것을 사용. StyleSheet는 react-native 모듈에서 불러와서 사용할 수 있다. 새로운 스타일을 선언할 때는 StyleSheet.create 함수를 사용하며, 그 안에 스타일들을 작성한다. 

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

CSS와의 주요 차이점은

• 셀렉터라는 개념이 존재하지 않는다. 
• 모든 스타일 속성은 camelCase로 작성한다.
• display 속성은 기본적으로 flex이며, 다른 값은 none 밖에 없다.
• flexDirection 속성의 기본값은 웹에서는 row이지만, 리액트 네이티브에서는 column이다.
• 리액트 네이티브에서 스타일링할 때 숫자 단위는 dp뿐이다.
• background 대신 backgroundColor를 사용해야 한다.
• border 대신 borderWidth, borderStyle, borderColor 등을 따로따로 설정해야 한다.

 

2.5.1 Props로 컴포넌트 스타일을 커스터마이징하기

부드러운 모서리 구현

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

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

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

export default Box;

 

rounded라는 props가 true일 때만 스타일 부여하기

<View style={[styles.box, props.rounded ? styles.rounded : null]} />;
또는
<View style={[styles.box, props.rounded && styles.rounded]} />;

 

App에서

<Box rounded={true} />
또는
<Box rounded />

 

사이즈 변경하기

return (
    <View
      style={[sizes[props.size],]}
    />
);


Box.defaultProps = {
  size: 'medium',
};

const styles = StyleSheet.create({
  small: {
    width: 32,
    height: 32,
  },
  medium: {
    width: 64,
    height: 64,
  },
  large: {
    width: 128,
    height: 128,
  },
});

const sizes = {
  small: styles.small,
  medium: styles.medium,
  large: styles.large,
};

 

2.6 Props 객체 구조 분해 할당

컴포넌트에서 props를 조회하는 코드를 더 짧게 구현하는 방법이 있습니다. 구조 분해 할당이라는 자바스크립트 문법을 사용하는 방법으로, ‘비구조화 할당’이라고 부르기도 합니다. 

 

function print(params) {
  console.log(params.name);
  console.log(params.description);
}

↓↓↓

function print([name, description]) {
  console.log(name);
  console.log(description);
}

2.7 useState Hook으로 상태 관리하기

Hook의 규칙

1. Hook은 컴포넌트의 최상위 레벨에서만 사용해야 한다. 즉, Hook은 조건문이나 반복문 또는 중첩 함수에서 호출되면 안 된다. 만약 함수의 흐름 중간에 리턴하는 경우에는 Hook은 함수가 리턴되기 전에 사용되어야 한다.
2. 여러 Hook을 사용하여 직접 Hook을 만들 수 있다. 이를 커스텀 Hook이라고 한다. react 패키지 외에서 불러오는 Hook은 모두 커스텀 Hook이다. 
3. Hook은 커스텀 Hook 또는 함수 컴포넌트에서만 사용할 수 있다. 클래스에서는 사용이 불가능하며, 리액트와 관련 없는 일반적인 자바스크립트 함수에서 사용하면 오류가 발생한다.

 

2.8 카운터 만들기