저를 가입시켜 주십시오. 우리는 계속해서 설명과 샘플 코드를 탐색하고 이해합니다!
오늘 우리는 React의 도구 유형을 깊이 있게 연구할 것이다.실제로 내가 이렇게 한 것은 gatsby new <project-name> 명령을 사용할 때 템플릿 코드가 나타나기 때문이다.
내가 먼저 생각한 것은 layout.js에 나타난 코드 부분이다.

Layout.propTypes = {
  children: PropTypes.node.isRequired,
}

이 코드의 흥미로운 점은 기술적으로 말하자면, 이곳의 책임자는 개츠비가 아니라는 점이다.이것은 실제로는 React 코드 (Gatsby는 React를 기반으로 구축됨) 이지만, 이것은 Gatsbyclistarter 프로젝트에 제공된 기존 코드입니다.

너의 벌레를 잡아라!

Proptypes는 React의 기능으로 도구를 통해 전달되는 값을 검증하는 데 도움이 된다.

If you aren't familiar with props there is a bit of an overview in this post.

이 도구들은 도대체 어떻게 된 일입니까?

로리・ 2019년 5월 7일・ 3분 읽기

#react #webdev #javascript #beginners

그 사상은 PropType이 한 구성 요소에서 다른 구성 요소로 전달되는 데이터 형식의 일치하지 않는 것을 포착할 수 있다는 것이다.예를 들어, msg 이 String 인 경우, 이 구성 요소가 전달되는 데 필요한 경우 numberTypescript나 다른 형식이 지원하는 JavaScript 확장이 없어도 React는 PropTypes를 내장된 형식 검사 기능으로 제공합니다.

동작 중의 아이템 유형

PropTypes는 두 가지 수준에서 작동합니다.이것은 정확한 유형의 데이터를 특정 구성 요소에 전달할 수 있도록 확보한다.구성 요소가 정확한 데이터 형식을 수신하고 있는지 확인하기 위해서도 검사합니다.

This post might help you understand components as a concept.

내보내기, 가져오기, 기본값, 오, 세상에!

로리・ 2019년 4월 29일・ 3분 읽기

#javascript #react #webdev #beginners

우리가 시작한 코드에서, 이것은 Layout 구성 요소에 proptype를 설정합니다.즉, 정의가 Layout에 전달된 도구의 검증이다.

Layout.propTypes = {
     ...stuff goes here...
}

얘들아 어디서 왔어?!

이것은 starter 프로젝트에 첨부된 Layout 구성 요소입니다.이 구성 요소에 전달되고 있는 도구를 보세요.이것은 children라는 도구를 전달하고 렌더링 함수체에서 인용합니다.

const Layout = ({ children }) => (
    render={data => (
      <>
        <Header siteTitle={data.site.siteMetadata.title} />
          <main>{children}</main>
          <footer/>
        </div>
      </>
    )}
)

이제 Layout 구성 요소 자체를 어떻게 사용하는지 예시를 봅시다.starter 프로젝트에서 생성된 NotFoundPage 구성 요소에서 이러한 예시를 찾을 수 있습니다.

const NotFoundPage = () => (
  <Layout>
    <SEO title="404: Not found" />
    <h1>NOT FOUND</h1>
    <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
  </Layout>
)

응, 이건 좀 이상해.언뜻 보니 Layout 도구를 전혀 사용하지 않은 것 같다.일반적으로 도구는 키 값으로 전달되며 구성 요소의 열기 표시에 나타납니다.이런 거.

<Example msg="test" />

그리고 Example 구성 요소 내부에서 우리는 도구를 전달하고 msg 내용을 방문할 것이다.그러나 Layout 그러지 않았다.
사실이 증명하듯이 Layout 여전히 도구를 사용하고 있다. 단지 방식이 다를 뿐이다.children 실제로는 특수한 내장 아이템이다.이것은 Layout 라벨의 모든 내용을 가리킨다.

  <Layout>
//ALL OF THIS
    <SEO title="404: Not found" />
    <h1>NOT FOUND</h1>
    <p>You just hit a route that doesn't exist... the sadness.</p>
//TO THIS
  </Layout>
)

레이아웃 열기와 닫기 표시 사이의 모든 내용은 children 도구로 간주됩니다.

검증해 봅시다!

그럼 PropTypes 검증으로 돌아가겠습니다.이제 우리는 children의 도구가 무엇인지 알게 되었고, 우리는 이 내용을 어떻게 검증하는지 이해하기 시작할 수 있다.

Layout.propTypes = {
  children: PropTypes.node.isRequired,
}

우리는 Layout로 임의의 수량의 물건을 포장할 수 있지만, 우리의 유일한 관심은 우리가 어떤 물건을 포장하고 있다는 것이다.우리는 정보가 전혀 없는 페이지를 보여줄 수 없거나, 적어도 보여주고 싶지 않다.빈 배치는 우리가 원하는 것이 아니다.이것이 바로 우리가 있는 이유이다isRequired.
우리는 또 이것이 무엇인지에 대해 모호한 정의를 내리고 싶다.node 키워드는 단지 내가 과장할 수 있는 것을 전달했다는 것이다.그게 뭐든

견본에 머무르지 마라

템플릿의 이 부분은 이미 성숙되어 변경할 수 있다는 것을 기억하십시오.게이츠비 프로그램을 정의할 때, 다른 표준을 강제로 실행해야 할 수도 있습니다.예를 들어 도구를 이러한 부모 요소가 있는 것으로 제한할 수 있습니다.

Layout.propTypes = {
  children: PropTypes.element.isRequired
};

게이츠비는 이를 기점으로 유형 강제를 사용하고 무엇을 할 수 있는지 보여 줍니다.

이렇게!

이 PropTypes 코드 세그먼트가 Layout 구성 요소의 유형 검사를 할 때 하는 동작을 이해했습니다.추가적인 장점으로 우리도 더욱 편안한 내장children 도구를 제공한다.
여느 때와 마찬가지로, 우리는 프레임워크와 프로젝트에서 우리가 이해하는 데 시간이 걸리지 않은 일회용 코드 줄을 자주 본다.나는 네가 호기심 있게 네가 본 모든 것을 탐색하도록 격려한다.그것은 너를 더욱 좋은 프로그래머로 만들 것이다.
더 많은 견본기초가 곧 도래할 것을 기대합니다!