React props vs state - 차이점과 디자인 패턴

1. React state
2. React props
3. React에서 state와 props 사이의 연결
4. React에서 state 대 props를 사용해야 하는 경우

React는 배우기 가장 쉬운 JavaScript 프레임워크 중 하나입니다. 그러나 이 라이브러리는 처음에는 혼란스러워 보일 수 있는 몇 가지 개념을 소개합니다. 예를 들어, 많은 초보자는 props와 state의 차이점을 이해하는 데 어려움을 겪습니다. 이 기사에서는 이 두 개체가 모두 필요한 이유와 최적의 용도를 찾는 방법을 배웁니다.

React state

상태의 개념은 이를 활용하는 React 또는 기타 JavaScript 프레임워크에만 있는 것이 아닙니다. 바닐라 JavaScript로 빌드된 일부 애플리케이션도 상태를 가질 수 있습니다. React에서 개념은 약간 다르지만 동일한 원칙을 기반으로 합니다.

모든 React 구성 요소는 로컬 상태 객체를 유지합니다. 상태 관리는 내부적으로 발생합니다. 상태 개체는 변경 가능합니다. 이를 변경하는 것은 사용자의 동작에 따라 변경되는 동적 React 구성 요소를 개발하는 핵심입니다.

부모 구성 요소는 자식의 상태를 변경할 수 없습니다. 일반 JavaScript 함수에서 상태 값을 지역 변수로 생각할 수 있습니다. 이러한 변수는 함수 범위로 제한됩니다.

React에서 상태 객체의 주요 목적은 동적 애플리케이션을 구동하는 모든 데이터의 유지 관리를 단순화하는 것입니다. 상태 개체 값이 변경되면 구성 요소가 다시 렌더링됩니다. 이렇게 하면 사용자 입력이 변경될 때 사용자의 보기가 항상 즉시 업데이트됩니다.

React props

props(properties 약어) 개체는 상위 구성 요소의 데이터를 하위 구성 요소와 공유하는 데 사용됩니다. props는 동작을 사용자 정의하기 위해 구성 요소에 전달되는 설정으로 생각할 수 있습니다. 비주얼을 렌더링하는 <Bargraph/> 컴포넌트가 있다고 상상해보십시오. 이러한 구성 요소는 그래프를 렌더링하는 데 숫자가 필요합니다. 모든 그래프는 props를 통해 입력할 수 있는 서로 다른 데이터를 렌더링합니다. 이것은 props가 컴포넌트 재사용성을 어떻게 촉진하는지 보여주는 한 가지 예일 뿐입니다.

모든 구성 요소는 구성 요소 내에서 변경할 수 없는 props 개체를 받습니다. 그러나 함수에 다른 인수를 전달할 수 있는 것처럼 동일한 구성 요소의 많은 인스턴스가 props를 통해 다른 값을 받을 수 있습니다.

후드 아래에서 React는 React.createElement() 메서드를 사용하여 React 구성 요소를 만들고 props를 전달합니다. 그러나 React 개발자는 더 친숙한 JSX 구문을 사용하여 React 애플리케이션을 구축하는 경향이 있습니다. 이 HTML과 유사한 구문은 props를 전달하는 더 읽기 쉬운 방법을 제공합니다.

const Graph=(props)=>
{
  return <div>
          <h1>{props.data.percentage}%</h1>
         </div>;
}
class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      data: {percentage: "70"}
    }
  }
  render() {
    return <Graph data={this.state.data}>Hi! Try edit me</Graph>;
  }
}

이것은 props가 어떻게 작동하는지에 대한 매우 간단한 시연입니다. 먼저 자식 구성 요소를 정의합니다. 보시다시피 자식 구성 요소는 상태를 유지하지 않습니다. props를 통해 전달된 데이터만 읽습니다.

다음으로 부모 구성 요소가 있습니다. 자식 구성 요소와 달리 state 개체의 데이터를 사용하여 소품으로 전달합니다. 보시다시피 JSX 구문은 일반 HTML과 다릅니다.

React props Destructuring

위의 예에서 볼 수 있듯이 모든 기능 구성 요소는 props 인수를 허용합니다. props 객체에 저장된 데이터는 JSX의 속성과 이름이 같은 속성을 읽어 액세스할 수 있습니다.

