인프런 커뮤니티 질문&답변
작성한 질문수
리액트 타입스크립트 관련 질문있습니다.
작성
·
20
0
타입스크립트 강의를 따로 안들어서 그런데 컴포넌트 별로 props를 넘길때 언제는 구조분해할당으로 넘기고 언제는 그냥 타입만 선언해서 넘기던데 따로 판단하는 기준이 있을까요?
CommentEditor 컴포넌트 props 넘길때 {postId}:{postId : number} 과
(postId : number) 의 차이가 명확히 그려지지가 않습니다.
답변 1
0
안녕하세요 이진섭님 이정환입니다.
Props의 타입을 정의할 때 postId :{postId : number} 과 (postId : number) 의 차이가 뭔지 모르겠다고 질문 주셨는데요 아마 다음 두 케이스를 말씀하신 것 같습니다.
// 케이스 1
function AComp (props : {id: number}){ ... }
// 케이스 2
type Props = { ... }
function BComp (props : Props){...} 두 케이스 모두 동작은 완전히 동일합니다. props의 타입이 { postId: number} 객체라는 것을 명시하는 건 똑같고, 타입을 인라인으로 쓰느냐 별도로 분리하느냐의 차이일 뿐입니다.
케이스 1은 간단한 컴포넌트에서 빠르게 작성할 때 편리하고, 케이스 2는 Props가 복잡하거나 여러 곳에서 재사용할 때 코드를 더 깔끔하게 관리할 수 있다는 장점이 있습니다. 어떤 방식을 쓰든 결과는 같으니 편하신 쪽으로 사용하시면 됩니다.
다만 이 부분을 정확하게 이해하시려면 타입스크립트의 타입 별칭(Type Alias), 인라인 타입 등의 문법에 대한 기본 지식이 필요합니다. 강의 소개 및 상세 페이지에서 타입스크립트 선수강을 필수로 안내드린 것도 이런 이유에서입니다.
타입스크립트 기초를 먼저 학습하신 뒤에 다시 보시면 훨씬 자연스럽게 이해되실거예요!