``` {% 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 ``` --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://shhn0509.gitbook.io/react/react-study/mini-project/part-1/component-props.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.

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