일주일동안 강의를 보거나 프로젝트를 하면서 알게된 것을 적는 주말 기술 회고

Props란?

• props는 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용하는 속성이다.
• 상위 컴포넌트가 하위 컴포넌트에 값을 전달하기 때문에 단방향 데이터 흐름을 가진다.
• 부모 컴포넌트는 수정 가능하지만, 자식 컴포넌트는 읽기만 가능합니다.

Props 사용하기

props를 사용하면 두 단계가 필요하다.
1. 상위 컴포넌트에서 Props를 지정한다.
2. 하위 컴포넌트에서 받은 Props값을 렌더링해야 한다.

상위 컴포넌트에 Props 지정해서 넘기기

<Component title="Props란?" />

하위 컴포넌트에서 받아 Props 렌더링하기

function ChildComponent(props){
	return (
    	<div>
      		{props.title}
      	</div>  
    )
}

이런식으로 props를 object형태로 받아올 수 있다.

function ChildComponent({title}){
	return (
    	<div>
      		{title}
      	</div>  
    )
}

자바스크립트 문법을 이용해서 오브젝트 안에 있는걸 빼올 수 있다.
( 순서만 지키면 이름은 상관이 없다 )

props.children

이건 이번에 처음 알게된 것 인데

<Component title="Props란?">내용!</Component>

이런식으로 컴포넌트 사이에 내용을 넣어주면

function ChildComponent(props){
	return (
    	<div>
      		{props.title}, {props.children}
      	</div>  
    )
}

요로케 props.children을 사용해서 컴포넌트 태그 사이에 내용을 보여줄 수 있다.

Props 타입

props의 자료형은 자바스크립트의 자료형 모두 사용 가능하다.

문자열 타입

프로퍼티 타입이 문자열이면 ""를 사용한다.

문자열 이외의 타입

문자열 타입 이외의 프로퍼티는 {}를 사용한다.
isApple={true}

Props 타입 겁증

React에서 제공해주는 prop-types를 이용해서 각각의 자료형을 선언할 수 있다.

propTypes를 써야하는 이유

실무에서 리액트 앱이 커지는 경우 다양한 props가 쓰이게 된다. 타입 검사를 활용하면 타입으로 인한 오류 발생을 방지 할 수 있기 때문에 props의 자료형은 미리 선언해주는 것이 좋다.

쓰는법

import PropTypes from 'prop-types' // 프로퍼티 타입을 지정해주기 위해 사용 한다.

function ChildComponent(props){
	return (
    	<div>
      		{props.title}, {props.children}
      	</div>  
    )
}

// 프로퍼티 타입 지정
ChildComponent.propTypes = {
 	name: PropTypes.string 
}

export default ChildComponent;

이런식으로 작성하면 인스펙터창에서 경고메세지를 나타낸다.
뒤에isRequired를 사용하면 string이 아니면 에러메세지가 나타난다.

마무리

이번에는 Props에 대해서 알아보았는데 찾아보면서 알게 된게 많아서 기쁘다.