Note import 문 자동 완성 기능

리액트에서 여러 컴포넌트를 작성하다 보면 각 컴포넌트를 사용할 때마다 import 문을 직접 입력해야 하는 일이 자주 생깁니다. 하지만 매번 파일 경로를 일일이 작성하는 건 꽤 번거롭습니다. 이럴 때는 VSCode의 자동 완성 기능을 활용하면 훨씬 편리합니다.

return 문 안에서 사용할 컴포넌트 이름(예 <Header />)을 먼저 작성합니다. 그리고 커서를 컴포넌트 이름 바로 뒤에 두고 단축키를 눌러 컴포넌트 목록을 불러옵니다. 단축키는 Ctrl + Space (윈도우) 또는 fn + control + Space (맥OS)입니다. 화면에 컴포넌트 목록과 파일 경로가 표시됩니다. 목록에서 해당 컴포넌트를 선택하면 import 문이 자동으로 작성됩니다.

그림 3-7 import 문 자동 완성