Props 란?
상위 컴포넌트에서 어떤 데이터를 보낼 것인지를 정하면 이 데이터를 props를 통해 객체 형태로 하위 컴포넌트로 보낸다. 상위 컴포넌트가 하위 컴포넌트에 값을 전달하기 때문에 단방향 데이터 흐름을 갖는다. 부모 컴포넌트는 수정 가능하지만, 자식 컴포넌트는 읽기만 가능하다.
단방향 데이터 흐름
props 를 사용하려면 두 단계가 필요합니다.
- 상위 컴포넌트에서 Props를 지정한다.
- 하위 컴포넌트에서 받은 Props값을 렌더링해야 한다.
이 때 상위 컴포넌트에서 하위 컴포넌트로 프로퍼티가 전달되는데 이것이 "단방향 데이터 흐름"이다.
1) 상위 컴포넌트에서 Props 지정하여 넘기기
-
아래 코드에서 App 컴포넌트가 MyComponent 컴포넌트를 포함하고 있다.
-
App 컴포넌트에서 MyComponent에 props 값을 지정해준다.
-
"propValue"라는 프로퍼티로 "헬로 리액트!"라는 값을 넘겨준다.
-
컴포넌트 태그 사이에 "Bye 리액트!" 라는 값을 한번 넣어준다.
App.js
import React from "react";
import MyComponent from "./MyComponent";
function App() {
return(
<MyComponent propValue="헬로 리액트!">Bye 리액트!</MyComponent>
);
}
export default App;2) 하위 컴포넌트에서 받아 Props 렌더링하기
-
MyComponent 컴포넌트에서 상위 컴포넌트로 부터 받은 Props 데이터를 뷰에 렌더링한다.
{props.propValue} : 상위 컴포넌트에서 props 값을 propsValue로 전달했기 때문에 {props.propValue} 로 나타낸다.
{props.children} : 리액트 컴포넌트 태그 사이에 내용을 보여주는 props 속성이다. -
상위 컴포넌트에서 태그 사이에 작성한 "Bye 리액트!"가 출력된다.
MyComponent.js
import React from "react";
function MyComponent(props) {
return(
<div>
{props.propValue}, {props.children}
</div>
);
}
export default MyComponent;3) 결과 화면
Props 타입
props의 자료형은 자바스크립트의 자료형을 모두 사용 가능하다.
1. 문자열 타입 프로퍼티
프로퍼티 타입이 문자열인 경우, 프로퍼티 값을 표현할 때는 큰 따옴표("")를 사용한다.
<MyComponent name="헬로 리액트!"/>
2. 문자열 이외 타입의 프로퍼티
문자열 타입 이외의 프로퍼티 값은 중괄호({ })를 사용한다.
<MyComponent boolProp= {true} //boolean arrProp= {['a','b','c']} //배열 objProp= {{name:'코딩젤리', title:'헬로리액트!'}} //객체 funcProp= {() => { alert('알림창'); }} //함수 />
데이터 타입 검증하기
propTypes는 상위 컴포넌트로부터 전달받은 데이터의 타입을 확인하는 라이브러리이다.
상위 컴포넌트로부터 전달받은 props가 유효하지 않은 타입의 데이터가 전달되는 경우 콘솔에 에러 경고문이 출력된다.
PropTypes 써야 하는 이유
실무에서 리액트 앱이 커지는 경우 다양한 props가 쓰이게 된다.
타입 검사를 활용하면 타입으로 인한 오류 발생을 방지 할 수 있기 때문에 props의 자료형은 미리 선언해주는 것이 좋다.
PropTypes 사용하기 전에
PropTypes는 원래 리액트에 내장 되어있었으나 React v15.5부터 다른 패키지로 이동했다.
propTypes를 사용하려면 npm prop-types 라이브러리를 설치하고 컴포넌트 파일에 PropTypes 를 import 해야 한다.
import PropTypes from 'prop-types';
propTypes 사용하기
propTypes를 사용하여 프로퍼티를 지정해보겠습니다. 프로퍼티 타입 체크는 PropType.Type명 으로 선언 가능합니다.
기본적으로 arry, bool, func, number, object, string 부터 React 타입인 element, 클래스 인스턴스 등 타입 체크가 가능합니다.
App.js
- 상위 컴포넌트에서 name, age, isChecked 속성을 하위 컴포넌트로 전달합니다.
<MyComponent name="코딩젤리" age={2} isChecked={false}/>MyComponent.js
-
하위 컴포넌트에서 전달받은 Props의 타입을 체크합니다.
-
PropType.string, PropType.bool 로 props가 해당 타입인지 체크합니다.
-
PropType.oneOf(['string','number']) : 해당 Props가 여러 종류 중하나가 될수 있는 타입임을 나타냅니다. 전달받은 props가 string, number 중 하나에 해당하면 됩니다.
import React from "react";
import PropType from 'prop-types';
function MyComponent(props) {
return(
<div>
{props.name},{props.age}, {props.isChecked ? "true" : "false"}
</div>
);
}
MyComponent.prototype = {
name : PropType.string,
age : PropType.oneOf(['string','number']),
isChecked : PropType.bool
}
export default MyComponent;p0_lygon.log는 독학으로 공부한 내용들을 기록하는 곳입니다. 잘못된 정보가 있을 수 있습니다. 잘못된 정보를 발견하신다면 언제든 댓글을 통해 알려주시면 수정하고 다시 공부하겠습니다.
