React의 props 설정하기
🔍 props란?
부모 컴포넌트에서 자식 컴포넌트에 전달해 주는 값을 props 라고 합니다.
1
2
3
4
5
6
7
8
9
10
/* App.js */
import React from 'react';
import MyComponent from './MyComponent';
function App() {
return (
<MyComponent name="React"/>
);
}
export default App;
<MyComponent name="React"/> 에서 name 부분이 props 를 설정하는 부분입니다. name 이라는 props를 지정하고, 그 값은 React 가 됩니다. App.js는 MyComponent를 불러오는 부모 컴포넌트라고 볼 수 있습니다.
그러면 그 값을 받아와서 사용하는 부분을 MyComponent.js 에서 작성해 보겠습니다. 중괄호로 감싸고, 아래와 같이 작성해 보겠습니다.
1
2
3
4
5
6
7
8
/* MyComponent.js */
import React from 'react';
const MyComponent = (props) => {
return <div>테스트 페이지, {props.name}</div>;
};
export default MyComponent;
브라우저에 바로 테스트 페이지, React 라는 텍스트가 표시될 것입니다.
타입스크립트에서는 아래와 같이 작성할 수 있습니다.
1
2
3
4
5
6
7
8
9
10
11
12
/* MyComponent.js */
import React from 'react';
interface Props {
name: string;
}
const MyComponent: React.FC<Props> = ({name}) => {
return <div>테스트 페이지, {name}</div>;
};
export default MyComponent;
✏️ 부모 컴포넌트 쪽에서 props를 설정해 주지 않을 경우, props의 기본값을 MyComponent 쪽에서 설정해 줄 수 있습니다.
1
2
3
4
5
6
7
8
9
10
11
12
/* MyComponent.js */
import React from 'react';
const MyComponent = props =>{
return <div>테스트 페이지, {props.name}</div>;
};
MyComponent.defaultProps = {
name: '기본'
}
export default MyComponent;
위처럼 MyComponent.defaultProps = { } 내부에 직접 defaultProps 값을 설정해 줄 수도 있습니다.
하지만 함수형 컴포넌트의 경우, props의 기본값 설정을 위와 같이 하지 않아도 됩니다. (참고 링크 - 함수형 컴포넌트에서 defaultProps가 deprecated된 사실)
1
2
3
4
5
6
7
8
/* MyComponent.js */
import React from 'react';
const MyComponent = ({name = 'Chan'}) =>{
return <div>테스트 페이지, {name}</div>;
};
export default MyComponent;
위처럼 구조 분해 할당을 하면서 기본값을 부여해 주는 것으로 대신할 수 있습니다.
✏️ 컴포넌트 태그 사이의 내용을 보여주려면 children 을 사용합니다.
1
2
3
4
5
6
7
8
9
10
11
/* App.js */
import React from 'react';
import MyComponent from './MyComponent';
function App() {
return (
<MyComponent>사이에들어온값</MyComponent>
);
}
export default App;
위처럼 <MyComponent> 태그 사이에 들어있는 값을 MyComponent 에서 보여줄 수 있으려면 다음과 같이 {props.children} 이라고 작성해야 합니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* MyComponent.js */
import React from 'react';
const MyComponent = props =>{
return (
<div>테스트 페이지, {props.name}
<br/>
children 값은 {props.children}
</div>
);
};
MyComponent.defaultProps = {
name: '기본'
}
export default MyComponent;
브라우저에서 childern 값은 사이에들어온값 이라고 표시됨을 확인하실 수 있습니다.
✏️ props의 활용을 좀 더 편리하게 할 수 있습니다. ES6의 비구조화 할당 문법을 사용하는 것인데요,
const { name, childern } = props; 와 같이 단축하여 작성할 수 있습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* MyComponent.js */
import React from 'react';
const MyComponent = props =>{
const { name, childern } = props;
return (
<div>테스트 페이지, {name}
<br/>
children 값은 {children}
</div>
);
};
export default MyComponent;
또는 아래와 같이 더욱 단축시킬 수 있습니다. MyComponent 함수의 파라미터에 가져다 놓을 수 있습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
/* MyComponent.js */
import React from 'react';
const MyComponent = ({ name, childern }) =>{
return (
<div>테스트 페이지, {name}
<br/>
children 값은 {children}
</div>
);
};
export default MyComponent;
리액트로 다양한 프로젝트를 진행할 때, 위와 같이 props 값을 가져올 시 비구조화(구조 분해) 할당 문법을 정말 많이 사용하는 것을 보실 수 있습니다. 저 또한 다른 소스코드들을 참고하여 학습할 때, 해당 구조를 많이 사용하는 것을 볼 수 있었습니다. 모두 코드 작성의 편의성을 높여 주는 것들이라 잘 알아두어야 하겠습니다.