분류 Reactjs

React Fundamentals: Props vs State

컨텐츠 정보

  • 조회 265 (작성일 )

본문

React에서 props와 state의 차이점은 무엇입니까?


props과 state를 비교해 봅시다. 각각에 대한 정의는 다음과 같습니다.

  • "props"( "properties"의 줄임말)는 React 함수 컴포넌트가 첫 번째 인수로 허용하는 임의 입력의 오브젝트입니다.
  • "state"는 React 컴포넌트의 특정 인스턴스 수명 동안 변경되는 데이터입니다.

각각에 대해 알아 보자.


Props 


props을 함수에 대한 인수로 생각하십시오. React 컴포넌트는 JSX (또는 React 요소, null, 문자열 등과 같이 렌더링 가능한 것)를 반환하는 함수입니다. 일반적으로 재사용 하려는 코드가 있는 경우 해당 코드를 함수에 배치하고 이전에 사용했던 코드에서 동적 값을 인수로 사용할 수 있습니다 (예 : const five = 2 + 3을 const five = add (2, 3))와 같은 인수를 받아들입니다.


일반적인 함수 (add (2, 3))처럼 호출하는 대신 JSX 구문 (<Add n1 = {2} n2 = {3} />)을 사용한다는 점을 제외하고는 JSX 조각에서도 마찬가지입니다. JSX에 제공되는 "속성"은 props이며 소위 단일 객체에 배치되어 다음과 같이 첫 번째 인수로 컴포넌트 추가 기능에 전달됩니다.

function Add(props) {
2 return (
3 <div>
4 {props.n1} + {props.n2} = {props.n1 + props.n2}
5 </div>
6 )
7}

내가 이것을 이렇게 사용한다면 :

<Add n1={2} n2={3} /> 


렌더링 방법은 다음과 같습니다.


2 + 3 = 5 


참고 : Props은 무엇이든 가능합니다. 이 예에서는 숫자이지만 문자열, 배열, 객체, 함수 등일 수도 있습니다. 


누군가가 제공하지 않는 경우 (<Add n1 = {2} />와 같이) n2의 기본값을 0으로 설정한다고 가정 해 보겠습니다. props에 대한 한 가지 제한은 당신이 그것들을 변경할 수 없다는 것입니다. 그래서 당신은 이런 식으로 할 수 없었습니다 :

function Add(props) {
2 if (typeof props.n2 === 'undefined') {
3 props.n2 = 0
4 }
5 return (
6 <div>
7 {props.n1} + {props.n2} = {props.n1 + props.n2}
8 </div>
9 )
10}

이 작업을 시도하면 다음 오류가 발생합니다.

TypeError: Cannot add property n2, object is not extensible 


이것은 해결하기에 충분히 간단합니다.

function Add(props) {
2 let n2 = props.n2
3 if (typeof n2 === 'undefined') {
4 n2 = 0
5 }
6 return (
7 <div>
8 {props.n1} + {n2} = {props.n1 + n2}
9 </div>
10 )
11}

또는 종종 사람들이 기본 값으로 파괴 구문을 사용한다는 것을 알게 될 것입니다 (이것은 개인적으로 선호합니다).

function Add({n1, n2 = 0}) {
2 return (
3 <div>
4 {n1} + {n2} = {n1 + n2}
5 </div>
6 )
7}

이것은 훌륭하지만 props 값을 동적으로 변경 하려면 어떻게 해야 합니까? 다음과 같은 것을 만들고 싶다고 가정 해 봅시다.

2 +  2 


state가 없으면 다음과 같이하십시오.


function AddWithInput(props) {
2 function handleInputChange(event) {
3 const input = event.target
4 const newN2 = Number(input.value)
5 props.n2 = newN2
6 }
7 return (
8 <div>
9 {props.n1} +{' '}
10 <input type="number" value={props.n2} onChange={handleInputChange} /> ={' '}
11 {props.n1 + props.n2}
12 </div>
13 )
14}

그러나 다음 두 가지 이유로 작동하지 않습니다.


  1. React는 props 객체의 n2 값이 업데이트 되었음을 ​​알지 못하므로 props.n2를 변경할 때 DOM을 업데이트하지 않으므로 변경 사항이 표시되지 않습니다.
  2. 이전과 같이 TypeError 경고가 나타납니다.

이것은 state가 들어오는 곳입니다.


State 


State는 시간이 지남에 따라 변경되는 데이터이며 우리의 상황에 완벽합니다.

function AddWithInput(props) {
2 const [n2, setN2] = React.useState(0)
3
4 function handleInputChange(event) {
5 const input = event.target
6 const newN2 = Number(input.value)
7 setN2(newN2)
8 }
9
10 return (
11 <div>
12 {props.n1} +{' '}
13 <input type="number" value={n2} onChange={handleInputChange} /> ={' '}
14 {props.n1 + n2}
15 </div>
16 )
17}

그것은 효과가 있을 것이며, 이것이 바로 React state가 의도 된 것입니다. 구성 요소의 수명 기간 동안 (구성 요소가 페이지에 존재하는 한) 데이터 값을 추적하기 위한 것입니다.


그러나 AddWithInput 구성 요소의 사용자는 더 이상 초기 값 n2를 더 이상 설정할 수 없습니다. 컴포넌트가 현재 구현되어있는 방식에서는 props.n2를 전혀 참조하지 않습니다. 그러나 state를 초기화 할 때 props를 사용 하여 이 작업을 수행 할 수 있습니다.

function AddWithInput(props) {
2 const [n2, setN2] = React.useState(props.n2)
3
4 // ... etc...
5}

이제 누군가가 <AddWithInput n1 = {2} n2 = {3} />을 수행하면 결과는 다음과 같습니다 (초기 입력 값이 3 임).


2 +  5 


따라서 props은 구성 요소에 전달할 수 있는 "인수"또는 "입력"이며 state는 구성 요소 내에서 관리되며 시간이 지남에 따라 변경 될 수 있습니다.


이 구성 요소를 약간 정리하고 변경 사항을 설명하겠습니다.

function AddWithInput({n1, initialN2 = 0}) {
2 const [n2, setN2] = React.useState(initialN2)
3
4 function handleInputChange(event) {
5 const input = event.target
6 const newN2 = Number(input.value)
7 setN2(newN2)
8 }
9
10 return (
11 <div>
12 {n1} + {' '}
13 <input type="number" value={n2} onChange={handleInputChange} /> ={' '}
14 {n1 + n2}
15 </div>
16 )
17}

props의 기본 값을 사용하여 구조 변경으로 변경하고 props을 n2에서 initialN2로 변경했습니다. prop 값을 사용하여 state 값을 초기화하는 경우 일반적으로 해당 prop의 변경 사항이 고려되지 않음을 알리기 위해 접두사를 접두사로 지정하는 것이 좋습니다. 그것이 당신이 원하는 것이라면, 당신은 state를 높이고 싶을 것입니다.


결론 


이것이 React에서 props과 state의 차이를 없애는 데 도움이 되기를 바랍니다. 기본 개념입니다. 계속해서 아래의 이 작은 앱에서 자신을 테스트하십시오. state는 어디에 있고 props은 어디에 있습니까?


https://codesandbox.io/s/react-codesandbox-oov7o?from-embed