React Native 또는 React를 처음 사용하는 경우 상태와 소품이라는 단어를 접했을 것입니다. 동적이고 적응력이 뛰어난 모바일 애플리케이션을 개발하려면 이 두 가지를 이해하는 것이 필수적입니다. 이 블로그 기사에서는 상태와 소품에 대해 자세히 알아보고, 차이점을 검토하고, React Native 애플리케이션에서 데이터 흐름을 효과적으로 처리하는 방법을 알아봅니다.

상태와 소품이란 무엇입니까?

상태

State는 구성요소가 자체 데이터를 생성하고 관리할 수 있게 해주는 내장 개체입니다. 구성 요소의 수명 주기 동안 변경될 수 있는 정보를 보유합니다. 상태가 변경될 때마다 해당 변경 사항을 반영하기 위해 구성 요소가 다시 렌더링됩니다.

• 변경 가능: 상태는 setState(클래스 구성 요소) 또는 useState 후크(기능 구성 요소)를 사용하여 변경할 수 있습니다.
• 구성 요소에 대한 로컬: 상태는 완전히 캡슐화되어 있으며 구성 요소에 대해 로컬입니다.
• 재 렌더링 트리거: 상태를 업데이트하면 구성 요소가 다시 렌더링됩니다.

소품

속성(property)의 약자인 Props는 읽기 전용 구성 요소입니다. 인수가 함수에 전달되는 방식과 유사하게 구성요소에 전달되는 외부 매개변수입니다.

• 불변: Prop은 이를 수신하는 구성요소에 의해 수정될 수 없습니다.
• 상위 구성 요소에서 전달됨: 소품이 상위 구성 요소에서 하위 구성 요소로 전달됩니다.
• 구성에 사용됨: 구성 요소를 구성하고 해당 동작을 외부에서 제어합니다.

차이점 이해

상태를 사용할 시기와 소품을 사용할 시기를 이해하는 것이 앱의 데이터 흐름을 관리하는 데 중요합니다.

왜 중요한가요?

• 상태는 사용자 입력, API 응답 또는 기타 동적 데이터를 추적하고 응답해야 하는 구성 요소에 필수적입니다.
• Props를 사용하면 동적 데이터와 기능을 수용하여 구성 요소를 재사용할 수 있으므로 코드를 더욱 모듈화하고 유지 관리하기 쉽게 만들 수 있습니다.

효과적인 데이터 흐름 관리

효과적인 데이터 흐름 관리를 통해 앱이 예측 가능하게 작동하고 디버그 및 유지 관리가 더 쉬워집니다.

1. 단방향 데이터 흐름

React Native는 단방향 데이터 흐름을 사용합니다. 데이터는 props를 통해 상위 구성요소에서 하위 구성요소로 이동됩니다. 이렇게 하면 데이터 흐름을 더 쉽게 이해하고 디버그할 수 있습니다.

2. 상태를 위로 올리는 중

여러 구성 요소가 동일한 데이터에 액세스해야 하는 경우 상태를 가장 가까운 공통 조상으로 올리는 것이 가장 좋습니다. 이런 식으로 공유 상태는 props를 통해 전달될 수 있습니다.

3. 자녀와 부모 간 통신을 위한 콜백 사용

하위 구성 요소가 상위 구성 요소와 통신할 수 있도록 하려면 함수(콜백)를 소품으로 전달할 수 있습니다. 그런 다음 하위 구성 요소는 이 함수를 호출하여 상위 구성 요소에 데이터를 다시 보낼 수 있습니다.

예

이러한 개념을 설명하기 위해 몇 가지 코드 예제를 살펴보겠습니다.

예 1: 소품 사용

상위 구성 요소(App.js):

import React from 'react';
import { View } from 'react-native';
import Greeting from './Greeting';

const App = () => {
  return (
    
      
      
    
  );
};

export default App;

하위 구성 요소(Greeting.js):

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

const Greeting = (props) => {
  return Hello {props.name};
};

export default Greeting;

설명:

• 앱 구성 요소는 이름 소품을 Greeting 구성 요소에 전달합니다.
• Greeting 구성 요소는 props를 수신하고 props.name을 사용하여 개인화된 메시지를 표시합니다.

