props는 무엇이며 react js에서 props를 사용하는 방법은 무엇입니까?

React Js를 배우기 시작했거나 기술을 연마하기를 원하기 때문에 이 기사를 시작했다고 생각합니다. 어떤 경우이든 시작하도록 합시다. React js는 한 구성 요소에서 다른 구성 요소로 데이터를 전송할 때 다른 JavaScript 프레임워크에 비해 접근 방식이 다릅니다. Props는 한 구성 요소에서 다른 구성 요소로 데이터를 보내는 게이트웨이를 제공하는 데 유용합니다. props가 react에서 어떻게 작동하는지 더 잘 이해하려면 먼저 구성 요소가 일반적으로 어떻게 작동하는지 잘 이해해야 합니다. 내 YouTube 채널에서 react js를 사용하는 방법에 대한 튜토리얼을 시청하는 것이 좋습니다. 아래 링크.


( )

소품이란 무엇입니까?

소품은 속성을 나타냅니다. HTML 속성을 통해 반응 구성 요소에 전달되는 인수입니다.
React Props는 JavaScript의 함수 인수와 HTML의 속성과 같습니다.
예를 들어 HTML에서 링크 태그를 사용합시다.<a href = "/home" />href는 속성이고 값은 따옴표로 묶인 데이터입니다.
따라서 기본적으로 prop은 한 구성 요소에서 다른 구성 요소로 데이터를 보내는 데 사용되는 React의 특수 키워드입니다.
한 가지 중요한 점은 props를 통해 전달되는 데이터는 단방향이라는 것입니다. (상위 구성 요소에서 하위 구성 요소로)
또한 상위 구성 요소에서 하위 구성 요소가 수신한 데이터는 읽기 전용입니다. 자식 구성 요소 내에서 데이터를 변경해서는 안 됩니다.
소품 활용법

먼저 속성과 그 값(데이터)을 정의

그런 다음 Props를 사용하여 자식 구성 요소에 전달합니다

.

3. 마지막으로 Props 데이터를 렌더링합니다.
두 개의 구성 요소를 만들고 ParentComp.js 및 ChildComp.js로 이름을 지정합니다.
아래는 내 상위 구성 요소와 중첩된 하위 구성 요소입니다.

`"./ChildComp"에서 ChildComp 가져오기

함수 부모컴( ) {

return (
    <div>
      <h1>I am the parent component</h1>
  <ChildComp />
    </div>
)

}

기본 ParentComp 내보내기`

아래는 우리의 자식 구성 요소입니다.
function ChildComp() {
return (
<div>
<h2>I will receive data from my parent soon</h2>
</div>
)
}
그래도 우리 자식 컴포넌트의 아주 좋은 확인이었습니다😂
이제 렌더링됩니다. 브라우저를 열고 불꽃놀이를 봅시다.



코드를 몇 번 복제하여 자식 구성 요소를 여러 번 렌더링할 수 있습니다.
`기능 부모컴( ) {

return (
    <div>
      <h1>I am the parent component</h1>
  <ChildComp />
  <ChildComp />
  <ChildComp />

    </div>
)

}`

이것이 우리가 화면에 표시되는 것을 볼 것입니다



이제 문제는 동적 출력을 원할 경우 어떻게 됩니까?
각 하위 구성 요소의 데이터가 다를 수 있기 때문입니다. 이 문제는 좋은 친구 소품으로 해결할 수 있습니다. 방법을 보자🙌
앞서 언급한 html 링크 예제와 관련하여<a href="www.twitter.com">Click and start tweeting</a>
React js의 경우. 값을 보간으로 래핑하여 동일한 작업을 수행할 수도 있습니다.{}<ChildComp attribute = {value} />우리는 많은 속성을 가질 수 있으며 태그의 해당 값에 할당할 수 있습니다.
그럼 이제 대표적인 예를 살펴보겠습니다.
부모 구성 요소에서 자식 구성 요소가 곧 부모 구성 요소에서 데이터를 수신할 것이라고 확인했기 때문에 자식 구성 요소에 동적 데이터를 제공할 수 있습니다.

`기능 부모컴( ) {

return (
    <div>
      <h1>I am the parent component</h1>
  <ChildComp passion =  {'I love Coding to the fullest'} />

    </div>
)

}
Lets see how we can receive such data in our child component
function ChildComp( props ) {
return (
<div>
<h2>{props.passion}</h2>
</div>
)
}
함수 매개변수에 props 키워드를 명시했는지 확인하십시오.
.
또는 값을 따옴표로 묶어 데이터를 보낼 수도 있습니다.
`
함수 부모컴( ) {

return (
    <div>
      <h1>I am the parent component</h1>
  <ChildComp name = "Alex" proffession = "Software Enginner" />
    </div>
)

}
`
이제 자식 구성 요소에서 데이터를 수신하는 방법을 살펴보겠습니다.



요약:

Props는 속성을 나타내며 React의 특수 키워드입니다.

props가 함수 인수와 같은 구성 요소에 전달되고 있습니다.

Props는 한 방향으로만 구성 요소에 전달할 수 있습니다(부모에서 자식으로).

Props 데이터를 변경할 수 없습니다(읽기 전용).

props를 잘 이해하는 것은 react js를 사용하여 애플리케이션을 빌드할 때 매우 중요합니다.

이 콘텐츠가 재미있으셨나요?😘😍
아래에 댓글을 남겨주시고 내용에 대해 어떻게 생각하시는지 알려주세요. 🤷‍♂️ 감사합니다.