리액트 기초

React Native는 JavaScript로 사용자 인터페이스를 구축하기 위한 인기 있는 오픈 소스 라이브러리인 React 에서 실행된다. React Native를 최대한 활용하려면 React 자체를 이해하는 것이 도움이 된다. 이 섹션을 통해 시작하거나 재교육 과정으로 활용할 수 있다.

• components
• JSX
• props
• state

 Cat 구성 요소

import React from 'react';
import {Text} from 'react-native';

const Cat = () => {
  return <Text>Hello, I am your cat!</Text>;
};

export default Cat;

. Cat구성 요소를 정의하려면 먼저 JavaScript를 사용하여 importReact 및 React Native의 Text핵심 구성 요소를 가져온다.

import React from 'react';
import {Text} from 'react-native';

구성 요소는 함수로 시작된다.

const Cat = () => {};

함수 구성요소가 반환하는 모든 것은 React 요소로 렌더링된다. 

여기서 Cat구성 요소는 요소를 렌더링합니다 <Text>.

const Cat = () => {
  return <Text>Hello, I am your cat!</Text>;
};

export default다음과 같이 앱 전체에서 사용할 수 있도록 JavaScript로 함수 구성 요소를 내보낼 수 있다 .

const Cat = () => {
  return <Text>Hello, I am your cat!</Text>;
};

export default Cat;

React 문서에는 더 자세히 알아보기 위해 참조할 수 있는 JSX에 대한 포괄적인 가이드가 있다. JSX는 JavaScript이므로 내부에서 변수를 사용할 수 있다. 여기서는 고양이의 이름을 선언하고 name중괄호를 안에 삽입한다 <Text>.

import React from 'react';
import {Text} from 'react-native';

const Cat = () => {
  const name = 'Maru';
  return <Text>Hello, I am {name}!</Text>;
};

export default Cat;

다음과 같은 함수 호출을 포함하여 모든 JavaScript 표현식은 중괄호 사이에서 작동한다 {getFullName("Rum", "Tum", "Tugger")}.

import React from 'react';
import {Text} from 'react-native';

// 타입스크립트
const getFullName = (
  firstName: string,
  secondName: string,
  thirdName: string,
) => {
  return firstName + ' ' + secondName + ' ' + thirdName;
};

// 자바스크립트
const getFullName = (firstName, secondName, thirdName) => {
  return firstName + ' ' + secondName + ' ' + thirdName;
};

const Cat = () => {
  return <Text>Hello, I am {getFullName('Rum', 'Tum', 'Tugger')}!</Text>;
};

export default Cat;

React를 사용하면 이러한 구성 요소를 서로 중첩하여 새 구성 요소를 만들 수 있다. 이러한 중첩 가능하고 재사용 가능한 구성 요소는 React 패러다임의 핵심이다.

예를 들어 아래 항목 안에 Text중첩 할 수 있으며 React Native는 이를 함께 렌더링한다.TextInputView

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

const Cat = () => {
  return (
    <View>
      <Text>Hello, I am...</Text>
      <TextInput
        style={{
          height: 40,
          borderColor: 'gray',
          borderWidth: 1,
        }}
        defaultValue="Name me!"
      />
    </View>
  );
};

export default Cat;

다음을 사용하면 코드를 반복하지 않고도 이 구성요소를 여러 위치에서 여러 번 렌더링할 수 있다 <Cat>.

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

const Cat = () => {
  return (
    <View>
      <Text>I am also a cat!</Text>
    </View>
  );
};

const Cafe = () => {
  return (
    <View>
      <Text>Welcome!</Text>
      <Cat />
      <Cat />
      <Cat />
    </View>
  );
};

export default Cafe;

다른 구성 요소를 렌더링하는 모든 구성 요소는 상위 구성 요소다. 여기에는 Cafe상위 구성 요소가 있고 각각은 하위 구성 요소 Cat이다 .

원하는 만큼 고양이를 카페에 둘 수 있다. 각각은 <Cat>소품으로 사용자 정의할 수 있는 고유한 요소를 렌더링한다.

 

Props는 '속성'의 약자다. Props를 사용하면 React 구성 요소를 사용자 정의할 수 있다. 예를 들어, 여기서는 렌더링을 위해 각각 <Cat>다른 값을 전달한다.

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

// 타입스크립트
type CatProps = {
  name: string;
};

const Cat = (props: CatProps) => {
  return (
    <View>
      <Text>Hello, I am {props.name}!</Text>
    </View>
  );
};

// 자바스크립트
const Cat = props => {
  return (
    <View>
      <Text>Hello, I am {props.name}!</Text>
    </View>
  );
};

const Cafe = () => {
  return (
    <View>
      <Cat name="Maru" />
      <Cat name="Jellylorum" />
      <Cat name="Spot" />
    </View>
  );
};

