$$config title: [ React ] props keywords: - defaultProps - children $$ # props : 컴포넌트에게 값 전달 ## 기본 사용법 |특징| |--| | 컴포넌트에게 전달되는 props : 파라미터를 통하여 조회 O | | props : 객체 형태로 전달 | | 값 조회 : props.name 조회 | #### App.js ```js import React from 'react'; import Hello from './Hello'; function App() { return ( ); } export default App; ``` #### Hello.js ```js import React from 'react'; function Hello(props) { return

안녕하세요 {props.name}

} export default Hello; ``` ## 다증 사용법 - 비구조화 할당 props 내부 값 조회 : ```props. ``` 입력 -> 함수 파라미터에서 비구조화 할당(구조 분해) 문법 사용해 코드 간결화 #### App.js ```js import React from 'react'; import Hello from './Hello'; function App() { return ( ); } export default App; ``` #### Hello.js - props. ```js import React from 'react'; function Hello(props) { return

안녕하세요 {props.name}

} export default Hello; ``` #### Hello.js - 비구조화 할당 ```js import React from 'react'; function Hello({ color, name }) { return

안녕하세요 {name}

} export default Hello; ``` ## 기본값 설정 - defaultProps 컴포넌트에 props 지정X -> 기본값을 위해 컴포넌트에 defaultProps 값 설정 #### App.js ```js import React from 'react'; import Hello from './Hello'; function App() { return ( <> ); } export default App; ``` #### Hello.js ```js import React from 'react'; function Hello({ color, name }) { return

안녕하세요 {name}

} Hello.defaultProps = { name: '이름없음' } export default Hello; ``` ![](https://i.imgur.com/WXSoZyf.png) ## 자식값 설정 - children 컴포넌트 태그 사이에 넣은 값을 조회하고 싶을 때 사용 #### App.js ```js import React from 'react'; import Hello from './Hello'; import Wrapper from './Wrapper'; function App() { return ( ); } export default App; ``` #### Wrapper.js ```js import React from 'react'; function Wrapper({ children }) { const style = { border: '2px solid black', padding: '16px', }; return (

{children}

) } export default Wrapper; ```