초보자를 위한 소품(반응)

프레임워크가 바닐라 자바스크립트보다 훨씬 흥미롭고 훨씬 더 잘 반응하게 만드는 것은 프레임워크가 구성 요소라고 하는 앱의 섹션에 구축된다는 사실입니다. 이러한 구성 요소는 앱의 해당 섹션에서 원하는 작업을 반환하는 함수이며 훨씬 깔끔한 코드를 생성합니다. 그러나 우리가 초점을 맞출 것은 한 구성 요소에서 다음 구성 요소로 정보를 전달하는 방법입니다.

소품이란?

Props는 속성의 약자이며 위에서 말했듯이 한 구성 요소에서 다른 구성 요소로 정보/데이터를 전달하는 데 사용됩니다.

예를 살펴보겠습니다.

// PARENT COMPONENT

function ArticlePost() {
  return (
    <div>
      <ArticleContent articleText="Today Sherry Tomford, the girl who's been missing for the last 12 years, has finally been found" />
    </div>
  );
}

// CHILD COMPONENT

function ArticleContent(props) {
  return <div>{props.articleText}</div>;
}

이 예에서는 2개의 구성 요소를 볼 수 있습니다. 하나는 부모이고 다른 하나는 자식입니다. 상위 구성 요소(ArticlePost)는 기사 텍스트가 포함된 div를 반환합니다. 자식 구성 요소(ArticleContent)로 이동하면 매개 변수로 props를 사용할 수 있으며 그 뒤에 반환 항목(props.articleText)이 표시됩니다. 이렇게 하면 부모 구성 요소에서 기사 텍스트를 가져오려고 한다는 것을 코드에 알릴 수 있습니다.

참고: 데이터는 상위 구성 요소에서 하위 구성 요소로만 흐릅니다. 부모가 아이에게 해야 할 일을 지시하는 것과 같은 방식으로, 그 반대가 아닙니다.

이중 점검:

console.log(props);
// => { articleText: "Today Sherry Tomford, the girl who's been missing for the last 12 years, has finally been found" }

우리는 props를 console.log할 수 있으므로 실제로 기사 텍스트의 부모 구성 요소 데이터를 참조하고 있음을 확인할 수 있습니다.



이것이 왜 도움이 됩니까?

일반적으로 구성 요소는 다른 파일에 있으므로 props를 사용하면 코드를 한 번 작성하고 사용하려는 모든 곳에서 다시 작성할 필요 없이 여러 다른 영역에서 사용할 수 있습니다.

왜 그 데이터를 전달하고 싶습니까? 원래 구성 요소를 사용할 수 없습니까?

음, 구성 요소마다 기능이 다릅니다. 두 번째 구성 요소는 첫 번째 구성 요소의 데이터 일부에만 액세스하여 해당 데이터가 다른 작업을 수행하도록 할 수 있습니다.

예를 들어 여기에서 살펴볼 수 있습니다.



보유하고 있는 상위 구성 요소(isPublished)가 있지만 조건부 렌더링을 통해 데이터를 조작할 수 있도록 여기에서 하위 구성 요소(BlogContent)로 가져왔습니다. isPublished가 false(게시되지 않은 경우)이면 null을 반환하여 사용자가 표시된 DOM 요소를 볼 수 없도록 합니다. 그러나 게시된 경우 다음 게시된 콘텐츠를 표시합니다(반환에 표시됨. 반환은 사용자에게 기사 텍스트와 읽을 시간을 표시하려고 합니다. 이것은 우리가 소품을 사용하여 데이터를 가져오는 방법과 이유에 대한 보다 발전된 예입니다. 부모 기능/구성 요소는 자식에서 사용하고 데이터를 조작하여 우리가 원하는 것을 보여줍니다.