반응 | 소품

안녕하세요 개발자 여러분! 지난 블로그에서 우리는 구성 요소와 React 세계에서 Stateful, Stateless 및 Presentational 구성 요소의 의미에 대해 이야기했습니다. 환상적이야! 이 시점에서 구성 요소를 만드는 데 자신이 있고 유연하고 조직적인 응용 프로그램에 생명을 불어넣을 수 있습니다.

React를 배우고 있다면 JavaScript에 익숙하다고 가정할 수 있습니다. JavaScript에 익숙하다면 개체 속성이 무엇인지 알 것입니다. 그래서 이 시점에서 당신은 뭔가 빠졌다는 것을 알고 생각하고 있습니다. "음, 구성 요소는 훌륭하고 모든 것이지만, 구성 요소에서 구성 요소로 내 데이터를 어떻게 전달할 수 있습니까?"당신은 아마 이미 답을 짐작했을 것입니다. 예, 소품을 사용합니다.

구성 요소의 정말 기능적이고 실용적인 점은 재사용이 가능하다는 것입니다. 개발자로서 우리는 반복되는 코드를 좋아하지 않습니다. 구성 요소를 사용하는 것이 이를 방지하는 가장 좋은 방법입니다. 이 예를 살펴보겠습니다.



구성 요소 전달에 대해 알아야 할 첫 번째 사항은 구성 요소를 가져오고 내보내야 한다는 것입니다. 다음 코드 줄 덕분에 구성 요소를 내보낼 수 있습니다.

export default ComponentEx;

좋아, 이제 여기서 무슨 일이 일어나는지 보자. 2행부터 시작하겠습니다.

import ComponentEx from "./ComponentEx;"

이 코드는 매우 자명합니다. 이 경우 "./ComponentEx"파일에서 ComponentEx를 가져옵니다. ComponentEx는 파일의 자리 표시자일 뿐이라는 점을 알아야 합니다. 이 LalaLand의 이름을 지정할 수 있고 동일하게 작동합니다. 코드 에티켓(및 논리)의 경우 가져오는 구성 요소를 나타내기 위해 구성 요소 이름을 사용합니다.

이제 13번째 줄을 살펴보겠습니다.

 < ComponentEx name={"Ethan"} age={"8"} user={user} / > 

정적 데이터를 렌더링하는 구성 요소를 원하지 않기 때문에 한 구성 요소에서 다른 구성 요소로 데이터를 전달하려고 합니다. 대신 동적 데이터를 구성 요소에 전달하는 것이 목표입니다. 여기에서 React의 소품이 사용됩니다. React에서 데이터를 전달하는 방법은 사용자 정의 HTML 속성을 정의하는 것입니다. 이 예에서는 세 가지 소품이 구성 요소에 전달되었습니다.

name={"Ethan"}
age={"8"}
user={user}

JSX 구문을 사용하여 데이터를 할당합니다. 중괄호를 잊지 마세요! 보시다시피 데이터는 다른 형식으로 전달될 수 있습니다. 이 경우 문자열, 숫자 및 개체를 전달합니다. 꽤 멋지죠?

ComponentEx 구성 요소를 살펴보겠습니다.



우리가 볼 수 있듯이 기능적 구성 요소에서 props를 인수로 전달합니다. "소품"이 있으면 데이터를 사용할 준비가 된 것입니다. 이 경우 p 태그에 데이터를 출력하고 있습니다. 소품을 사용하여 데이터에 액세스하는 방법은 다음과 같습니다.

 {props.name} 

다시 말하지만, 우리는 JSX를 사용하고 있으므로 중괄호를 잊지 마세요!

...그리고 그게 다야! 이제 구성 요소 간에 데이터를 전달할 준비가 되었습니다!

이 블로그를 마치기 전에 세 가지 중요한 사항에 대해 논의하고 싶습니다.

1. 소품은 상위 구성 요소에서 하위 구성 요소로 상속됩니다. 물류 또는 애플리케이션을 만들 때 이 점을 염두에 두십시오.
2. 클래스를 사용할 때 소품 앞에 이것을 추가하십시오. 예를 들어:

 {this.props.name} 

클래스를 사용할 때 props 속성을 포함하는 React.Component를 확장한다는 점을 기억하세요. 알아요, 매직!

3. 소품은 읽기 전용입니다. 구성 요소에서 구성 요소로 소품을 전달해도 구성 요소가 상호 작용하지 않습니다. 그러기 위해서는 호출 상태를 사용해야 합니다.

이제 그게 다야! 이번에는 진짜로. 다음 블로그에서는 새로운 친구 상태에 대해 자세히 알아볼 것입니다.

읽어 주셔서 감사합니다! 😊