export default Cafe;

React Native의 핵심 구성 요소 대부분은 props를 사용하여 사용자 정의할 수도 있다. 예를 들어 를 사용할 때 표시되는 이미지를 정의하기 위해 Image이름이 지정된 prop을 전달한다.

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

const CatApp = () => {
  return (
    <View>
      <Image
        source={{
          uri: 'https://reactnative.dev/docs/assets/p_cat1.png',
        }}
        style={{width: 200, height: 200}}
      />
      <Text>Hello, I am your cat!</Text>
    </View>
  );
};

export default CatApp;

Image을 포함하여 디자인 및 레이아웃 관련 속성-값 쌍의 JS 객체를 허용하는 다양한 props가 있다.

props를 구성 요소 렌더링 방법을 구성하는 데 사용하는 인수로 생각할 수 있지만 state는 구성 요소의 개인 데이터 저장소와 같다. 상태는 시간이 지남에 따라 변경되거나 사용자 상호 작용으로 인해 발생하는 데이터를 처리하는 데 유용하다. 상태는 구성 요소에 메모리를 제공한다.

다음 예는 두 마리의 배고픈 고양이가 먹이를 기다리고 있는 고양이 카페에서 발생한다. 이름과 달리 시간이 지남에 따라 변경될 것으로 예상되는 배고픔은 상태로 저장된다. 고양이에게 먹이를 주려면 버튼을 누르면 상태가 업데이트된다.

import React, {useState} from 'react';
import {Button, Text, View} from 'react-native';

// 타입스크립트
type CatProps = {
  name: string;
};

const Cat = (props: CatProps) => {
  const [isHungry, setIsHungry] = useState(true);

  return (
    <View>
      <Text>
        I am {props.name}, and I am {isHungry ? 'hungry' : 'full'}!
      </Text>
      <Button
        onPress={() => {
          setIsHungry(false);
        }}
        disabled={!isHungry}
        title={isHungry ? 'Pour me some milk, please!' : 'Thank you!'}
      />
    </View>
  );
};

// 자바스크립트
const Cat = props => {
  const [isHungry, setIsHungry] = useState(true);

  return (
    <View>
      <Text>
        I am {props.name}, and I am {isHungry ? 'hungry' : 'full'}!
      </Text>
      <Button
        onPress={() => {
          setIsHungry(false);
        }}
        disabled={!isHungry}
        title={isHungry ? 'Pour me some milk, please!' : 'Thank you!'}
      />
    </View>
  );
};

const Cafe = () => {
  return (
    <>
      <Cat name="Munkustrap" />
      <Cat name="Spot" />
    </>
  );
};

export default Cafe;

useState먼저 다음과 같이 React에서 가져오기를 원할 것이다.

import React, {useState} from 'react';

useState그런 다음 해당 함수 내부를 호출하여 구성 요소의 상태를 선언한다 . 이 예에서는 상태 변수를 useState만든다 isHungry.

const Cat = (props: CatProps) => {
  const [isHungry, setIsHungry] = useState(true);
  // ...
};

useState문자열, 숫자, 부울, 배열, 개체 등 모든 종류의 데이터를 추적하는 데 사용할 수 있다 . 예를 들어, 고양이가 쓰다듬어지는 횟수를 추적할 수 있다 const [timesPetted, setTimesPetted] = useState(0)!

호출은 useState두 가지 작업을 수행한다.

• 초기 값을 가진 "상태 변수"를 생성합니다. 이 경우 상태 변수는 이고 isHungry초기 값은 다음과 같다.true
• 해당 상태 변수의 값을 설정하는 함수를 생성한다.setIsHungry

어떤 이름을 사용하는지는 중요하지 않다. 하지만 패턴을 [<getter>, <setter>] = useState(<initialValue>).

다음으로 핵심 구성 요소를 추가 Button하고 소품을 제공한다 onPress.

<Button
  onPress={() => {
    setIsHungry(false);
  }}
  //..
/>

이제 누군가가 버튼을 누르면 onPress가 실행되어 setIsHungry(false). 그러면 상태 변수가 isHungry로 설정된다 false. isHungryfalse인 경우 Button의 disabled소품은 다음과 같이 설정되고 true변경 title된다.

<Button
  //..
  disabled={!isHungry}
  title={isHungry ? 'Pour me some milk, please!' : 'Thank you!'}
/>

비록 constisHungry 임에도 불구하고 재할당이 가능한 것처럼 보인다. 같은 상태 설정 함수가 호출되면 해당 구성 요소가 다시 렌더링된다. 이 경우 함수는 다시 실행된다.

const Cafe = () => {
  return (
    <>
      <Cat name="Munkustrap" />
      <Cat name="Spot" />
    </>
  );
};