Notice
Recent Posts
Recent Comments
Link
«   2024/03   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
Tags
more
Archives
Today
Total
관리 메뉴

coding etude

[typescript] missing in prop validation react/prop-types error 본문

TypeScript TIL

[typescript] missing in prop validation react/prop-types error

코코리니 2021. 2. 7. 17:06

Ts 기본 셋팅을 진행 후 component를 만들면서 interface 와 type 를 지정하고 tsx에 변수 및 함수를 사용하면

제목과 같은 오류가 발생한다. 

이유는 생각보다 간단하다.

ESlint의 유효성 검사에서 타입에 대한 내용리 누락 되어서 라고 생각이 된다.

typescrip-eslint : github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prop-types.md    

 

위의 페이지에서 보면 기본 Js 에서 사용하는 방법과 Ts에서 사용해야하는 방법 그리고 진행 흐름에 대한 예시를 볼 수 있다.

 

그리고 가장 마지막에 .eslintrc.js 파일에 적용하는 옵션값이 나온다. 여러 블로그를 확인했을 때,(위 github 페이지에서도 역시..)

 

1. 가능하다면 모든 prop의 타입을 적어주는게 좋다.

 하지만, interface/type 를 바로 가져와서 사용 할 때는 타입을 적을 수 없어서 lint 유효성 검사에 걸리는 듯 하다.

 

2. lint 옵션에 유효성 검사의 레벨을 설정해 주면 된다.

 대부분 이 방법을 가장 좋은 추천방법으로 이야기 했다. 물론 코딩의 흐름상 타입을 잘못 설정하는 경우도 있지만, 타입을 잘못 설정하거나 누락 했을 경우 Ts 자체적인 오류 값이 나오기 때문에 lint의 유효성 검사를 끄는것이 아닌가 생각이 든다.

 

설정 방법에 대해서 다음과 같이 나와 있다.

처음에 저 내용을 어디에 적용시켜야 할지 매우 난감했다.. 내가 아직 감이 없는 것 일 수도 있고...

여기저기 손대다가 결국 .eslintrc.js 파일에서 rules 를 추가해주고 레벨을 설정해 주면 되는 문제 였다.

위의 방법 처럼 각 항목에 맞는 설정값을 넣어주면 간단하게 해결 된다. 

 

항상 느끼는 것이지만.. 답은 공식문서에 있다.. 찾기 어렵거나.. 눈에 안띄거나... 이해하기 힘들어서 그럴 뿐....

'TypeScript TIL' 카테고리의 다른 글

[typescript React] ESlint config setting  (0) 2021.02.01
[TYPESCRIPT] interface  (0) 2021.01.14
[TYPESCRIPT] 기본타입  (0) 2021.01.12