리액트네이티브 입문 2— 리액트 Props와 State

7 min readFeb 13, 2024

해당 글은 앱 개발 입문자를 위한 안내 문서를 먼저 참고 하시고 보시는 것을 추천드립니다. 여기서는 리액트네이티브를 공부하기에 앞서 필요한 기초 지식을 다룹니다. 이번 편은 리액트입니다. 이는 개발 시작에 앞서 최소한의 내용만 숙지시키는 것이 목적입니다

리액트 네이티브에 대한 소개는 크로스플랫폼 코리아 블로그에 포스팅되어 있습니다. 이를 참고하시면 리액트 네이티브에 대해 더 잘 이해하고 학습하는 데 도움이 될 것입니다. 여기서는 개발을 시작하기에 앞서 필요한 기초 지식을 차례대로 다뤄보겠습니다. 참고로 리액트와 리액트네이티브는 같은 로고를 사용합니다.

React

필자가 경험해 본 많은 앱 개발 경험 중에서, 리액트는 사용성과 난이도 측면에서 가히 최고의 성능을 낸다고 생각합니다. 특히, 리액트네이티브를 시작하는 많은 개발자들이 종종 어려움을 겪는 부분은 리액트 자체의 문제가 아니라, 개발 환경 통합에 관한 어려움입니다. 이러한 문제를 해결하기 위해 Expo와 같은 유용한 도구가 등장했고, 나아가 개발 환경을 쉽게 설정할 수 있도록 돕기 위해 제가 직접 문서를 제공하기도 했습니다. 개발 환경을 구축하고 앱을 실행해보면서 리액트네이티브 개발에 필요한 리액트를 직접 학습해보겠습니다.

위 명령어는 개발환경을 올바로 따라하여 Node.js를 설치한 상태에서 실행이 가능합니다.

프로젝트에서는 bun 사용을 권장하고 있습니다. 정상적으로 설치되었다면, 프로젝트 진행을 위해 `bunx` 명령어를 사용할 수 있습니다. 이 명령어는 `npx`와 같은 효과를 제공합니다.

맥(Mac) 환경에서 생성된 프로젝트를 Visual Studio Code (VSCode)로 열고 `bun start` 명령어를 입력한 후, 터미널에서 ‘i’ 단축키를 실행하면 아래 같이 시뮬레이터가 실행되는 것을 확인할 수 있습니다.

이제 최초로 실행되는 app/index.tsx 파일을 아래와 같이 비워주고 코드를 작성하는 법을 알아보겠습니다.

리액트에서 가장 기본적인 요소는 Props와 State 입니다. 간단하게 State는 React 컴포넌트에서 사용자 상호작용이나 다른 요인에 의해 변경될 수 있는 데이터를 관리하는 데 사용됩니다. 화면에 변경사항을 적용하기 위해서는 State 변수를 활용하여 컴포넌트의 상태를 업데이트하고, 이를 통해 화면에 변경사항을 업데이트합니다.

State 변수 사용법

State 변수를 사용하기 위해서는 React 라이브러리에서 제공하는 useState 함수를 활용해야 합니다. 우선 아래와 같이 변수를 선언해 줍니다.

const [num1, setNum1] = useState(0);

그럼 Index.tsx 코드는 아래와 같습니다.

다음으로 num1 이라는 값을 화면에 표시해주기 위해 아래 변수를 넣어주겠습니다.

<Text>Index {num1}</Text>

글자 크기를 키우고 내용을 가운데로 정렬하기 위해, 아래와 같이 코드를 수정하겠습니다.

import {useState} from 'react';
import {Text, View} from 'react-native';
import {css} from '@emotion/native';

export default function Index(): JSX.Element {
  const [num1, setNum1] = useState(0);

  return (
    <View
      style={css`
        flex: 1;
        justify-content: center;
        align-items: center;
        padding-bottom: 80px;
      `}
    >
      <Text
        style={css`
          font-size: 28px;
        `}
      >
        Index {num1}
      </Text>
    </View>
  );
}

이제 버튼을 하나 만들어서 클릭할 때 num1 값이 변경되는 것을 확인하는 코드를 <Text> 태그 아래 작성해보겠습니다.

<Button onPress={() => setNum1(num1 + 1)} title="Increment" />

아래 코드는 최종 모습입니다.

위 화면에서 `Increment` 라는 버튼이 생긴 것을 확인할 수 있습니다.

버튼을 클릭하면 숫자가 변경되는 것을 확인할 수 있습니다.

이와 같이 리액트에서는 useState를 활용하여 화면에 변경사항을 반영할 수 있게 합니다.

Props 사용법

이번에는 Props의 사용 방법을 살펴보겠습니다. Props는 상위 컴포넌트로부터 하위 컴포넌트로 전달되며, 변경할 수 없는 값입니다.

아래와 같이 Index 컴포넌트 위에 NewComp를 만들어보겠습니다.

function NewComp({text}: {text: string}): JSX.Element {
  return <Text>{text}</Text>;
}

그리고 Index 컴포넌트에서 이를 아래와 같이 사용해보겠습니다.

<NewComp text={`Index ${num1}`} />

Props는 상위 컴포넌트로부터 하위 컴포넌트로 전달되는 값으로, 하위 컴포넌트에서는 이를 수정할 수 없습니다. 이를 수정하려면 아래와 같이 함수를 내려줘서 위에서 내려주는 Props를 변경해주는 방법이 있습니다. 예시로 아래와 같이 코드를 수정해보겠습니다.

import {useState} from 'react';
import {Button, Text, View} from 'react-native';
import {css} from '@emotion/native';

function NewComp({
  text,
  onPress,
}: {
  text: string;
  onPress: () => void;
}): JSX.Element {
  return (
    <>
      <Text>{text}</Text>
      <Button onPress={onPress} title="Increment" />
    </>
  );
}

export default function Index(): JSX.Element {
  const [num1, setNum1] = useState(0);

  return (
    <View
      style={css`
        flex: 1;
        justify-content: center;
        align-items: center;
        padding-bottom: 80px;
      `}
    >
      <NewComp onPress={() => setNum1(num1 + 1)} text={`Index ${num1}`} />
    </View>
  );
}

위 코드에서 NewComp컴포넌트는 onPress함수를 props로 받아, 하위 컴포넌트에서 onPress함수를 호출하게 되면 상위 컴포넌트에서 해당 함수가 실행되며, 그 과정에서 setNum1함수도 함께 실행되는 구조입니다.

여기까지 이해하신 분이라면, 앞으로 화면을 만들어 나가면서 직접 구조를 잡아 보실 수 있을 것입니다.

리액트네이티브 입문 2— 리액트 Props와 State

React

State 변수 사용법

Props 사용법

Written by Hyo