소품이란 무엇이며 React에서 소품을 전달하는 방법

React에 익숙해지고 있다면 React의 코딩이 모든 코드를 여러 구성 요소로 나눈다는 것을 알고 계실 것입니다.
이러한 모든 구성 요소에는 애플리케이션에 기여하는 자체 데이터가 있습니다. 귀하의 질문은 한 구성 요소에서 다른 구성 요소로 정보를 어떻게 전달합니까? 그 때 React 소품이 작동합니다. 웹 애플리케이션에서 필요한 기능을 캡처하거나 필요한 경우 단순히 변수를 통해 정보를 전달하기 위해 소품을 다른 구성 요소로 렌더링해야 하는 경우가 많습니다. 소품은 객체의 속성인 속성의 줄임말입니다.

소품을 제대로 전달하려면 전달할 특정 구문이 필요합니다. 이를 위해서는 키-값 쌍이 필요합니다. 모든 키에 대해 전달하는 데이터를 보유하는 값이 필요합니다.

아래 예를 보십시오.

import react from 'react'
import Names from './Names'

function LandingPage() {

const nameOne = "Teejay"

return (

<div>
  <Names name={nameOne} />
</div>

{/* In these examples the format will be key={value} */}
{/* The key can be any name of choice */} 
{/* The value must hold the same name as the function or variable you are passing */}


)

}

아래 예는 수신 구성 요소입니다.

export default function Names(props) {



  return (  
    <h1>Hello Everyone, My Name is {props.name}</h1>

)

}

위에서 볼 수 있듯이 'props'를 인수로 전달하고 점 표기법을 사용하여 'name'인 키를 대상으로 지정합니다. props를 전달할 때 전달하려는 구성 요소는 먼저 props를 인수로 받아야 합니다. 통과할 때 액세스할 수 있는 유일한 방법입니다. 예를 들어 농구와 같다고 생각해 보십시오. 농구공을 쏘기 위해 특정 구성 요소가 필요하다고 가정해 보겠습니다. 이 구성요소가 슛하려면 농구공을 이 구성요소로 전달해야 합니다. 그것이 소품이 작동하는 방식입니다.

소품에는 특정 데이터 흐름도 있습니다. 아래쪽으로만 전달할 수 있습니다. 자식 및 형제 구성 요소만 전달할 수 있습니다. 데이터를 위쪽으로 보내는 방법이 있지만 현재로서는 다소 복잡한 개념입니다. props가 제대로 작동하는 방식을 파악하면 React가 독창성 측면에서 무엇을 잠금 해제할 수 있는지 깨닫는 데 한 걸음 더 가까워집니다. 소품이 구성 요소에서 구성 요소로 전달되는 방식에 약간 도움이 되었기를 바랍니다. 즐기고 코딩을 계속하십시오!