인프런 커뮤니티 질문&답변
작성한 질문수
eslint 메시지부분 질문드립니다
작성
·
223
1
안녕하세요!
강의 열심히 듣고있습니다
회사에서도 타입스크립트를 사용하는데 에러날때마다 사진에서처럼 eslint메시지를 보면서 구글링을 하는데 정확히 무슨의미인지 잘 모르겠습니다.
사진에보면 1,2,3번으로 표시를 해뒀는데
1번은 input이 onChange함수에 기본으로 설정되어 있는 타입이 맞나요??
2,3번은 제가 설정해놓은 props랑 default props에 따라 나오는 메시지인지 모르겠어요
(지금 타입스크립트랑 react내장 라이브러리 type-props랑 같이 사용하고 있고, strict 모드를 사용중이라 strictNullChecks 부분을 false로 할 수가 없는상황입니다.)
null로 타입을 지정하지도 않았는데 2,3번에 계속 null이 나오는 이유도 모르겠고
혹시 강의 내용중 관련된 영상이 있다면 알려주시면 제가 찾아보겠습니다!
아직 초급부분밖에 못들었습니다. 감사합니다!!
답변 4
1
네 영미님, 코드 첨부해 주셔서 감사합니다. 이미지라서 제가 코드로 작성해 드리긴 어려울 것 같고 대신 살펴볼 부분 말씀 드릴게요. 말씀 드렸던 것처럼 onChange를 changeText라는 함수로 연결할 때 changeText 함수의 타입이 onChange의 타입과 호환되지 않네요. 마침 제가 작성해 놓은 리액트 코드가 있어서 대신 첨부 드립니다.
리액트는 내부적으로 HTML 태그 속성과 이벤트 제어 옵션에 대해 모두 타입을 정의해 놓았습니다. 아래처럼요.
따라서 onChange 이벤트가 발생했을 때 호출되는 함수가 onChange의 타입을 수용할 수 없으면 에러가 발생합니다. 요게 지금은 이해가 안가실 수 있겠지만 실전 강의에서 제가 DOM 이벤트 처리하는 부분 들으시면 아 그래서 그랬구나 라고 이해하실 수 있을거라고 생각해요. 타입스크립트가 처음엔 어려운데 조금 알고 나면 재밌습니다. 그럼 화이팅 하시고 서비스 재밌게 만드세요! :)
P.S: changeText 함수에 디스트럭처링을 쓰셨던데 디스트럭처링된 문법에도 타입 정의가 가능합니다. 고건 한번 찾아보시면 금방 나올거에요 :)
1
앗..저는 타입스크립트 에러라고 생각해서 질문을 올려도 괜찮을 줄 알았습니다 ㅠㅠ 죄송합니다..
신입으로 첫 프로젝트로 혼자서 해보고있는 코드인데 자꾸 같은 패턴으로 에러가 나서 대략적으로 방향이라도 말씀해주신다면 제가 구글링하는데 많은 도움이 될거같아서 한번 더 질문드리겠습니당...
(혹시 질문이 잘못되었거나 답변하기 곤란하시다면 지우도록하겠습니다..!)
계속 null값으로 찍히는거 같아 느낌표를 달아주었더니 에러는 안나는데 vscode에선 경고를 띄워서 근본적인 이유를 알고 해결하고싶습니다(아토믹패턴을 적용해서 작업중입니다)
틈틈히 남은 강의 완강하겠습니다.. 감사합니다!!
1
안녕하세요 영미님, 진행 중이신 프로젝트 관련 질문을 주셨네요..! 보통은 수업에서 다루는 주제를 벗어나면 답변을 따로 드리진 않지만 영미님께서 친절하고 자세하게 질문해 주셔서 간단히 답변 드리겠습니다 :)
# strict 모드
개인적으로는 아직 타입스크립트에 익숙하지 않으시다면 strict 모드는 해제하고 작업하시는 걸 추천드립니다. 관련해서 후속 강좌인 TS 실전 강좌를 들으시면 왜 그런지에 대해 설명하고 있으니 일단 먼저 학습하시고 작업하시면 더 디버깅 하시기 쉬우실거에요 :) strict 모드를 키면 기본 타입(string, number, array 등)에서 null, undefined도 별도의 타입으로 간주합니다.
# 타입 호환
에러 메시지를 보니 리액트 input 태그에서 onChange에 선언하신 함수가 리액트 내부적으로 선언된 onChange의 함수 타입과 호환되지 않는 것 같네요. 관련 내용도 다음 강의에서 다루고 있습니다. 시간이 없어 빨리 해결부터 해결하셔야 한다면 아래에 코드를 남겨주세요. 제가 잠시 도와드릴게요!
0