Archive

React.js Pure Component,Render multiple Tags,Prop-Types package

29 Jan 2021 | React

React.js Pure Component,Render multiple Tags,Prop-Types package

  1. Pure Component

    • shoudComponentUpdate() 혹은 React.memo()를 남용하게 되면 성능 저하가 우려될 수 있다
    • PureComponent는 shoudComponentUpdate() 혹은 React.memo()를 호출하지 않아도 지가 알아서 바뀐 부분만 check를 해주는 명석한 녀석이다
    • 클래스 컴포넌트를 생성할 때 보통 Component를 상속받아서 사용하지만 PureComponent는 이름 그대로 PureComponent를 import하고 extends하면 된다

  2. Rendering adjacent JSX element

    • 클래스 컴포넌트든 함수 컴포넌트든 return을 할 때에는 최상위 태그로 감싸야한다고 배웠다
    • 하지만 편법은 존재하기 마련
    • 배열을 이용하여 여러 줄의 태그를 rendering 할 수 있다
    • 당연히 key값도 넣어주어야한다
    class xxx extends Component {
    render() {
        return [
            <p>11</p>
            <h1>22</h1>
            <input>33</input>
        ];
    }
}// 이런 식으로 배열을 이용하여 div로 감싸지 않고도 렌더링이 가능


    • 아니면 컴포넌트를 이용하는 방법이 있다
    • Windows는 Aux 라는 이름이 충돌할 수 있으므로 주의
    const aux = props => props.children;
export default aux;
   
// 다음과 같이 aux 컴포넌트를 준비하고
   
render() {
    return {
        <Aux> // Aux 컴포넌트로 감싸준다
      	  <p>11</p>
           <h1>22</h1>
           <input>33</input>
        </Aux>
    };
}


    • 위에서 설명한 컴포넌트의 기능을 그대로 하는 내장 컴포넌트가 있다
    • Fragment
    render() {
    return {
        <React.Fragment>
      	  <p>11</p>
           <h1>22</h1>
           <input>33</input>
        </React.Fragment>
    };
}


  3. prop-types package

    • prop type을 관리해주는 패키지가 있다
    • 컴포넌트를 배포하거나 협업을 하면서 잘못된 자료형의 prop을 사용하는 것을 막을 수 있다
    • npm install –save prop-types
    • 잘못된 자료형을 입력하면 console창에 error가 뽝 뜬다
    import PropTypes from 'prop-types';
   
propName.propTypes = {
    name: PropTypes.string,
    age: PropTypes.number,
    click: PropTypes.func,
}
// 이와 같이 사용한다. 대소문자 주의.



참고 자료

reactjs.org - 공식홈페이지

Udemy - React The Complete Guide

Related Posts