[포스코x코딩온] 웹개발자 풀스택 과정 9기 12주차 회고록 - React Props

 

🤔 Props란?

- 프로퍼티, props(properties의 줄임말) 라고 한다.
- 상위 컴포넌트가 하위 컴포넌트에 값을 전달할때 사용한다. (단반향의 데이터 흐름을 갖기 때문에 부모에서 자식으로한테만 전달 가능)

props에서 가장 중요한 것은 상위 컴포넌트에서 하위 컴포넌트로 밖에 전달이 되지 않는다는 것이다. 

또한 이렇게 보내진 props는 수정할 수 없다. (자식 입장에서는 읽기 전용인 데이터다)

 

🤓 사용 방법

props를 넘길때에는 2가지 경우가 있다. 문자열로 보내는 방식과 문자열 외의 값을 전달할 경우다. 

 

⚫ 문자열로 보내는 방식

<Main hobby="game"/>

 

프로퍼티 타입이 문자열이 경우, 큰 따옴표("")를 사용한다.

 

 

⚫ 그 외의 방식

<MyComponent 
	boolProp= {true} //boolean
	arrProp= {['a','b','c']} //배열
	objProp= {{name:'jin', title:'맛있는 사과'}} //객체
	funcProp= {() => { alert('알림창'); }}  //함수 
/>

문자열 타입 이외의 프로퍼티 값은 중괄호({})를 사용한다.

 

여기까지는 컴포넌트 태그 안에 내용을 보여주는 props 속성이었다. 이 외에도 태그 사이에 내용을 보여주는 props 속성이 있다.

 

🚼 props.children

부모 컴포넌트에서 자식 컴포넌트를 호출할 때 태그 사이에 작성한 문자열을 불러오는 프로퍼티다.

 

<MyComponent>안녕</MyComponent>

이런식으로 부모에서 프로퍼티 값을 넘겨주면 자식은 props.children으로 프로퍼티 값을 불러올 수 있다.

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

 

 

🈚 defaultProps

만약 부모 컴포넌트에서 어떠한 props값도 전달되지 않을 때 기본값으로 보여주는 역할을 한다.

 

● 부모 컴포넌트

<MyComponent></MyComponent>

 

● 자식 컴포넌트

const MyComponent = (props) => {
	return (
    	<>
        <div>안녕!{props.name}</div>
        </>
    );
}

MyComponent.defaultProps = {
	name:"jin"
}

부모에 아무값도 안보내지면 props.name의 값은 "jin"이 된다.

 

🗂️ propTypes

정해진 타입이 아닌 다른 타입으로 정보가 전달될 시, 제대로 동작은 하지만 콘솔에 오류가 나오거나, 심하면 아예 아무것도 안보이는 깡통 페이지를 보는 상황까지 발생할 수 있다. 이와 같은 버그를 예방하고, 예상치 못한 에러가 발생하는 것을 막기 위한 방법 중 하나가 proptypes를 이용하는 것이다. 즉, propsTypes를 적용하면 더욱 안정적인 코드를 작성할 수 있게 된다.

 

●  라이브러리 설치하기

npm install prop-types

proptypes를 사용하기 위해서는 따로 라이브러리를 설치해줘야 한다. 

 

import PropTypes from 'prop-types';

설치 후에는 당연히 사용하고자 하는 곳에 import 해줘야 한다.

 

 

●  사용해보기

// App.js (부모 컴포넌트)
<ClassComponent name='jin' age={10}></ClassComponent>


// MyComponent (자식 컴포넌트)
MyComponent.propTypes = {
  name: PropTypes.string.isRequired,	// 부모 컴포넌트로부터 반드시 값을 전달받아야 한다.
  age: PropTypes.number,
};

작성 시 'MyCompoenent.propTypes' 와 같이 p를 소문자로, PropTypes.string과 같은 타입 지정에서는 P를 대문자로 작성해야 함에 유의하자.