React 컴포넌트 prop이 어디서 왔는지 쉽게 찾는 꿀팁

코드를 읽다 보면 이 속성(prop)이 어디서 온 건지 궁금할 때가 있습니다. 그럴 땐 속성을 선택하고 아래 단축키를 누르면 속성 이름을 기반으로 빠르게 검색해 줍니다. 특히 TypeScript를 사용하고 있으면 IDE가 똑똑하게 타입 기반으로 속성이 선언된 곳을 찾아주기 때문에 좀 더 정확도가 높습니다. Webstorm * 맥: Command + B * 윈도우: Ctrl + B VSCode * 맥: F12 * 윈도우: F12 실제 작업할 때 예시를 알려드리면, 컴포넌트 상단에 정의된 Props 인터페이스에서 필드명을 더블클릭하고 Command + B를 누릅니다. 그럼 이 속성을 전달하는 부모 컴포넌트를 보여주는데, 해당 항목을 클릭하고 다시 Command + B를 눌러서 그 속성을 전달하는 부모 컴포넌트를 다시 찾아갑니다. 이 과정을 반복해서 속성이 어디서 왔는지 빠르게 찾을 수 있습니다. interface ButtonProps { onClick: () => void; // 1. 요기에 커서 올려놓고 단축키 입력 } interface ButtonContainerProps { onClick: () => void; // 3. 요기에 커서 올려놓고 단축키 입력 } const ButtonContainer = ({ onClick }: ButtonContainerProps) => { // Blah Blah return ( // 2. 요기에 커서 올려놓고 단축키 입력 ) } 이 방법은 컴포넌트 깊이가 어느정도 있는 구조에서 특히 유용한 것 같습니다.