``` {% endhint %} classNames을 사용하지 않으면 아래의 로직으로 사용자가 직접 커스텀으로 만들어서 사용할 수 있다. ```javascript const linkClassNames = [className, 'appHeader__homeLink'].join(' ') ``` ## 3. 특정 요소에 속성 전달 하나의 요소가 아닌 컴포넌트의 다른 요소에 속성을 전달하고 싶은 경우가 있다. 이 경우엔 해당 요소에 전달할 속성을 객체로 전달하고 전개연산자를 사용하면 편하다. #### 3.1 부모 컴포넌트 ```javascript ``` #### 3.2 자식 컴포넌트 ```javascript const AppHomeLink = ({ // wrapperProps을 구조 분해 할당 하여 사용한다. // 이때 AppHomeLink가 전달받은 className과 // wrapperProps가 전달받은 wrapperClassName의 속성이름이 같으면 안되서 다르게 설정했다. // wrapperProps: { wrapperClassName, ...restWrapperProps }, wrapperProps: { as: WrapperComponent className: WrapperClassName, ...restWrapperprops }, children, external, className, ...domProps }) => { // classNames를 사용해서 클래스 이름을 중첩되게 한다. const combineWrapperClassNames = classNames( 'appHeader__brand', WrapperClassName ?? '' ) return ( // 전개 연산자를 사용해서 래퍼 요소에 속성이 적용될 수 있도록 한다. ) } ``` ## 4. 요소 별칭 등록 as 속성을 사용해서 별칭을 등록할 수 있다. #### 4.1 부모 컴포넌트 ```javascript ``` #### 4.2 자식 컴포넌트 ```javascript const AppHomeLink = ({ // 전달 받은 as 속성에 별칭을 등록하고 wrapperProps: { as: WrapperComponent, wrapperClassName, ...restWrapperProps } }) => { const wrapperClassNames = classNames( 'appHeader__brand', wrapperClassName ?? '' ) return ( // h1 요소의 이름으로 설정하면 h1 → h2로 변경된다. ) } // as의 기본 값을 h1으로 설정 AppHomeLink.propTypes = { wrapperProps: { as: 'h1' } } ``` ## 5. props 전개 컴포넌트로 전달된 `props` 객체를 전개(spread) 하여 컴포넌트의 내부의 구조(Markup)에 모두 추가 설정할 수 있다. ``` ``` 다만, `props` 객체의 속성을 전개하였을 때 사용된 `external`과 같은 **비 표준 속성은 오류를 발생**시킨다. {% hint style="warning" %} Warning: Received \`true\` for a non-boolean attribute \`external\`.\ If you want to write it ti the DOM, pass a string instead: external="true" or external={value.toString()}. {% endhint %} 오류 메시지에서 해결책을 안내하고 있지만, 안내 방법대로 해도 해결이 안되는 경우가 있다. 이런 경우 컴포넌트로 전달된 `props`에서 비 표준 속성을 걸러내어 문제를 해결 할 수 있다. (\ DOM Node에 설정되는 속성이므로 `aNodeProps`라는 이름을 사용했습니다) ``` // 구조 분해 할당 + 나머지 연산 const { external, children, ...aNodeProps } = props; // 전개 연산 {children} ``` ## 6. props 검사 [PropTypes](https://xn--xy1bk56a.run/react-master/lecture/r-pay-propTypes.html#react-%EC%86%8D%EC%84%B1-%ED%83%80%EC%9E%85-%EA%B2%80%EC%82%AC)를 사용하여 컴포넌트에 전달된 `props`를 검사하도록 설정한다. ``` import PropTypes from 'prop-types'; ``` ## 7. props 기본 값 필요한 경우 컴포넌트의 전달 속성인 `props` 객체의 속성 중 일부에 기본 값을 설정할 수 있다. ``` Component.defaultProps = { prop1: 'efaltValue' } ``` ## 8. 다른 예제 보기 #### 8.1 컴포넌트 추출 전 코드 ```javascript ``` #### 8.2 컴포넌트 추출 후 부모 컴포넌트 ```javascript import './AppNavigation.scss' import React from 'react' import EdiyaContext from '~/context/ediyaContext' import AppButton from '../AppButton/AppButton' class AppNavigation extends React.Component { render() { const { items } = this.context.navigation return ( <> ) } } export default AppNavigation ``` #### 8.3 AppButton 컴포넌트 ```javascript import React from 'react' import classNames from 'classnames' const AppButton = ({ children, handleNav, className, label, ...restProps }) => { const buttonClassNames = classNames('resetButton', className ?? '') return ( ) } export default AppButton ```

{/* 기본 값이 필요한 속성은 아래와 같이 기본 값을 할 수 있다. */} {children ?? 홈링크}