소품 - 초보자 가이드.

소품이 무엇인지 알기 전에 React 요소 및 구성 요소가 무엇인지 기본적으로 이해합시다. 또한 이 글에서는 이 개념을 잘 이해하지 못하는 모든 초보자를 위해 가능한 가장 간단한 방법으로 소품을 설명할 것입니다.
그럼 시작하겠습니다 💫

React 구성 요소 대 요소

아시다시피 React는 HTML 대신 JSX(JavaScript XML)를 사용합니다. JSX를 사용하면 javascript 파일에 HTML 요소를 작성한 다음 해당 HTML 태그를 React 요소로 변환할 수 있습니다.

// This is a React element, not a component
const title = <h1> Heading  </h1>;

이것은 일반<h1> 태그가 jsx 내부에서 보이는 방식입니다.
따라서 기본적으로 React 요소는 가장 작은 구성 요소이며 더 많은 요소가 모여 구성 요소를 형성합니다.

자, 구성 요소로 넘어 갑시다. React 구성 요소는 우리가 보고자 하는 마크업(요소와 같은)을 반환하지만 고전적인 함수 구문을 통해 반환하는 자바스크립트 함수입니다.

function Component() {
  return <h1>This is the Text</h1>;
}

여기서 컴포넌트는 자바스크립트 함수로 생성되므로 함수형 컴포넌트라고 합니다.
이 구성 요소는 ReactDOM의 render() 메서드를 사용하여 요소와 동일한 방식으로 렌더링됩니다. 하지만 자바스크립트에서처럼 함수 이름을 호출하는 대신 React 컴포넌트를 호출합니다.

//In React
ReactDOM.render(<Component/>, document.getElementById('id'));
//In Javascript
ReactDOM.render(Component(), document.getElementById('id'));

따라서 React 요소는 일반 HTML 태그를 사용하는 반면 React 구성 요소에서는 함수 이름이 태그 이름을 제공합니다.

소품

Props are the arguments you pass into a React component that then render a React element.It can be a string, object, array or a function used to pass dynamic data between components. React has a uni-directional data flow meaning props get passed from parent to child. Props actually gets passed into React components.

그다지 도움이 되지 않은 것 같아서 간단한 언어로 조금 바꿔보겠습니다 🔍

Props are like parameters of a function. We use these to make our component dynamic like we use parameters to make our function dynamic.

그게 더 좋았어? 이제 이 정의를 염두에 두고 간단한 예를 보여드리겠습니다.
채널의 친구에게 환영 메시지를 표시하는 구성 요소를 살펴보겠습니다.

const WelcomeFriend = () => (
    <span>Welcome to my channel, Kiran</span>
)

이제 Kiran뿐만 아니라 모든 사람을 환영하고 싶다면 내 구성 요소를 리팩터링하여 사람의 이름과 같은 소품을 가져오고 구성 요소의 이름을 일반적인 이름으로 바꿀 수 있습니다. 이제 이 구성 요소를 사용하여 내 채널의 모든 사람을 환영할 수 있기 때문입니다.

const Welcome = ({name}) => (
    <span>Welcome to my channel, {name}</span>
)

이제 👇🏻와 같은 많은 친구들을 환영할 수 있습니다.

const App = () => (
    <Welcome name="Sumesh">
    <Welcome name="Keshav">
    <Welcome name="Roger">
)

이 가이드가 도움이 되었기를 바랍니다. ✌🏻
제가 다루었으면 하는 개념에 대한 피드백, 토론 및 제안을 환영합니다. 이것과 관련하여 질문이 있거나 추가, 수정 또는 제거해야 할 사항이 있으면 언제든지 댓글, 이메일 또는 DM을 보내주십시오 📥.
감사합니다 ✨!