Props란 ?
우리가 어떠한 값을 컴포넌트에게 전달해줘야 할 때 Props를 사용한다.
[ props의 기본 사용법 ]
예를 들어서, App 컴포넌트에서 Hello 컴포넌트를 사용 할 때 name 이라는 값을 전달해주고 싶다고 가정해봅시다. 그러면, 이렇게 코드를 작성하면 됩니다.
[ Props를 이용해 App.js → Hello.js로 값 보내기 ]
import React from 'react';
import Hello from './Hello';
import './App.js';
function App() {
return (
<Hello name='react' style='red' />
);
}
export default App;
JavaScript
복사
[ Props를 이용해 Hello.js에서 값 받기 ]
//값을 받는방법은 2가지이다
// 첫번째 방법
import React from 'react';
import Hello from './Hello';
function Hello(props) {
return (
<div style={{color : props.color}}>안녕하세요 {props.name}</div>
);
}
export default Hello;
// 두번 째 방법
import React from 'react';
import Hello from './Hello';
function Hello({color, name}) {
return (
<div style={{color}}>안녕하세요 {name}</div>
);
}
export default Hello;
JavaScript
복사
defaultProps로 기본값 설정
컴포넌트에 props 를 지정하지 않았을 때 기본적으로 사용 할 값을 설정하고 싶다면 컴포넌트에 defaultProps 라는 값을 설정하면 됩니다.
[Hello.js]
import React from 'react'
function Hello(props) {
return <div style={{color : props.color}}>안녕하세요 {props.name}</div>
}
//defaultProps기본값 설정하기
Hello.defaultProps = {
name : '이름없음!!!'
}
export default Hello;
JavaScript
복사
한번 App 에서 name 이 없는 Hello 컴포넌트를 렌더링해보겠습니다.
[App.js]
import React from 'react';
import Hello from './Hello';
import './App.css'
function App() {
return (
<>
<Hello name='react' color='red' />
<Hello color="pink" />
</>
);
}
export default App;
JavaScript
복사
[ 실행화면 ]
두번 째 줄에는 props로 받은 name값이 없으므로 기본으로 설정한 defaultProps에 name값이 가지고온다.
[ props.children ]
컴포넌트 태그 사이에 넣은 값을 조회하고 싶을 땐, props.children으로 조회
내부의 내용이 보여지게 하기 위해서는 Wrapper 에서 props.children 을 렌더링해주어야 합니다.
예시 [ Wrapper.js ]
import React from 'react';
function Wrapper({ children }) {
const style = {
border : '2px solid black',
padding : '16px',
};
return (
<div style={style}>
{children}
</div>
)
}
export default Wrapper;
JavaScript
복사
[ App.js ]
import React from 'react';
import Hello from './Hello';
import './App.css';
import Wrapper from './Wrapper';
function App() {
return () {
<Wrapper>
<Hello name='react' color='red' />
<Hello color='pink' />
</Wraaper>
}
}
JavaScript
복사
