인프런 커뮤니티 질문&답변

지금 연 파일은 제가 타이핑을 하지 않았고 다운로드 한 소스에서 받은 4-5 폴더를 열었습니다.

npm run dev를 하니 문제가 있어서

npm install 이후에

npm run dev를 했습니다.

안녕하세요.

실제로 값을 전달받는 PrintValue.tsx 파일에서는 부모 컴포넌트로부터 boolean 타입의 값이 넘어올 것을 전제로 하고 있습니다. 따라서 해당 파일 내부에서 사용하는 변수들이 모두 boolean 타입으로 올바르게 처리되고 있다면, PrintValue.tsx 자체에서는 타입 에러가 발생하지 않습니다.

예를 들어 props.booleanValue.toString()의 경우, boolean 타입에도 toString 메서드가 존재하기 때문에 에러가 발생하지 않습니다.

반면, 에러는 PrintValue 컴포넌트에 값을 전달하는 App.tsx 파일에서 발생합니다. 첨부해주신 스크린샷을 보면 App.tsx 파일 탭이 빨간색으로 표시되어 있는데, 이는 해당 파일에 에러가 있다는 의미입니다. 즉, PrintValue 컴포넌트에 타입이 일치하지 않는 값을 전달하고 있기 때문에 에러가 발생한 것입니다.

또한 <PrintValue numberValue={30} ... /> 부분을 보시면 props 영역에 빨간 밑줄이 그어져 있는 것도 확인하실 수 있습니다. 해당 부분에 마우스를 올리면 구체적인 타입 에러 메시지를 확인하실 수 있을 것입니다.

정리하자면, 이번 타입 불일치 에러는 PrintValue 컴포넌트 내부가 아니라, 이 컴포넌트로 데이터를 전달하는 부모 컴포넌트(App.tsx) 에서 발생한 에러입니다.

참고 부탁드리겠습니다!

안녕하세요, 인프런 AI 인턴입니다. 면류관받는날까지님.

먼저, 질문 주신 내용을 읽어보니 App.tsx에서 PrintValue 컴포넌트에 numberValue, stringValue, 그리고 booleanValue라는 props를 넘겨주고 있습니다. 하지만, PrintValue.tsx에서 이 props들이 모두 boolean 타입으로 정의되어 있는 것 같습니다.

주요 원인:

1. 타입 불일치: App.tsx에서 booleanValue를 “true”라는 문자열로 넘겨주고 있지만, PrintValue.tsx에서는 boolean 타입으로 기대하고 있기 때문에 타입 불일치가 발생하고 있습니다. 이로 인해 Typescript가 에러를 감지해야 하나, 환경 설정이나 컴파일러 옵션에 따라 에러 메시지가 보이지 않을 수 있습니다.

2. 환경설정 문제: TypeScript 설정 파일인 tsconfig.json에서 strict 모드가 꺼져 있을 수 있습니다. strict 옵션이 비활성화되어 있으면 타입 불일치와 관련된 에러 메시지가 나오지 않을 수 있습니다.

해결 방법:

1. 타입 일치시키기: PrintValue.tsx에서 정의한 props 타입을 App.tsx에서 넘겨주는 타입과 일치시킵니다. 예를 들어, booleanValue를 실제 boolean 타입인 true로 넘기거나, PrintValue.tsx에서 string 타입을 기대하도록 변경합니다.

2. TypeScript 설정 확인: tsconfig.json 파일에서 strict 옵션이 true로 설정되어 있는지 확인해 보세요. 만약 없을 경우 다음과 같이 설정을 추가할 수 있습니다:

   {
    "compilerOptions": {
      "strict": true,
      // 다른 옵션들...
    }
   }
   

관련하여 도움이 될 수 있는 추가 자료 링크를 제공합니다:
- TypeScript에서 엄격한 타입 체크 및 설정 방법

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.

현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.