[react] prop 와 propTypes

react 기초 다지기

React 언어로 넷플릭스, 페이스북들이 개발되었고 현재 Front-end 프레임워크에서 점유율이 88% 에 해당이 된다. 왜 React를 사용할까? 이 언어가 멋진 이유는 재사용이 가능한 컴포넌트를 만들어내기 때문이라고 한다.

import React from 'react'
: 이 코드가 없으면 react는 이 파일의 component 사용을 이해하지 못한다.

function Minji()
: functional component라고 하며 대문자로 이름짓는다

return
: 안에는 html element를 작성한다. 그리고 항상 하나의 태그로 묶여있어야 한다. 코드를 보기 쉽게 하는 경우에는 ( ) 괄호를 사용하여 코드 전체를 묶어준다.

export default App;
: App 이라는 컴포넌트를 내보낸다는 의미이다. 즉 다른 컴포넌트에서 App 컴포넌트를 불러와서 사용할 수 있다.

<Minji />
: Minji 컴포넌트 불러와서 사용하기

다음과 같이 결과가 나타나는 것을 확인할 수 있었습니다.

react props 컴포넌트에게 값 전달

컴포넌트 props란
컴포넌트의 입력값으로, 부모 컴포넌트로부터 자식 컴포넌트로 전달된 데이터를 의미한다. 그리고 props 는 state와 달리 read-only 라는 것에 주의해야한다.

props 파라미터 활용

props는

{fav: 'bibimbap'}

객체 형태로 전달 되는데, props.fav와 같이 사용하면 된다.

ES6문법 destructuring 활용

컴포넌트 Iteration: Map

다음 예제에서는 JavaScript Array의 객체 내장함수인 map 함수를 활용합니다. map() 함수는 각 배열의 요소를 돌면서 인자로 전달된 함수를 사용하여 처리 된 새로운 결과를 새로운 배열에 담아 반환합니다.


foodILike의 각 객체들이 잘 출력 되는 것을 볼 수 있었습니다.

propTypes로 타입 확인

전달받은 props가 내가 원하는 props인지를 확인해 준다
PropTypes는 전달받은 데이터의 유효성을 검증하기 위해서 다양한 유효성 검사기(Validator)를 내보냅니다. 예시에서는 PropTypes.string을 사용하였으며, prop에 유효하지 않은 값이 전달 되었을 때 경고문은 JavaScript 콘솔을 통해 보일 것입니다.

Installation

npm i prop-types

Importing

import PropTypes from 'prop-types';

isRequired

.isRequired를 types뒤에 붙여주면, 필수 prop으로 인식해서 해당 값이 없거나 잘못되었을 경우 콘솔 창에서 오류가 나타난다.