REACT Props
Props란?
props는 컴포넌트 속성을 설정할 때 사용됩니다. props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있습니다.
props는 상위 컴포넌트에서 하위 컴포넌트로 전달하는 개념이며, 하위 컴포넌트에서 상위 컴포넌트에 값을 전달 할 수 없습니다.
Props의 기본 사용법
App 컴포넌트에서 Hello 컴포넌트를 사용할 때 name 이라는 값을 전달해주고 싶을 때 코드 작성법을 알아봅시다.
App.js
1
2
3
4
5
6
7
8
9
10
import React from 'react';
import Hello from './Hello';
function App() {
return (
<Hello name="HELLO" />
);
}
export default App;
이제 Hello 컴포넌트에서 name 값을 사용 하고 싶을 때 어떻게 하는지 알아 봅시다
HELLO.js
1
2
3
4
5
6
7
import React from 'react';
function Hello(props) {
return <div>{props.name} REACT</div>
}
export default Hello;
컴포넌트에 전달되는 props는 파라미터를 통하여 조회할 수 있습니다. props는 객체 형태로 전달되며, 만약 name 값을 조회하고 싶으면 props.name을 조회하면 됩니다.
여러개의 props, 비구조화 할당
Hello 컴포넌트에 다른 props를 전달하기 위해 color라는 값을 설정해 보겠습니다.
App.js
1
2
3
4
5
6
7
8
9
10
11
import React from 'react';
import Hello from './Hello';
function App() {
return (
<Hello name="HELLO" color="gray"/>
);
}
export default App;
그 다음 Hello 컴포넌트에서 color 값을 조회해서 폰트의 색상으로 설정해 보겠습니다.
Hello.js
1
2
3
4
5
6
7
8
import React from 'react';
function Hello(props) {
return <div style=>{props.name} REACT</div>
}
export default Hello;
props 내부의 값을 조회 할 때마다 props.를 입력하고 있습니다. 함수의 파라미터에서 비구조화 할당(또는 구조분해)문법을 사용하면 조금 더 코드를 간결하게 작성 할 수 있습니다.
Hello.js
1
2
3
4
5
6
7
8
import React from 'react';
function Hello({ color, name }) {
return <div style=> {name} REACT</div>
}
export default Hello;
props.children
컴포넌트 태그 사이에 넣은 값을 조회하고 싶을 때 props.children을 조회하면 됩니다.
Wrapper.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import React from 'react';
function Wrapper() {
const style = {
border: '2px solid black',
padding: '20px',
};
return (
<div style={style}>
</div>
)
}
export default Wrapper;
이 컴포넌트를 App에서 사용할 때!
App.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import React from 'react';
import Hello from './Hello';
import Wrapper from './Wrapper';
function App() {
return (
<Wrapper>
<Hello name="Hello" color="gray"/>
<Hello color="red"/>
</Wrapper>
);
}
export default App;
Wrapper 태그 내부에 Hello 컴포넌트를 두개 넣었지만 브라우저를 확인 해보면 Hello 컴포넌트들은 보여지지 않습니다.
내부의 내용이 보여지게 하기 위해서는 Wrapper 에서 props.children을 렌더링을 해줘야 하기 때문입니다.
Wrapper.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import React from 'react';
function Wrapper({children}) {
const style = {
border: '2px solid black',
padding: '20px',
};
return (
<div style={style}>
{children}
</div>
)
}
export default Wrapper;