리액트

리액트 네이티브는 모바일 앱 개발을 위한 프레임워크로, 리액트의 기본 원칙에 기반합니다. 리액트의 핵심 개념을 이해하는 것은 리액트 네이티브를 효과적으로 사용하는 데 큰 도움이 됩니다.

리엑트 네이티브를 위한 리액트

이 아티클에서는 리액트의 핵심 개념을 짚어보며 리액트 네이티브에서 어떻게 적용되는지 살펴보겠습니다.

1. 컴포넌트

컴포넌트는 리액트와 리액트 네이티브의 핵심입니다. UI를 구성하는 재사용 가능한 단위로써, 독립적이며 재사용 가능합니다.

리액트 예시

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

리엑트 네이티브 예시

import { Text } from 'react-native';

function Welcome(props) {
  return <Text>Hello, {props.name}</Text>;
}

2. 상태와 속성 (State & Props)

리액트 컴포넌트는 state와 props를 통해 데이터를 관리합니다. props는 부모 컴포넌트로부터 전달받는 데이터를 의미하며, state는 컴포넌트 내부에서 변경 가능한 데이터를 의미합니다.

컴포넌트는 각각의 상태(state)와 속성(props)을 가질 수 있으며, 리액트 애플리케이션의 UI는 이러한 컴포넌트들의 조합으로 이루어집니다. 컴포넌트는 함수형(functional) 또는 클래스(class) 형태로 정의될 수 있습니다. 최근에 개발되는 리액트 애플리케이션에서는 주로 함수형 컴포넌트를 사용합니다.

리액트에서 컴포넌트를 설계할 때, props와 state는 두 가지 중요한 개념입니다. 이 둘은 컴포넌트가 정보를 처리하고 표시하는 방식을 정의하는 데 도움을 줍니다.

props (속성)

props는 "속성(properties)"의 줄임말입니다.

정보 전달: props는 부모 컴포넌트에서 자식 컴포넌트로 정보를 전달할 때 사용됩니다.
읽기 전용: props는 컴포넌트 내에서 변경할 수 없습니다. 다시 말해, 컴포넌트는 받은 props를 그대로 사용해야 합니다.
예시: 자신의 이름을 알려주기 위해 다른 사람에게 명함을 주는 것을 상상해보세요. 그 명함에 적힌 정보는 변경되지 않습니다. 이와 같이 컴포넌트에 전달된 props는 변경되지 않는 정보로 생각할 수 있습니다.

state (상태)

state는 컴포넌트 내부에서 관리되는 정보입니다.

변경 가능: state는 시간이 지나면서 변경될 수 있습니다. 사용자의 상호작용이나 서버에서 새로운 데이터를 받는 경우 등 다양한 이유로 state가 업데이트될 수 있습니다.
내부 관리: state는 컴포넌트 내부에서만 관리되며, 외부에서 직접 변경할 수 없습니다.
예시: 여러분의 기분이나 생각처럼, 시간이 지나면서 변할 수 있는 것들을 상상해보세요. 컴포넌트의 state도 이와 같이 시간에 따라 변할 수 있는 정보를 관리합니다.

간단히 요약하면, 다음과 같습니다.

props: 부모로부터 받은, 변경할 수 없는 정보

공식 문서: 컴포넌트에 props 전달하기

state: 컴포넌트 내부에서 관리하며, 시간이나 상황에 따라 변경될 수 있는 정보

공식 문서: State 관리하기

리액트 네이티브 예시:

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

function Counter(): JSX.Element {
  const [count, setCount] = useState<number>(0);

  const increment = () => {
    setCount(prevCount => prevCount + 1);
  };

  return (
    <>
      <Text>{count}</Text>
      <Button title="Increase" onPress={increment} />
    </>
  );
}

export default Counter;

3. 라이프사이클과 훅 (Lifecycle & Hooks)

라이프사이클 메서드는 클래스 컴포넌트에서 사용되며, 컴포넌트의 생명 주기 동안 특정한 시점에 실행됩니다. 함수 컴포넌트에서는 Hooks를 통해 비슷한 기능을 사용할 수 있습니다.

리액트 네이티브의 Hooks 예시:

import { useState, useEffect } from 'react';
import { Text } from 'react-native';

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // 컴포넌트가 마운트되거나 업데이트될 때 실행됩니다.
    console.log('Component updated!');

    return () => {
      // 컴포넌트가 언마운트될 때 실행됩니다.
      console.log('Component will unmount!');
    };
  }, [count]); // count가 변경될 때마다 실행됩니다.

  return <Text>{count}</Text>;
}

리액트의 이러한 기본 개념은 리액트 네이티브에 그대로 적용됩니다. 리액트를 기반으로 하는 리액트 네이티브는 이런 기본 원칙을 통해 더욱 효과적인 모바일 앱 개발을 가능하게 합니다. 따라서 리액트의 기본 원칙을 잘 이해하면 리액트 네이티브로의 확장도 자연스럽게 이루어질 것입니다.

리엑트 네이티브를 위한 리액트​

1. 컴포넌트​

2. 상태와 속성 (State & Props)​

props (속성)​

state (상태)​