17 asked

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), 인라인 타입 등의 문법에 대한 기본 지식이 필요합니다. 강의 소개 및 상세 페이지에서 타입스크립트 선수강을 필수로 안내드린 것도 이런 이유에서입니다.

타입스크립트 기초를 먼저 학습하신 뒤에 다시 보시면 훨씬 자연스럽게 이해되실거예요!