React JS ④ validator

하겅 ·2024년 2월 16일

2024 방학 스터디 React

React

목록 보기

5/6

❔props로 넘길 수 있는 값(데이터)의 타입 체크는?

props의 값으로 정수를 적어보면 아래와 같이 빨간 밑줄이 그어지는 걸 알 수 있다. 데이터 타입이 올바르지 않다는 의미. Validator는 아주 다양한데, 이 포스트에서는 위와 같이 타입 오류에 대한 검증을 수행해 주는 validator를 실습해 볼 것이다.

Validator란?

porps로 주고받는 것에 대한 검증(검사)하는 주체

(블록체인에서는 블록체인 상에 기록되는 거래 내역을 확인하는 주체)

Validator의 역할

타입 체크를 할 수 있다.

꼭 전달해야 하는 props와 아닌 prop를 설정할 수 있다. (넘기지 않아도 오류 발생 안 나도록 혹은 넘기지 않으면 오류 발생하도록...)

defaultProps라는 기본 값 지정이 가능하다. (전달 받은 props 값이 없을 시 지정한 기본 값으로 설정)

숫자, bool과 같은 타입 전달 시 주의 → 따옴표('')가 아닌 ({})를 사용해 넘겨 줘야 한다.
one={20} or one={true}

객체와 같이 복잡한 타입 체크를 위한 고급 validator 제공 Oo
ex. shape(), arrayOf(), oneOf(), instanceOf()...

✔️ 즉 이를 통해 컴포넌트가 전달 받은 props가 타입은 알맞는지, 꼭 필요한 props인지를 체크할 수 있다.

type(多): bool, string, number, array, object, symbol, func, element, any...

Tip. 타입 스크립트는 말 그대로 타입 체크가 디폴트 값이기 때문에 이런 기능에 대한 기본 환경 구축이 필요 Xx

🎣 props 타입 체크를 위한 기본 코드

TestProps.js
→ props를 네 개 받고, 받은 값을 p tag의 스타일로 화면에 내보내는 역할의 TestProps 컴포넌트.

App.js → TestProps 컴포넌트로 값을 전달하고 있는 App 컴포넌트.
출력 결과

첫 번째 props ⇨ 키르아

두 번째 props ⇨ 곤

세 번째 props ⇨ 크라피카

네 번째 props ⇨ 레오리오

🎣 validatior 타입 체크 사용해 보기

HOW?

prop-types 설치
npm install prop-types
2. import 필요
import porpsCheck from 'prop-types';
propsCheck는 객체 이름을 임의로 지정해 준 셈이기 때문에 사용하기 편한 대로 변경 가능.

TestProps.js → prop-tpyes Validator를 propsCheck이라는 이름으로 import 한 걸 알 수 있다.
→ is Required를 지정해 줌으로써 props의 입력 유무를 검증하도록 설정.
isRequired로 지정한 props에 값을 넘기지 않는다면?

The prop `two` is marked as required in `TestProps`, but its value is `undefined`.

위와 같은 Warning 내용으로 two 값이 없단 걸 알 수 있다.

마찬가지로 number로 설정했다면 {10}과 같이 작성해 주면 된다. number인데 string으로 작성했을 시 아래와 같이 경고가 뜸! (지정한 조건에 대한 검사 결과로 보내주는 셈

🎣 validator 기본 값 지정하기

TestProps.js→ defaultProps를 통해 전달 받은 props가 없을 때 기본으로 설정될 값을 지정해 준 것.
App.js→ defaultProps를 지정해 주지 않았다고 가정했을 때에는 두 개의 값만 props 전달되어, isRequired로 Warning이 뜨겠지만, defaultProps를 지정해 줬기 때문에 아래와 같이 결과가 달라진다.
결과

🎣 고급 validator

고급 validator 특징

기능의 수준이 올라가서 고급 validator라 칭한다.

함수 체이닝처럼 사용 가능하다. 한 줄로 적던 함수를 계속 .(점)으로 이어서 사용하는 것

사용해 볼 validator: oneOf(), oneOfType(), arrayOf()

oneOf() ↔ oneOfType()
→ oneOf는 타입을 체크하는 validator가 아닌, 값을 체크하는 validator이다. 부모로부터 넘어온 props(값)가 배열에 포함된 값 중 하나인지 체크한다. 즉 특정 값들로 제한을 줄 수 있다.
→ 하지만 Type이 붙어 있다면, 부모로부터 넘어온 props(배열) 내의 값 중 하나라도 타입을 만족하는지를 체크한다고 생각하면 된다.
arrayOf()
특정 타입의 배열인지 아닌지 알 수 있다.
ex. PropTypes.number (number인지 검증)

🎣 고급 validator 사용해 보기

App.js (넘겨주는 값)
TypeProp.js

🐟 oneOf()

첫 번째 예시 코드
→ 부모(App.js)로부터 넘어온 props의 값이 배열 내의 있는 값 중 하나라도 만족하는지 검증한다. (다른 값이 없기 때문에 아무 반응 X) → 하지만 다른 값을 전달하면 위와 같이 검증 결과로 값이 다름을 알려준다.

두 번째 예시 코드

index.js (한 파일에서 다 해결하기 위함)
→ L7: 원래 다른 파일로 만들었던 컴포넌트의 역할을 하는 함수라 생각하면 된다. 역할은 input으로 text를 받음! (defaultValue로 지정한 값과 oneOf 배열 값들의 일치 유무가 검증되고 있음.)
→ L15: propTypes validator를 사용해서 전달 받은 props의 타입을 지정할 수 있었다. (ex. one: propsCheck.string) 이를 값을 체크하는 oneOf으로 함수를 지정하면 input으로 입력 받은 값과 oneOf의 값을 비교할 수 있게 된다.
→ L19: SomeComponent를 사용(호출, 렌더링) 중인 부분. props로 값 한 개를 전달 중이다.
→ L19의 값을 oneOf에 없는 값으로 바꿔 본다면?
→ 사진과 같이 Failed prop type이라는 검증 결과를 내보낸다.

🐟 arrayOf() & oneOfType

둘을 연결(함수 체이닝)해서 사용할 수 있기 때문에 함께 실습.

Q. arrayOf를 통해 전달 받은 배열이 어떤 값(ex. string, number)으로 구성되어 있는지 확인이 가능한데, 굳이 oneOfType을 체이닝 하는가?
A. oneOfType으로 지정 타입인지 체크를 한 결과 값(1)을 arrayOf의 파라미터로 전달해 주면, 결과 값(1)의 타입으로 구성되어 있는 배열인지 확인할 수 있기 때문이다.
arrayOf(propTypes.oneOfType([type1,type2...]))
→ type1과 type2로 구성되어 있는 array인가 검증.
arrayOf만 사용하는 경우 → number인 게 일치하기 때문에 아무 문제 발생되지 않아 검증 결과가 반환되지 않는다. 하지만 아래와 같이 배열에 여러 타입의 값이 들어 있다면 결과가 달라진다.
→ number 타입인지 체크 중인 L4에 위반되어 위 사진과 같은 검증 결과를 내보낸다. 이런 문제를 해결할 수 있는 게 바로 arratOf와 oneOfType의 함수 체이닝이다.
arrayOf + oneOfType 사용하는 경우 → number, string 타입 중 하나라도 해당이 되면 검사 통과가 된다고 생각하면 된다. → 경고 문구가 사라진 걸 확인할 수 있다.
→ 수행 순서는 oneOfType으로 number 혹은 string인지 검사한 후에 arrayOf로 둘 중 하나가 해당되는지 검사하는 식으로 수행된다.