[VSCode] React 개발 시 자주 사용되는 단축키 (+멀티 커서/Refactoring/라인 복사)

---

---

안녕하세요. 오늘은 VSCode 에서 유용하게 사용되는 단축키 몇가지를 알아보도록 하겠습니다. 

소스 변경과 관련된 멀티 커서 / Refactoring / Line Copy 에 대해 알아보고,

소스 트레이스와 관련된 단축키에 대해 알아보도록 하겠습니다.

 

 

 

1. 소스 변경 관련 단축키

1-1) 멀티 커서 (Ctrl + Shift + L)

: 현재 소스 페이지에서 특정 단어를 모두 블록으로 커서를 잡아준다.

 

Ex) "Button" 에서 멀티 커서 단축키 사용 시,

  <Button> BTN Style 1 </Button>

  <Button> BTN Style 2 </Button>

 

>> Button Component 가 모두 모두 블록으로 커서가 잡힌다.

 

 

1-2) Refactoring : Rename (F2)

: 선언된 객체(변수/컴포넌트 등)의 이름을 변경할 수 있으며, 해당 객체의 호출 등 관련된 모든 소스에서 이름을 변경해준다.

 

 - Button Component 이름 변경 전

 

- Button Component 이름 변경 후

 

1-3) 코드 라인 복사 (Alt + Shift + ↑, ↓ 방향키)

: 복사하고자 하는 줄의 코드를 방향키 방향으로 복사해준다.

<Button>Line Copy</Button>
<Button>Line Copy</Button>  // Alt + Shift + ↓  
<Button>Line Copy</Button>  // Alt + Shift + ↓  
<Button>Line Copy</Button>  // Alt + Shift + ↓

 

 

 

2. 소스 트레이스 관련 단축키

2-1) 함수 선언으로 이동 (Ctrl + 마우스 Click)

: Component 혹은 Method 를 호출해서 사용하는 경우, Ctrl + 마우스 클릭으로 해당 Component 혹은 Method 가 호출된 곳으로 이동할 수 있다.

 

2-2) 마지막 커서 위치 기억 (Alt + ←, → 방향키)

: 소스 작성 중 마지막으로 작성하던 커서 위치로 이동하는 경우 Alt + ← 로 이동할 수 있고, 다시 원래 커서 위치로 이동하는 경우 Alt + → 로 이동할 수 있다.