React Native docs korean

김주형·2023년 8월 4일

TIL

목록 보기

36/37

Reference

reactnative-korean

개요

리액트네이티브는 리액트와 비슷함
리액트는 부속품으로 웹 컴포넌트를 이용하지만 리액트 네이티브는 순전히 리액트 네이티브 자체 컴포넌트를 사용함

ReactNative는 자바스크립트로 작성됨
ReactJS가 Virtual DOM을 이용해서 웹브라우저를 변경합니다. ReactNative는 Virtual DOM을 다른 디바이스 iOS나 Android OS에 적용시킨 것
그리고 다른 OS에도 적용 가능함
즉, Windows, Ubuntu 등에 적용할 수 있음

컴포넌트

ReactNative는 컴포넌트 단위로 이루어지고 작동
컴포넌트 render() 메서드를 이용해서 사용자 화면에 포함
render 메소드 안에는 html 태그와 대응되는 컴포넌트들을 사용
예를 들어 html의 div태그와 대응되는 컴포넌트로 View가 있고,
span과 대응되는 컴포넌트로는 Text가 있음

플랫폼(안드로이드, iOS)에 종속적인 컴포넌트들도 있음
예를 들어 <DatePickerIOS>는 iOS에서만 사용할 수 있는 컴포넌트

JSX

ReactNative 코드는 자바스크립트와 XML이 혼합된 형식으로 작성됨
이러한 형식을 JSX라고 함

// 예시
const element = <Text>Hello, World!</Text>;

자바스크립트와 XML 형식의 요소(element)와 컴포넌트(component)들로 구성되어 있기 때문에
자바스크립트 코드를 사용할 때 주의해야 함

XML 형식 즉, 화살괄호(<>)로 구성된 컴포넌트 또는 요소 안에서는 일반적인 자바스크립트 코드들을 사용할 수 없음
(즉, for, if문들과 let 등을 사용할 수 없음)

if문과 같이 조건식을 다룰 필요가 있는 경우는 다음 페이지에 대체 방법을 소개하고 있음
하지만 자바스크립트 표현식은 컴포넌트에서 사용할 수 있음
즉, 삼항연산식과 자바스크립트 변수 등은 중괄호 안에 사용하시면 됨

컴포넌트에서 여러 컴포넌트를 렌더링 해야 할 때, 그 컴포넌트들을 필수적으로 하나의 컴포넌트 안에 포함시켜줘야됨
예를 들어 다음과 같이 코드를 작성하면 변환 과정에서 오류가 발생

return (
  <Text>Hello JSX</Text>
  <Text>Welcome</Text>
  );

다음과 같이 컴포넌트를 이용해 감싸주면 오류가 발생하지 않음

return (
  <View>
    <Text>Hello JSX</Text>
    <Text>Welcome</Text>
  </View>
 );

자바스크립트 표현식 사용

JSX 요소(element) 또는 컴포넌트 안에서 자바스크립트 표현식을 사용하기 위해서는 자바스크립트 표현식을 중괄호 { }로 감싸주면 됨

render() {
  let text = "JSX World!";
  return (
  	<View>
      <Text>Hello JSX</Text>
      <Text>Welcome.. {text}</Text>
  </View>
  );
 }

자바스크립트 변수 text를 중괄호로 감싸 {text}를 사용하여 text 자바스크립트 변수를 렌더링함

JSX도 표현식

컴파일을 하면 JSX 표현식은 보통의 자바스크립트 객체, 함수와 같이 됨
(이것은 if문과 for문 등에서 JSX를 사용할 수 있다는 의미)

다음과 같이 JSX를 변수에 할당할 수 있고, 인자로 넘길 수 있으며 함수의 반환값으로 사용될 수 있음

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}
  
const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};
  
function getGreeting(user) {
    if (user) {
    return <h1>Hellom {formatName(user)}!</h1>;
    }
    return <h1>Hello, Stranger.</h1>;
}

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

JSX는 여러 줄에 걸쳐서 입력될 수 있음
그럴때는 자바스크립트의 자동 세미콜론 삽입에 대비해 소괄호로 묶어주는 것이 좋음

JSX는 객체

바벨(Babel)은 JSX를 React.reateElement()를 이용해서 컴파일함
(따라서 다음 두 코드는 동일함)

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);
  
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

React.createElement()는 몇가지 버그제거를 위한 확인을 한 후 다음과 같은 객체를 생성

  //Note: this structure is simplified
  const element = {
  	type: 'h1',
  	props: {
  		className: 'greeting',
  		children: 'Hello, world!'
  	}
  };