반응 기초: 사용자 정의 구성 요소 만들기

28934 단어 react codenewbie javascript

안녕, 세상.👋

이 시리즈의 다섯 번째 문장My Review of Kent C. Dodds's EpicReact.Dev을 환영합니다.이 일련의 블로그 글은 단지 내가 EpicReact.Dev 세미나 자료에 대한 회고일 뿐이라는 것을 주의하십시오.나는 단지 내 방식으로 내가 배우고 이해한 것을 설명하고 싶을 뿐이다.이것은 Kent C. Dodds 또는 EpicReact.Dev과는 아무런 공식 연락도 없다.동영상 설명과 세미나 자료를 직접 읽을 때 더 많이 배울 수 있다.세미나 자료도 진도와 개원을 스스로 정한 것이다.따라서 세미나에 직접 참가하고 싶다면 React Fundamentals Workshop Repo 로 넘어가 설명에 따라 조작할 수 있다.
만약 이 시리즈의 이전 문장을 읽지 않았다면, 계속하기 전에 그것들을 먼저 읽으십시오.다음 글의 링크를 추가합니다.

Introduction

Javascript You Need To Know For React

React Fundamentals - Intro to React Raw APIs

React Fundamentals - Understanding JSX

이전 글에서 JSX에 대한 다양한 내용을 배웠습니다. 예를 들어 React 변환입니다.createElement()는 JSX를 호출하고, 반대로 JSX에 값을 삽입하고, JSX에 도구를 전파합니다. 본고에서 JSX에서 사용자 정의 구성 요소를 만드는 방법을 배울 것입니다.

카탈로그

Creating Basic Reusable Function

Using React.createElement

Using JSX

Validation with PropTypes

Using prop-types Package

React Fragments

The examples shown in this article are taken from Kent C. Dodds's React Fundamentals workshop repo.

기본 재사용 가능 기능 만들기

다음 JSX 태그를 고려하십시오.

<div className="container">
    <div className="message">Hello World</div>
    <div className="message">GoodBye World</div>
</div>

현재 우리의 목표는 중복을 피하는 것이다EpicReact.Dev.
우리가 일반적으로vanillajavascript에서 하는 것처럼, 텍스트를 매개 변수로 하고 필요한 JSX를 되돌려주는 재사용 가능한 함수를 만듭니다.

function message(text) {
    return <div className="message">{text}</div>
}

이제 우리는 다음과 같은 방식으로 JSX 태그를 작성할 수 있다.

<div className="container">
    {message("Hello World")}
    {message("GoodBye World")}
</div>

문자열 값을 매개 변수로 받아들이지 않고 <div className="message">...</div> 키를 포함하는 대상을 전달할 수 있도록 조금만 재구성합시다.

function message(props) {
    return <div className="message">{props.children}</div>
}

<div className="container">
    {message({children: "Hello World"})}
    {message({children: "GoodBye World"})}
</div>

우리는 심지어 더 나아가 어린이 도구를 분해할 수 있다.

function message({children}) {
    return <div className="message">{children}</div>
}

<div className="container">
    {message({children: "Hello World"})}
    {message({children: "GoodBye World"})}
</div>

React 를 사용합니다.createElement

이전에 우리가 이미 본 children의 첫 번째 매개 변수는 우리가 보여주고 싶은 표기 유형이다.
예를 들어, React.createElement() 는 렌더링됩니다 React.createElement('div', {}, 'Hello World').
그러나 <div>Hello World</div>의 첫 번째 매개 변수도 하나의 함수를 매개 변수로 받아들일 것이다. 이 매개 변수는 JSX, 문자열, 숫자 등 표현식을 렌더링할 수 있는 것을 생성한다.
그러면 상술한 코드를 재구성하여 사용합시다React.createElement()

function message({children}) {
    return <div className="message">{children}</div>
}

<div className="container">
    {React.createElement(message, {children: "Hello World"})}
    {React.createElement(message, {children: "GoodBye World"})}
</div>

JSX 사용

이전 글에서 우리는 React.createElement() 호출을 JSX로 바꾸는 방법을 보았다.
예를 들어, React.createElement() 의 JSX는 {React.createElement("div", {children: "Hello World"})}유사한 방법으로 <div>Hello World</div> 를 JSX로 변환해 보겠습니다.

<message>Hello World</message>

만약 우리가 같은 방법을 따른다면, 우리는 최종적으로 위의 JSX 표시를 얻을 것이다.
우리가 현재 알고 있는 바에 의하면, 상술한 코드는 반드시 예상대로 일해야 한다.그럴 리가 없어요.바벨이 JSX를 어떻게 컴파일해서 반응했는지 때문이다.createElement().
위의 JSX는 {React.createElement(message, {children: "Hello World"})} 대신 React.createElement("message", {children: "Hello World"}) 로 컴파일됩니다.구별에 주의하다.첫 번째 상황에서 매개 변수는 문자열React.createElement(message, {children: "Hello World"})이고 두 번째 상황에서 매개 변수는 "message" 함수에 대한 인용이다.
우리가 이 목표를 실현하는 방법은 매우 간단하다.우리는 함수 이름의 첫 번째 자모를 대문자로 하기만 하면 된다.

function Message({children}) {
    return <div className="message">{children}</div>
}

<div className="container">
    <Message>Hello World</Message>
    <Message>GoodBye World</Message>
</div>

