본문 바로가기

React

8. 확장성을 고려한 React 컴포넌트

8. 확장성을 고려한 React 컴포넌트

8. 확장성을 고려한 React 컴포넌트

8.1 컴포넌트의 기본 속성

defaultProps를 정적 클래스 속성으로 추가

ex) defaultProps 예시 class Datepicker extends React.Component { ... } Datepicker.defaultProps = { currentDate: Date(), rows: 4, locale: 'US' }

8.2 React 속성 타입과 유효성 검사

propTypes 정적 속성을 이용하여 속성 타입 설정

ex) propTypes 예시 class Datepicker extends React.Component { ... } Datepicker.propTypes = { currentdate: PropTypes.string, rows: propTypes.number, locale: PropTypes.oneOf(['US', 'CA', 'MX', 'EU']) }

8.3 자식 엘리먼트 렌더링

ex) 자식 엘리먼트 속성 활용하기 ``` class Content extneds React.Component { render() { return (

{this.props.children}
) } }

ReactDOM.render(

React

Rocks

, document.getElementById('content') ) ```

자식 엘리먼트가 하나라면 this.props.children은 배열이 아니다.
만약 문자열 자식 엘리먼트가 하나만 있을 때면 this.props.children.length를 사용할 경우 문자열 길이를 반환한다.
대신에 React.Children.count(this.props.children)을 사용하면 자식 엘리먼트의 수를 정확히 확인할 수 있다.

8.4 코드 재사용을 위한 React 고차 컴포넌트 생성하기

고차 컴포넌트 ; 다른 컴포넌트가 기능을 상속받는 패턴
고차 컴포넌트를 통해 코드 재사용이 가능

ex) 고차 컴포넌트 정의 방법 const LoadWebsite = (Component) => { ... }

ex) 고차 컴포넌트 구현 예제 ``` const LoadWebsite = ((Component) => { class _LoadWebsite extends React.Component { constructor(props) { super(props) this.state = {label: 'Run'} this.state.handleClick = this.handleClick.bind(this) }

    getUrl() {
        return '...'
    }

    handleClick(event) {
        let iframe = document.getElementById('frame').src = this.geturl()
    }

    componentDidMount() {
        console.log(ReactDOM.findDOMNode(this))
    }

    render() {
        console.log(this.state)
        return <Component {...this.state} {...this.props} />
    }
}
_LoadWebsite.displayname = 'EnhancedComponent'
return _LoadWebsite

} ```

ex) 고차 컴포넌트 사용 예제 ``` class Button extends React.Component { render() { return } }

class Link extends React.Component { render() { return {this.props.label} } }

class Logo extends React.Component { render() { return } }

const EnhancedButton = LoadWebsite(Button) const EnhancedLink = LoadWebsite(Link) const EnhancedLogo = LoadWebsite(Logo) class Content extends React.Component { render() { return (