예 2: 상태 사용

카운터 구성 요소(Counter.js):

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

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

  return (
    
      You clicked {count} times
       setCount(count   1)} />
    
  );
};

export default Counter;

설명:

• useState 후크를 사용하여 카운트를 0으로 초기화합니다.
• setCount 함수는 상태를 업데이트합니다.
• 버튼을 누르면 개수가 증가하고 구성요소가 다시 렌더링되어 새 개수가 표시됩니다.

예 3: 상태 해제

상위 구성 요소(TemperatureConverter.js):

import React, { useState } from 'react';
import { View } from 'react-native';
import TemperatureInput from './TemperatureInput';

const toCelsius = (fahrenheit) => ((fahrenheit - 32) * 5) / 9;
const toFahrenheit = (celsius) => (celsius * 9) / 5   32;

const TemperatureConverter = () => {
  const [temperature, setTemperature] = useState('');
  const [scale, setScale] = useState('c');

  const handleCelsiusChange = (temp) => {
    setScale('c');
    setTemperature(temp);
  };

  const handleFahrenheitChange = (temp) => {
    setScale('f');
    setTemperature(temp);
  };

  const celsius =
    scale === 'f' ? toCelsius(parseFloat(temperature)) : temperature;
  const fahrenheit =
    scale === 'c' ? toFahrenheit(parseFloat(temperature)) : temperature;

  return (
    
      
      
    
  );
};

export default TemperatureConverter;

하위 구성 요소(TemperatureInput.js):

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

const scaleNames = {
  c: 'Celsius',
  f: 'Fahrenheit',
};

const TemperatureInput = ({ scale, temperature, onTemperatureChange }) => {
  return (
    
      Enter temperature in {scaleNames[scale]}:
      
    >
  );
};

export default TemperatureInput;

설명:

• 공유 상태 온도 및 눈금이 온도 변환기 구성 요소로 올라갑니다.
• 온도 입력 구성 요소는 소품을 받고 콜백을 통해 변경 사항을 상위 구성 요소에 다시 전달합니다.

모범 사례

1. 가능한 경우 구성요소를 상태 없는 상태로 유지

상태 비저장 구성 요소는 테스트 및 디버깅이 더 쉽습니다. 소품을 사용하여 데이터를 전달하세요.

2. 상태 저장 최소화

필요한 경우에만 상태를 사용하세요. 상태 저장 구성 요소가 너무 많으면 앱을 관리하기가 더 어려워질 수 있습니다.

3. 직접적인 상태 돌연변이 방지

상태를 직접 변경하지 마세요. 항상 setState 또는 useState의 업데이트 기능을 사용하세요.

4. 유형 확인을 위해 PropTypes 사용

PropTypes를 사용하여 구성 요소에 전달된 속성의 의도된 유형을 문서화합니다.

import PropTypes from 'prop-types';

Greeting.propTypes = {
  name: PropTypes.string.isRequired,
};

5. 전역 상태에 대한 Context API 활용

다양한 중첩 수준의 많은 구성요소에서 액세스해야 하는 데이터의 경우 Context API 사용을 고려해 보세요.

피해야 할 일반적인 실수

• 상태를 직접 변경:

  // Incorrect
  this.state.count = this.state.count   1;

  // Correct
  this.setState({ count: this.state.count   1 });

• props를 사용하여 상위 상태를 직접 수정:

하위 구성요소는 props나 상위 상태를 직접 수정하려고 시도하면 안 됩니다. 콜백을 사용하세요.

결론

상태와 소품을 이해하고 효과적으로 관리하는 것은 모든 React Native 개발자에게 필수적입니다. 이러한 개념을 익히면 기능적일 뿐만 아니라 깔끔하고 효율적이며 유지 관리가 용이한 애플리케이션을 구축할 수 있습니다.

기억하다:

• 상태는 시간이 지남에 따라 변경되고 구성 요소 내에서 관리되는 데이터에 대한 것입니다.
• Props는 데이터와 함수를 구성 요소 트리 아래로 전달하기 위한 것입니다.

시간을 내어 프로젝트에서 이러한 개념을 연습하면 개발 작업 흐름이 크게 개선되는 것을 확인할 수 있습니다.