더 간단한 방법은 함수 정의 내에서 props를 구조화하는 것입니다. 다음은 구조화되지 않은 props가 있는 Graph 기능 구성 요소의 예입니다.

const Graph=({data = { percentage: 50 } })=>
{
  return <div>
          <h1>{{data.percentage}}%</h1>
         </div>;
}

이를 통해 더 간단한 구문을 사용하고 기본 prop 값을 설정할 수도 있습니다. 자식 구성 요소가 props를 받지 않으면 구성 요소가 대신 기본값을 읽을 수 있습니다.

React에서 state와 props 사이의 연결

이전에 언급했듯이 React 구성 요소 내에서 props 객체는 엄격하게 변경할 수 없습니다. 그러나 한 가지 주의 사항이 있습니다. 자식 구성 요소는 부모 구성 요소의 상태를 변경할 수 있으며 이는 props를 통해 자식으로 다시 전달되는 데이터의 소스로 사용됩니다. 이해하기 어렵다면 다음 코드 샘플을 살펴보겠습니다.

const Graph=(props)=>
{
  const {handler, color} = props
  return <div 
         style={{width: "400px", height: "400px", border: "2px solid black", backgroundColor: `${color}`}}>                     
         <h1>{props.data.percentage}%</h1>
         <input type="text" onChange={(e) => handler(e)}/>
         </div>;
}
class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      data: {percentage: "70"},
      bgColor: "black"
    }
  }
  render() {
    const backgroundHandler = (e) => this.setState({color: e.target.value})     
    return <Graph data={this.state.data} color={this.state.bgColor} handler={backgroundHandler}>
            Hi! Try edit me</Graph>;
  }
}

이 예에서는 이전에 사용한 것과 동일한 두 가지 구성 요소가 있습니다. props를 통해 이벤트 핸들러를 전달합니다. 그런 다음 동일한 핸들러를 사용하여 상위 구성 요소의 상태에서 color 속성을 업데이트합니다. 상위 구성 요소 상태의 값이 변경되면 다시 렌더링되어 업데이트된 color 값을 하위 구성 요소로 다시 전달합니다.

이것은 자식 구성 요소가 자체 props를 업데이트하는 것처럼 보일 수 있지만 이 예에서는 실제로 props를 통해 전달된 이벤트 핸들러를 사용하여 자체 props의 소스(부모 구성 요소 상태의 color 속성 값)를 업데이트합니다.

다음은 재생 코드에 대한 링크입니다. 직접 사용해 보세요. 텍스트 필드에 색상을 입력하고 어떤 일이 일어나는지 확인하십시오.

이것은 properties와 state가 상호 연결되는 방법의 대표적인 예입니다. 상위 구성 요소의 상태는 일반적으로 props를 통해 모든 하위 구성 요소에 전달되는 데이터 소스입니다.

이 예에서 bgColor 상태 속성에 저장된 상태 값은 color 소품이 됩니다.

이 예제는 state와 props가 데이터를 저장하고 흐름을 관리하는 두 가지 방법일 뿐임을 보여줍니다.

React에서 state 대 props를 사용해야 하는 경우

둘 중 하나를 선택하는 것이 아닙니다. 구성 요소가 state를 유지하고 props도 받는 것이 일반적입니다. 상태에 저장된 데이터 조각은 종종 자식 구성 요소의 소품이 됩니다. 소품은 데이터에 국한되지 않고 콜백 기능도 포함할 수 있습니다.

관리하기 쉬운 React 앱을 빌드하려면 구성 요소 트리에서 상위 구성 요소의 상태를 사용하십시오. 다른 모든 구성 요소는 stateless여야 하며 props를 통해 필요한 데이터를 수신해야 합니다. 상태 비저장 구성 요소는 읽고 테스트하기 쉽기 때문에 선호됩니다.

요약하자면 state와 props는 모두 필요하며 props는 state 없이는 효과적이지 않습니다. 일반적으로 이벤트 처리 및 데이터 처리에 상태 저장 구성 요소를 사용하는 것이 더 나은 반면, 상태 비저장 구성 요소는 시각화 및 형식 지정에 더 좋습니다.