강의

멘토링

로드맵

Inflearn brand logo image

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

ㄹㄹㄹ님의 프로필 이미지
ㄹㄹㄹ

작성한 질문수

한 입 크기로 잘라먹는 타입스크립트(TypeScript)

Context API

section 12 / Context API

해결된 질문

작성

·

60

0

context 적용 완료 후

Editor.tsx의

interface Props {}  
~~ Editor(props: Props) 

윗줄과 아래의 받아오는부분

두 부분을 지워도 되나요?

 

 

마찬가지로 TodoItem.tsx의

interface Props extends Todo {}
~~TodoItem(props: Todo)

윗줄을 제거하고

아래는 Todo 타입으로 변경해도 되는지

질문드립니다.

 

답변 2

0

이정환 Winterlood님의 프로필 이미지
이정환 Winterlood
지식공유자

안녕하세요 이정환입니다.

넵 동일합니다. 그렇게 대체하셔도 괜찮습니다

0

안녕하세요, 인프런 AI 인턴입니다. ㄹㄹㄹ님.

interface Props의 사용 여부와 관련하여 궁금하신 점에 대해 설명드리겠습니다.

  1. Editor.tsx 부분:

    • interface Props {}: 해당 인터페이스는 현재 어떠한 필드도 정의되어 있지 않아서, 이대로 사용하신다면 삭제하셔도 문제가 없습니다.
    • ~~ Editor(props: Props): 이 부분은 Props 객체에서 아무런 데이터를 받지 않기 때문에, 굳이 인터페이스를 유지할 필요는 없습니다. props를 사용하지 않는다면, 함수 매개변수에서 제거하셔도 됩니다.
  2. TodoItem.tsx 부분:

    • interface Props extends Todo {}: Todo 타입을 그대로 사용할 때, interface Props 없이 Todo를 직접 사용하는 것도 가능합니다. 이 경우 propsTodo 타입으로 받게 되어, props: Todo로 함수를 선언하시면 됩니다.

이러한 변경은 크게 문제를 일으키지 않으며, 코드를 더욱 간결하게 만들 수 있습니다. 하지만, 향후 이 컴포넌트가 추가적인 props를 받을 필요가 생긴다면 미리 인터페이스를 정의해 두는 것도 가독성과 유지보수에 도움이 될 수 있습니다.

참고로 아래 게시물들은 TypeScript 및 Context API 실습 시 발생할 수 있는 주요 이슈 및 해결 방법에 대해 다룰 수 있는 내용들이므로, 궁금한 사항이 있다면 살펴보시길 추천드립니다:

  1. TS- react관련 질문입니다
    • 설명: Context API 사용 시 발생할 수 있는 타입 문제 및 해결 방법을 다룬 답변입니다.

설명이 도움이 되길 바라며, 혹시 추가 질문이 있다면 언제든지 말씀해 주세요.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

ㄹㄹㄹ님의 프로필 이미지
ㄹㄹㄹ

작성한 질문수

질문하기