작성한 질문수 3

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

결국엔 리액트에 내장된 타입과 호환이 안된거였군요.. 

바쁘신데 자세하게 알려주셔서 감사합니다!

남은강의도 열심히 듣고 수강평도 남기겠습니다!! 감사합니다^_^