[React] #2 Props

props는 properties의 줄임말로 컴포넌트의 속성값이다. 한 컴포넌트에서 다른 컴포넌트로 데이터를 넘길 때, 즉 컴포넌트 간 데이터를 넘겨주는 수단으로 사용된다. 일반적으로 부모 컴포넌트에서 넘겨준 값을 자식 컴포넌트에서 인자로 받아서 사용한다. 받아온 값은 읽기 전용으로 컴포넌트 내부에서 전달 받은 그대로 사용된다.

props 값은 컴포넌트에 객체 형태로 전달되어 매개변수를 통해 조회 가능하며, 객체의 비구조화 할당을 통해 축약된 문법으로 객체 속성값을 추출하여 사용할 수도 있다.

 

Props 값 전달 방법

1. 부모 컴포넌트에서 자식 컴포넌트 import
2. 자식 컴포넌트 태그에 속성=”속성값” 할당 ⇒ {속성: 속성값}을 인자로 하여 자식 컴포넌트 호출
3. 자식 컴포넌트에서 매개변수로 값 받아와서 사용

 

1. JSX 내부에서 props 렌더링

props 값은 컴포넌트 함수의 파라미터로 받아 와서 JSX 내부에서 { } 기호를 감싸주어 사용한다.

import React from ‘react‘;

const MyComponent = (props) => {
	return <div>안녕하세요, 제 이름은 {props.name}입니다.</div>;
    };

export default MyComponent;

2. 컴포넌트를 사용할 때 props 값 지정하기

import React from 'react';
import MyComponent from './MyComponent';
 
const App = () => {
	return <MyComponent name="React" />;
    };
 
export default App;

3. props 기본값 설정 : defaultProps

defaultProps를 통해 props 값을 따로 지정하지 않았을 때 보여줄 기본값을 설정할 수 있다.

☝🏻함수형 컴포넌트에서는 비구조화 할당으로 props 값을 받아올 때 바로 기본값 설정이 가능하기 때문에 defaultProps를 사용하지 않아도 된다!

MyComponent.defaultProps = {
	name: '기본 이름'
};

import React from ‘react‘;

const MyComponent = ({name = "SoHyun"}) => {
	return <div>안녕하세요, 제 이름은 {name}입니다.</div>;
    };

export default MyComponent;

4. 태그 사이의 내용을 보여주는 children

children은 리액트 컴포넌트를 사용할 때 컴포넌트 태그 사이의 내용을 보여준다.

import React from 'react';

const MyComponent = props => {
	return (
    	<div>
        	Children 값은 {props.children}
        </div>
    );
};

export default MyComponent;

5. 비구조화 할당 문법을 통해 props 내부 값 추출하기

props 값을 조회할 때 props.name, props.children과 같이 props. 키워드를 사용하던 것을 비구조화 할당 문법을 통해 내부 값을 바로 추출하여 사용할 수 있다.

import React from 'react';

const MyComponent = (props) => {
	const { name, children } = props;
    return (
    	<div>
        	안녕하세요, 제 이름은 {name}입니다. <br />
            children 값은 {children} 입니다.
        </div>
    );
};

export default MyComponent;

객체에서 값을 추출하는 이 문법은 구조 분해 문법이라고 불리며, 함수의 파라미터 부분에서도 사용할 수 있다. 만약 함수의 파라미터가 객체라면 그 값을 바로 비구조화해서 사용하는 것이다.

import React from 'react';

const MyComponent = ({ name, children}) => {
    return (
    	<div>
        	안녕하세요, 제 이름은 {name}입니다. <br />
		children 값은 {children} 입니다.
        </div>
    );
};

export default MyComponent;

6. PropsTypes를 통한 props 검증

컴포넌트 필수 props를 지정하거나 props의 타입을 지정할 때 PropTypes를 사용한다. 전달 받은 속상값 타입을 검사하여 지정한 타입과 다른 값을 전달 받은 경우, 값이 출력은 되지만 콘솔창에 경고 메시지가 발생하게 된다.

(* 코드 상단에 import하여 사용한다.)

import React from 'react';
import PropsTypes from 'prop-types';

MyComponent.propType = {
	name : PropTypes.string   <!-- name 값은 무조건 문자열 형태로 전달해야 된다는 것을 의미 -->
};

6.1. isRequired를 사용하여 필수 propTypes 설정

필수로 값을 전달 받아야 하는 props를 설정하고 싶을 때 사용한다. 값을 전달 받지 않았을 때 마찬가지로 콘솔창에 경고 메시지가 발생한다.

import React from 'react';
import PropsTypes from 'prop-types';

MyComponent.propType = {
	name : PropTypes.string.isRequired
};

[React] PropTypes 쓰는 이유, 방법

6.2. 더 많은 PropTypes 종류

• array: 배열

• arrayOf(다른 PropType): 특정 PropType으로 이루어진 배열    ex) arrayOf(PropTypes.number) = 숫자로 이루어진 배열

• bool: true 혹은 false 값

• func: 함수

• number: 숫자

• object: 객체

• string: 문자열

• symbol: ES6의 Symbol

• node: 렌더링할 수 있는 모든 것 (숫자, 문자열, 혹은 JSX 코드. children도 node PropType)

• instanceOf(클래스): 특정 클래스의 인스턴스    ex) instanceOf(MyClass))

• oneOf(['dog', 'cat']): 주어진 배열 요소 중 값 하나

• oneOfType([React.PropTypes.string, PropTypes.number]): 주어진 배열 안의 종류 중 하나

• objectOf(React.PropTypes.number): 객체의 모든 키 값이 인자로 주어진 PropType인 객체

• shape({ name: PropTypes.string, num: PropTypes.number }): 주어진 스키마를 가진 객체

• any: 아무 종류

 

 

참고 자료 : https://thebook.io/080203/, https://react.vlpt.us

 

---

 

Memo

속성값 전달할 때는 " "로 감싸주거나 { }로 묶어줘야 한다! " "로 감싸면 문자열, { }로 감싸면 숫자 의미