[React] Props

 

---

알고있으면 좋은 React Tip✨

---

Props란?

• properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소이다.
• 쉽게 말해, 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용하는 속성이다.
• 상위 컴포넌트가 하위 컴포넌트에 값을 전달하기 때문에 단방향 데이터 흐름을 갖는다.
• 부모 컴포넌트는 수정 가능하지만, 자식 컴포넌트는 읽기만 가능하다.

 

(1)부모(상위) 컴포넌트에서 Props 지정하여 넘기기

• 함수형 컴포넌트는 말 그대로 자바스크립트의 "함수(function)" 기반 컴포넌트이다.

import React from 'react';

// 컴포넌트를 불러온다.
import 컴포넌트명 from './컴포넌트명';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App name='Bread'>Children으로 추가하는 텍스트</App>
  </React.StrictMode>
);

export default App;

 

(2)자식(하위) 컴포넌트에서 받아 Props 렌더링하기

• 상위 컴포넌트로 부터 받은 Props 데이터를 뷰에 렌더링한다.
  
• {props.children} : 컴포넌트 태그 사이에 내용을 보여주는 props 속성이다.

// 함수형 컴포넌트
import React from 'react';
import PropTypes from 'prop-types';

function App(props){
   return(
     <div>
             {props.name}
             {props.children}
     </div>
   );
}

// 기본값 설정하는 방법
컴포넌트명.defaultProps = {
    name : '기본값'
}

// 필수 props 지정하는 방법
컴포넌트명.propTypes = {
    name : PropTypes.string.isRequired
}

export default App;

 

(3)PropTypes : 데이터 타입 검증하기

• 라이브러리 설치하기 :  npm prop-types
• propTypes는 상위 컴포넌트로부터 전달받은 데이터의 타입을 확인하는 라이브러리이다.
  
• 상위 컴포넌트로부터 전달받은 props가 유효하지 않은 타입의 데이터가 전달되는 경우 콘솔에 에러 경고문이 출력된다. 기본적으로 arry, bool, func, number, object, string 부터 React 타입인 element, 클래스 인스턴스 등 타입 체크가 가능하다.