React에서 Props는 무엇입니까?

우리는 이전 블로그에서 props와 state를 비교할 때 React의 Props가 무엇인지, 그리고 이를 기능 및 클래스 구성 요소에서 사용하는 방법을 이미 보았습니다.

이 블로그에서는 앱의 흐름을 동적으로 만들 때 React에서 props가 얼마나 중요한지 이해할 것입니다.

의 시작하자…

React에서 props는 무엇입니까?

Props는 부모와 자식 구성 요소 사이에 전달할 수 있는 속성의 짧은 형식이며 원하는 대로 사용할 수 있지만 읽기 전용 속성이므로 값을 변경할 수 없습니다.

위에서 말했듯이 앱의 흐름을 쉽게 동적으로 만들 수 있습니다.

모든 것을 자식 구성 요소에 소품으로 전달할 수 있습니다. 특히 부모 구성 요소의 상태를 업데이트하는 데 도움이 되는 함수입니다.

간단한 React 코드로 props를 이해합시다.
우리는 두 개의 재사용 가능한 구성 요소 Example.js와 Tool.js를 만들 것입니다. 여기서 예시 구성 요소는 상위 구성 요소이고 도구 구성 요소는 표시된 대로 하위 구성 요소입니다.



이제 예제 구성 요소에서 도구 구성 요소를 가져오고 도구 구성 요소와 함께 prop — name="Ateev"를 전달합니다.

import React from "react";
import Tool from "./Tool";
const Example = () => {
return (
<>
<div className="app">
<Tool name="Ateev" />
</div>
</>
);
};
export default Example;

그리고 우리는 도구 컴포넌트에서 이 소품을 다음과 같이 사용할 것입니다.

import React from "react";
const Tool = (props) => {
return (
<div className="bg-dark text-white">
<h1 className="px-5 pt-5">My name is {props.name}.</h1>
<p className="fs-5 px-5 pb-5">I am a front-end developer.</p>
</div>
);
};
export default Tool;

우리는 다음과 같은 것을 얻을 것입니다 –



예제 구성 요소의 이름을 도구 구성 요소에 props로 전달했으며 여기에서 도구 구성 요소에서 이것을 그림과 같이 props.name으로 사용했으며 위에 값이 있습니다.

소품을 전달하고 자식 구성 요소 내부에서 사용하는 다양한 방법이 있습니다.

먼저 자식 컴포넌트에서 props를 사용하는 방법에 대해 논의해 보겠습니다. 하는 방법은 크게 3가지가 있습니다.

디스트럭처링 포함

비구조화 없이

defaultProps 사용

전체 기사here를 읽을 수 있습니다.