#7 Today I Learned - 21.01.12

@ye-r1·2021년 1월 12일
0

til

목록 보기
6/11
post-thumbnail

Today I Learned 📝

  • mini project : redux todo list
  • react : prop-types


💻 ✏️ mini project : redux todo list

링크 🔗 - https://github.com/ye-r1/vanilla-redux


react : prop-types

typescript와 같은 javascript 도구 이다.
Component의 props에 type 확인을 하려면 propTypes를 선언해야 한다.

import PropTypes from 'prop-types';

const App = () => {
	return(
		<Component />
	)
}
App.propTypes = {
  Component: PropTypes.element.isRequired,
};
  • PropTypes는 elementType React element 타입이며, .isRequired 존재하지 않으면 에러를 띄운다.

import PropTypes from 'prop-types';

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

Greeting.propTypes = {
  name: PropTypes.string
};
컴포넌트.propTypes = { 
	props_name : PropTypes.해당하는_타입
}
  • props에 type 확인을 하려면 propTypes를 선언해야 한다.
//React element
PropTypes.element,

//array
PropTypes.array,
  
//boolean
PropTypes.bool,

//function
PropTypes.func,
  
//number
PropTypes.number,

//object
PropTypes.object,

//string
PropTypes.string,
  
//symbol
PropTypes.symbol,
    
//prop가 특정 값들로 제한되도록 한다.
PropTypes.oneOf(['sage', 'citrus']),

//number를 가진 array
PropTypes.arrayOf(PropTypes.number),

//number를 가진 object
PropTypes.objectOf(PropTypes.number),

//특정 형태를 갖는 object
PropTypes.shape({
  color: PropTypes.string,
  fontSize: PropTypes.number
}),
  • 다음과 같이 사용할 수도 있다.


reference 🔗

[React] PropTypes와 함께 하는 타입 확인
https://ko.reactjs.org/docs/typechecking-with-proptypes.html


review 📃

nomad corder의 react와 pure javascript로 만드는 redux 강의를 듣기 시작했다. redux가 손에 익숙치 않아 어려움을 겪고 있었는데 나에게 좋은 기회가 될 것 같다.

0개의 댓글