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 (
    <Button onClick={onClick} />
                  // 2. 요기에 커서 올려놓고 단축키 입력
  )
}

이 방법은 컴포넌트 깊이가 어느정도 있는 구조에서 특히 유용한 것 같습니다.