React 구성 요소를 만드는 4가지 방법

대부분의 개발자는 구성 요소의 가장 기본적인 두 가지 유형만 알고 있을 것입니다. 하지만 기술은 나날이 발전하고 있죠? 이제 4가지 유형이 있습니다.

관련성이 있으려면 기술을 최신 상태로 유지해야 합니다. ;)

기능성 부품

둔한 구성 요소 또는 템플릿 구성 요소라고도 하는 주요 목적은 props/return JSX를 받는 것입니다.

Use more as possible

import React from 'react'; 
const HelloWorld = () => {
    return (
    <span>Hello!</span>
    )
}

export default HelloWorld; 

클래스 구성요소

기능적 구성 요소가 수행하는 모든 작업을 수행할 수 있지만 그 이상을 수행할 수 있습니다. 스마트 구성요소라고도 합니다. props를 받을 수 있고 상태 및 수명 주기 메서드를 가질 수 있습니다. 우리는 모든 기능적 구성 요소를 사용하고 연결합니다. 여기 스마트 구성 요소에서.

Not everyone is a king. Use as less as possible

import React from 'react'; 
class HelloWorld extends 
React.Component {
    // LOGIC HERE
    render() {
        return (
        <span>Hello!</span>
        )
    }
}

export default HelloWorld; 

순수 부품

이것은 일반적으로 응용 프로그램을 최적화하는 데 사용됩니다. 순수한 구성 요소는 응용 프로그램의 작업 수를 줄이는 수명 주기 방법shouldComponentUpdate()과 같이 작동하므로 성능을 높이는 데에도 사용됩니다.

Essential component type which I suggest using basically when building larger apps

class example extends 
    PureComponent () {
        return (
        <Text>
        {this.props.text}
        </Text>
     ); 
  }

상위 수준 구성요소(HOC)

컴포넌트 로직을 재사용하기 위한 React의 고급 기술. HOC는 구성 요소를 반환하는 함수입니다. 다른 구성 요소와 논리를 공유하는 데 사용됩니다.

You can use to 'hack' the rule that you can only return one JSX element from a component

import React from 'react'; 
import MyComponent form './path'

class HelloWorld extends 
    React.Component {
        render() {
            return (
            <div>
                {this.props.myArray.map((el) => (<Comp data={el} key={el.key} /> ))}
                </div>)
        }
    }
export default HelloWorld; 

📘 읽어주셔서 감사합니다 | 즐거운 코딩 ☕

이번 주에 내가 게시한 놀라운 기사와 몇 가지 제안 또는 발표에 대한 주간 뉴스레터를 받으세요. Here에서 구독