Posts [React] React의 props 설정하기
Post
Cancel

[React] React의 props 설정하기


React의 props 설정하기


🔍 props란?

properties를 줄인 표현. 컴포넌트의 속성을 설정할 때 사용한다. 해당 컴포넌트를 import하여 사용하는 부모 컴포넌트 쪽에서 값을 설정해 줄 수 있다.

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 라는 텍스트가 표시될 것입니다.


✏️ 부모 컴포넌트 쪽에서 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 값을 설정해 줄 수 있습니다.


✏️ 컴포넌트 태그 사이의 내용을 보여주려면 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
15
16
17
18
/* MyComponent.js */
import React from 'react';

const MyComponent = props =>{
    const { name, childern } = props;
    return (
        <div>테스트 페이지, {name}
        <br/>
        children 값은 {children}
        </div>
    );
};

MyComponent.defaultProps = {
    name: '기본'
}

export default MyComponent;

또는 아래와 같이 더욱 단축시킬 수 있습니다. MyComponent 함수의 파라미터에 가져다 놓을 수 있습니다.

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 = ({ name, childern }) =>{
    return (
        <div>테스트 페이지, {name}
        <br/>
        children 값은 {children}
        </div>
    );
};

MyComponent.defaultProps = {
    name: '기본'
}

export default MyComponent;

리액트로 다양한 프로젝트를 진행할 때, 위와 같이 props 값을 가져올 시 비구조화 할당 문법을 정말 많이 사용하는 것을 보실 수 있습니다. 저 또한 다른 소스코드들을 참고하여 학습할 때, 해당 구조를 많이 사용하는 것을 볼 수 있었습니다. 모두 코드 작성의 편의성을 높여 주는 것들이라 잘 알아두어야 하겠습니다.


🔍 propTypes

props로 전달되는 것들의 타입을 정하고자 할 때, propTypes를 사용합니다.

가령, props의 타입은 모두 String이어야 하거나, 반드시 정수형이어야 하는 등 타입을 맞춰야 하는 상황에서 쓸 수 있게 됩니다. 사용 시 import propTypes from 'prop-types'; 로 import가 필요합니다.

그리고, 하단에 defaultProps를 지정해 주었듯이 유사하게 타입을 지정해 줍니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/* MyComponent.js */
import React from 'react';
import propTypes from 'prop-types'; // 추가 필요

const MyComponent = ({ name, childern }) =>{
    return (
        <div>테스트 페이지, {name}
        <br/>
        children 값은 {children}
        </div>
    );
};

MyComponent.defaultProps = {
    name: '기본'
}

MyComponent.propTypes = {
    name: PropTypes.string
}

export default MyComponent;

name props는 무조건 string 형태여야 한다고 정의한 것입니다. 이제 부모쪽인 App.js에서 name에 문자열이 아닌 다른 타입(예 : 숫자)를 전달한다면, 브라우저의 개발자 도구(F12)에서 에러를 출력할 것입니다. (화면에 값은 표시될 것입니다.)

1
2
3
4
5
6
/* App.js */
function App() {
  return (
    <MyComponent name={10}/> // error!
  );
}

만일 필수 propTypes를 지정하려면 코드상에 다음과 같이 .isRequired를 붙입니다. 그러면, 부모 쪽에서 설정하지 않았을 경우 에러를 출력할 것입니다.

1
2
3
MyComponent.propTypes = {
    name: PropTypes.string.isRequired
}

이 포스팅은 리액트를 다루는 기술(저자 김민준)을 학습하는 과정에서 개인적으로 정리한 내용입니다.

[React] React의 컴포넌트(Component) - 함수형, 클래스형 컴포넌트

[React] React의 state 설정하기