React에서 Props는 무엇입니까?

이 튜토리얼에서는 PROPS가 무엇인지 배우고 state와 props의 차이점도 살펴보겠습니다.

소품이란 무엇입니까?

소품은 React 구성 요소에 전달되는 인수입니다. 소품은 React에서 구성 요소 통신을 허용합니다.

소품은 함수 매개변수와 유사하며 구성 요소와 함께 사용됩니다.

자세히 보자...

JavaScript 함수 및 인수의 작동 방식을 알고 있다면 props의 작동 방식을 이미 알고 있는 것입니다. 소품은 데이터를 전달하는 매개체일 뿐입니다.

먼저 간단한 JavaScript 함수를 살펴보겠습니다.

let myFunc = (name) => {
   return `My name is ${name}`; 
}

myFunc("Rahul"); 

//My name is Rahul

멋진 것은 없습니다. myFunc 함수에 인수가 전달된 다음 반환됩니다. React에서 이 작업을 수행하는 방법을 살펴보겠습니다.


Cool 구성 요소를 기억하십니까? 다시 살펴보겠습니다.

import React from 'react'; 

let Cool = () => {
  return (
    <p>This is reusable component.</p>
  ); 
}

export default Cool; 

그리고 이것은 Cool.js를 호출하는 index.js 파일(루트 파일)입니다.

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import Cool from './Cool'; 
ReactDOM.render(
  <React.StrictMode>
     <Cool />
  </React.strictMode>, 
  document.getElementById('root')
); 

이제 Cool Component를 재사용하고 매번 다른 메시지를 표시하고 싶은 것은 무엇입니까? 이를 위해 HTML 속성과 같은 사용자 정의 메시지를 전달하고 소품을 사용하여 메시지를 수신하고 표시할 수 있습니다.

이제 Cool.js의 코드를 다음과 같이 변경해 보겠습니다.

import React from 'react'; 

let Cool = (props) => {
  return (
    <p> { props.myMessage } </p>
   ); 
} 

export default Cool; 

이제 index.js 파일(또는 구성 요소가 사용되는 모든 위치)에서 myMessage 값을 설정합니다.

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import Cool from './Cool'; 
ReactDOM.render(
  <React.StrictMode>
     <Cool myMessage="This message is passed by props" />
  </React.strictMode>, 
  document.getElementById('root')
); 

6행에서 볼 수 있듯이 Cool 구성 요소의 props 객체가 수신하는 myMessage 변수의 값을 설정했습니다. 따라서 화면에서 사용자 지정 메시지를 볼 수 있습니다. props 객체에 여러 변수를 전달할 수도 있습니다.
예:

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import Cool from './Cool'; 
ReactDOM.render(
  <React.StrictMode>
     <Cool 
         myMessage="This message is passed by props"
         name = "Rahul"
     />
// The above can be accesed from Cool.js as props.myMessage and props.name
  </React.strictMode>, 
  document.getElementById('root')
); 

props의 힘을 완전히 이해하기 위해 루트 파일(index.js)에 각각 다른 메시지가 있는 여러 Cool 구성 요소를 만들 수 있습니다.

import ReactDOM from 'react-dom'; 
import Cool from './Cool'; 
ReactDOM.render(
  <React.StrictMode>
     <Cool myMessage="This is Message 1" />
     <Cool myMessage="This is Message 2" />
     <Cool myMessage="This is Message 3" />
  </React.strictMode>, 
  document.getElementById('root')
); 

Cool.js 파일을 그대로 유지하고 결과를 살펴보겠습니다.


보시다시피 소품을 사용하면 동일한 구성 요소를 약간 다른 방식으로 렌더링할 수 있으므로 완전히 재사용할 수 있습니다. 여기서는 문자열을 사용했지만 props는 유효한 JavaScript 유형(객체, 배열, 부울 등)이 될 수 있습니다.

상태와 소품의 차이점

상태는 구성 요소 내부에서 유지 관리되는 데이터입니다. 로컬이며 구성 요소 자체가 소유합니다. 구성 요소만 해당 상태를 업데이트할 수 있습니다.

소품은 부모 구성 요소에서 전달된 데이터입니다. 그것들을 받는 구성 요소 내에서 변경할 수 없습니다.

차이점은 데이터를 소유하는 구성 요소에 관한 것입니다. 상태는 로컬로 소유되며 구성 요소 자체에서 업데이트됩니다. 소품은 부모 구성 요소가 소유하며 읽기 전용입니다.


아래 질문에 댓글을 달아주세요..
😎읽어주셔서 감사합니다 | 행복한 반응📘