props 활용

component의 props 디자인 패턴을 알아보자

props 설계

<Component 
  className="foo" 
  title="component prpos design"
  external
  >
  <span> children </span>
</Component>

// props 객체
"props": {
  "className": "foo",
  "title": "component props design"
  "external": true,
  "children": '<span> children </span>, // react element 요소
}

props 전개

컴포넌트로 전달된 props 객체를 전개(spread) 하여 컴포넌트의 내부의 구조에 모두 추가할 수 있다.

<Component {...props} />

다만, props 객체의 소성을 전개하였을 때 사용된 external과 같은 비 표준 속성은 오류를 발생 시킴

이런 경우 컴포넌트로 전달된 props에서 비 표준 속성을 걸러내어 문제를 해결 할 수 있다.

// 구조 분해 할당 + 나머지 연산
const { external, children, ...restProps } = props;
// 전개 연산
<Component {...restProps}>
  {children}
</Component>

props 검사

propTypes를 사용하여 컴포넌트에 전달된 props를 검사

className 병합

props 전개 코드의 순서에 따라 기존 속성을 덮어쓰거나, 전달된 속성이 덮어써지는 문제가 발생

이러한 문제를 해결하려면 컴포넌트 내부에서 조건 처리 하거나, classnames 라이브러리를 활용

import classNames from 'classnames';
const { external, children, className, ...restProps } = props;
const combineClassNames = classNames('originalClassName', className);

as 속성

컴포넌트 내부의 DOM 노드 중 특정 노드를 외부에서 변경할 수 있도록 처리하는데 사용되는 속성 (tag라는 이름으로도 사용됨)

• defaultProps 설정 필요

// as: DOM 노드의 태그 이름
const { as: Component, ...domProps } = props;

// as의 vlaue값인 Compoennt로 바뀜 (required props)
<Component {...domProps} />

props 기본 값

필요한 경우 컴포넌트의 전달 속성인 props 객체의 속성 중 일부에 기본값을 설정 가능

Component.defaultProps = {
  prop1: 'defaultValue'
}

render props

컴포넌트에 호출 될 함수형 렌더(render)props를 전달하여 컴포넌트 내부에서 렌더링 되도록 설정

• 공식문서

render props란..?

React 컴포넌트 속성으로 React 요소를 반환하는 함수를 전달
컴포넌트 내부에서 렌더링 되도록 설정하는 것

const renderProps = ({ onOpen }) => (
  <button
    type="button"
    className="modal__openButton"
    >
    Modal 열기
  </button>
);

// trigger 속성으로 렌더링(호출) 될 함수를 전달
<Modal trigger={renderProps}>
     <Modal.Header>
      Modal Label
    </Modal.Header>
    <Modal.Contents>
      Modal Contents
    </Modal.Contents>
</Modal>

컴파운드(Compound, 복합) 컴포넌트

하나의 컴포넌트를 호출하여 다음과 같이 복합적으로 컴포넌트를 사용할 수 있도록 구성한다.

return (
  <Modal>
    <Modal.Header>
      Modal Label
    </Modal.Header>
    <Modal.Contents>
      Modal Contents
    </Modal.Contents>
  </Modal>
)

컴파운드 컴포넌트 상태 관리

컴파운드(복합) 컴포넌트를 활용하여 컴포넌트의 상태 또는 메서드(또는 핸들러) 등을 효과적으로 공유하기 위해 컨텍스트(Context)를 사용할 수 있습니다. Modal 상위 컴포넌트에서 컨텍스트 공급자(Provider)를 통해 데이터를 공급하고, Modal.Header(또는 Modal.Contents) 하위 컴포넌트에서 컨텍스트 수요자(Consumer 또는 contextType, useContext 훅 활용)를 활용해 데이터를 수요할 수 있습니다.

import React, {createContext} from 'react';

// Modal 컨텍스트 생성
const ModalContext = createContext();

// 컴포넌트 간 공유할 데이터 설정
<ModalContext.Provider value={{
    /* ... */
  }}/>

// 방법 1. 컨텍스트 수요자 활용
<ModalContext.Consumer>
  {(context) => {/* JSX */}}
</ModalContext.Consumer>

// 방법 2. 클래스 컴포넌트: contextType
static contextType = ModalContext;

// 방법 3. 함수형 컴포넌트: useContext 훅
const context = useContext(ModalCOntext);