현재 이것message은 <Message>Hello World</Message>으로 번역될 것이다. 이것이 바로 우리가 필요로 하는 것이다.
Babel이 각 JSX 형식을 컴파일하는 방법을 보려면 다음 예제를 참조하십시오.
JSX
반응하다createElement()React.createElement(Message, {children: "Hello World"}) <Capitalized /> React.createElement(Capitalized) <property.access /> React.createElement(property.access) <Property.Access /> React.createElement(Property.Access) <Property['Access'] /> SyntaxError <lowercase /> React.createElement('lowercase') <kebab-case /> React.createElement('kebab-case') <Upper-Kebab-Case /> React.createElement('Upper-Kebab-Case') <Upper_Snake_Case /> React.createElement(Upper_Snake_Case) <lower_snake_case />

PropType을 사용하여 검증

다음 메시지 구성 요소를 고려하십시오.

function Message({name}) {
    return <div className='message'>Hi, your name is {name}.</div>
}

이 구성 요소를 다음과 같이 사용합시다.

<Message name="foo" />
<Message />
<Message name={2} />

이게 생겨요.

// OK
Hi, your name is foo.

// Should ideally throw an error
Hi, your name is .

// Should ideally throw an error
Hi, your name is 2.

따라서 만약에 우리가 하나의 숫자를 명칭 속성으로 전달하거나 만약에 우리가 어떤 속성을 전달하지 않는다면 텍스트가 나타나더라도 이상적인 상황에서 오류를 던져야 한다. 왜냐하면 React.createElement('lower_snake_case')는 의미가 없기 때문이다.
다행히도,React는 우리에게 proptype을 사용하여 이 점을 실현하는 방법을 제공했다.

const PropTypes = {
    string(props, propName, componentName) {
        if (typeof props[propName] !== 'string') {
            return new Error(`In component ${componentName}, ${propName} needs to be a string, but it was of type ${typeof props[propName]}`)
        }
    },
}

function Message({name}) {
    return <div className='message'>Hi, your name is {name}.</div>
}

// Component accepts an object as its `propTypes`. 
// Each key in that object is the name of each prop. 
// Each value is a function that takes (props, propName, componentName) 
//      as its arguments and returns an error if validation fails.
Message.propTypes = {
    name: PropTypes.string,
}

문자열 이외의 모든 내용을 Hi, your name is .prop에 전달하려고 시도할 때 오류가 발생합니다.
주:

성능 때문에 React는 프로덕션 환경에서 PropType을 비활성화합니다.

이름 패키지 사용

상술한 상황이 매우 흔하기 때문에,React팀은 prop-types라는 가방을 만들었는데, 이 가방은 유사한 방식으로 작업할 것이다.예를 들어, 만약 우리가 prop-typesprop과 문자열이 필요하기를 원한다면, 우리는 다음과 같은 방식으로 name 패키지를 사용할 수 있다.

function Message({name}) {
    return <div className='message'>Hi, your name is {name}.</div>
}

Message.propTypes = {
    name: PropTypes.isRequired.string,
}

환매에 대한 자세한 내용은 prop-types 를 참조하십시오.

반응 파편

<div id='root'></div>

다음 용례를 고려해 봅시다.
React를 사용하여 prop-types 및 <span>Hello</span> 를 <span>World</span> 에 추가해야 합니다.
마지막으로 표시는 다음과 같이 해야 한다

<div id='root'>
    <span>Hello</span>
    <span>World</span>
</div>

이 정도까지 할 수 있는지 봅시다.

const rootElement = document.getElementById('root')

const elementOne = React.createElement('span', null, 'Hello')
const elementTwo = React.createElement('span', null, 'World')

ReactDOM.render(?????, rootElement)

이제 마지막 줄rootElement의 위치는 무엇입니까?그것은 ?????일 수도 없고, elementOne일 수도 없다. 왜냐하면 우리는 그것들이 모두 과장되기를 원하기 때문이다.그러나 elementTwo react 요소 하나만 매개 변수로 하고 루트 Element에 추가합니다.
이 점을 실현하는 방법의 하나는 만약 우리가 이 두 원소를 새로운 원소에 포장할 수 있다면.

const rootElement = document.getElementById('root')

const elementOne = React.createElement('span', null, 'Hello')
const elementTwo = React.createElement('span', null, 'World')

const combinedElement = React.createElement('div', null, elementOne, elementTwo)

ReactDOM.render(combinedElement, rootElement)

위의 코드는 보기에는 괜찮을 것 같지만, HTML을 생성하는 것은 우리가 필요로 하는 것과 다르다.

<div id='root'>
    <div>
        <span>Hello</span>
        <span>World</span>
    </div>
</div>

이것이 바로 코드에서 아래의 조작을 실행할 수 없는 이유입니다.

function Message() {
    return (
        <span>Hello</span>
        <span>World</span>
    )
}

바벨은 이를 단일 반응으로 바꿀 방법이 없기 때문이다.createElement()ReactDOM.render()에 React 세션이 도입된 것은 바로 이 문제를 해결하기 위해서이다.이제 여러 요소를 React v16.2.0 로 둘러싸기만 하면 되돌려받을 수 있다.
예:

function Message() {
    return (
        <React.Fragment>
            <span>Hello</span>
            <span>World</span>
        </React.Fragment>
    )
}

React는 렌더링할 때 이 점을 무시합니다React.Fragment.
따라서 앞의 문제는 현재 다음과 같은 방식으로 해결할 수 있다.

const elementOne = React.createElement('span', null, 'Hello')
const elementTwo = React.createElement('span', null, 'World')

const combinedElement = React.createElement(React.Fragment, null, elementOne, elementTwo)

ReactDOM.render(combinedElement, rootElement)