2020-01-29

Facts

프로젝트

로그인 페이지 구성
- 첫 화면 진입 시 로그인 화면. 유저 상태는 공백
- 맞는 아이디에 맞는 패스워드 입력 시 로그인 됨.(유저 그 아이디에 맞게 바뀜)
- 틀릴 시 무반응(추후 추가할 것)
eslint
- props validation 그전 거 마무리했습니다.

Feelings

오늘 상태가 안 좋아서 진도가 안 나갔네요. 어제는 상태가 괜찮았는데도 별로 못했네요. 상태 문제가 아니라 음…

Findings

Prop Validation

xx.propTypes = {
variable: PropTypes.yyy
...
}

으로 기본적인 validation을 한다
xx에는 prop을 불러오는 함수 이름
yyy는 그 변수가 어떤 type로 들어오는지.
string 이면 string
number 이면 number
function 이면 func
array 이면 arrayOf(PropTypes.yyy)
object 이면 objectOf(PropTypes.yyy)
그냥 objectOf(PropTypes.yyy) 대신 object라고 넣어도 되긴 하지만 린트 에러 뜸.
두 개 이상의 type로 통과 되게 하려면

 state: PropTypes.oneOfType([PropTypes.number, PropTypes.array]),

이렇게 쓰면 된다. 정확하게 그 객체의 property의 type를 정의하고 싶을 때는

 posting: PropTypes.exact({
    id: PropTypes.number,
    title: PropTypes.string,
    imageUrl: PropTypes.string,
    userName: PropTypes.string,
    like: PropTypes.arrayOf(PropTypes.string)
  }),

위와 비슷하게 작성하면 된다.
그리고 defaultProps 또한 설정을 해야 한다.

아래에는 한 컴포넌트의 propsvalidation 및 defaultProp이다.

Posting.propTypes = {
  user: PropTypes.string,
  setUser: PropTypes.func,
  globalUser: PropTypes.string,
  size: PropTypes.string,
  posting: PropTypes.exact({
    id: PropTypes.number,
    title: PropTypes.string,
    imageUrl: PropTypes.string,
    userName: PropTypes.string,
    like: PropTypes.arrayOf(PropTypes.string)
  }),
  comments: PropTypes.arrayOf(PropTypes.object),
  state: PropTypes.oneOfType([PropTypes.number, PropTypes.array]),
};

Posting.defaultProps = {
  user: "",
  setUser: "",
  globalUser: "",
  size: 0,
  posting: [],
  comments: {},
  state: 0,
};

Future Action