props 의 이해

왜 사용할까?

부모 속성의 값을 다른 컴포넌트에 전달할 때 props를 이용하여 전달한다. 예를 들어 쇼핑몰 사이트를 만든다고 할 때 가격은 변하지 않는다 이는 부모에 미리 변수들을 선언하고 저장한다음에 이를 여러 컴포넌트에 뿌리면

1.한 곳에 사진 or 가격 데이터를 모으기 때문에 데이터 관리가 수월해지고 다른 컴포넌트에 필요할 경우 props를 이용해서 데이터를 전달하면 된다.

2.뿐만 아니라 한 곳에 모인 데이터 관리는 보완에 큰 장점을 지닌다.

 

 

 

defaultProps의 사용.  cf) img 태그에 src 경로  alt 와 비슷하다.

사람을 소개하는 페이지에 이름을 넣을 예정이면 props.name을 명시해 두고 언제든지 데이터 값이 들어올 준비 즉 변수 선언을 한다. 그러나 들어오지 않을 것을 대비해 'alt'와 같이 defaultProps를 선언함으로써 기본 베이스를 둘 수 있다. 

그러면 언제든지 데이터 값을 변경하기 쉽고 없을 경우도 충분히 가시적으로 예측할 수 있다. 

import React from 'react'

 

const App2=(props)=>{

return (

<div>제 이름은 {props.name}입니다.</div>

)

};

 

App2.defaultProps= {

name:'basic name'

}

export default App2;

 

 

 

여러 데이터를 넘길 때 구조분해 할당을 이용해서 해결하자

부모 컴퍼넌트에서 랜딩을 할 때 보내줘야 할 데이터가 많다 예를 들어 이름 키..

 

그럴 땐 어떻게 할까?

 

이해를 쉽게 하기 위해서 1의 방식으로 할 수 있다. props를 받고 props를 구조분해 할당 하여 새로운 객체에 넣는 과정이다 

 

1.

const App2=(props)=>{

const {name,height} = props

return (

<div>

<div>제 이름은 {name}입니다.</div>

<div>제 키는 {height}</div>

</div>

 

 

)

};

 

2. 이것도 귀찮다면 바로 파라미터에 객체 또는 배열의 형태로 선언을 해버리면 된다.

 

 

 

const App2=({name, height})=>{

return (

<div>

<div>제 이름은 {name}입니다.</div>

<div>제 키는 {height}</div>

</div>

 

 

)

};

데이터가 제대로된 타입인지 확인하고 싶다면??

import PropTypes from 'prop-types'

 

App2.prototype={

name: PropTypes.string

}

 

string 대신에 다른 타입을 넣어줘도 된다.