티스토리 뷰

React

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

새로운 도전을 즐기는 모기같은 개발자. 하늘을난모기 2018.12.02 18:23
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 (




댓글
댓글쓰기 폼