[React Native] React Native IDE

안녕하세요! RyuWoong입니다.

React Native의 DX가 조금씩 향상되는 모습을 보이는거 같아 기쁩니다.

그래서 이번에 Beta로 등장한 React Native IDE를 소개 드리려고 합니다.

---

React Native가 0.73 버전 부터 Debugging에 대한 개선을 알렸는데요!

핵심만 뽑으면 아래와 같은 내용들이예요.

 

Debugging Improvements

- Console Log History in Hermes

- Updated Debugging Docs

- Experimental New Debugger

 

자세한 내용은 아래 링크에서 확인할 수 있어요!

React Native 0.73 - Debugging Improvements, Stable Symlink Support, and more · React Native

 

이러한 변화에 발 맞춰 VSCode에서 사용할 수 있는 React Native IDE라는 Extension이 Beta로 등장 했습니다. React Native에 중요한 축을 담당하고 있는 Software Mansion에서 제작했습니다.

 

단순하게 기능을 짚어보면,

1. 우선 VSCode 내에 패널로 Simulator를 띄워 앱을 확인 할 수 있습니다. 마치 Expo처럼!

2. 컴포넌트를 선택하여 해당 코드로 이동할 수 있습니다!

3. VSCode에서 break point도 쉽게 설정할 수 있죠.

4. Expo Router를 사용하신다면, 주소를 입력하여 Navigation 할 수 있습니다.

5. log도 쉽게 확인할 수 있으며, 어느 파일에서 log 되었는지 표시해줍니다.

6. 해당 컴포넌트만 Preview 할 수 있습니다.

7. 또한 기기의 TextSize나 DarkMode 여부도 패널로 제공하여 쉽게 제어 할 수 있습니다.

React Native IDE

Flutter에 비해 부족했던 DX(Developer Experience)를 끌어올릴거 같은 기대감에 들뜨게 되네요. 아직 해당 Extension은 Beta이며, 링크를 통해 Beta 신청 할 수 있습니다. 

디스코드에 가입하고, Beta 신청하시면 수 일내에 Github Repo 초대가 올겁니다! 

 

이제 Vscode Extension으로 검색 후 내려받을 수 있습니다! 

 

아직은 사용하면서 베타인지라 몇몇 아쉬운 부분이 있지만 향후 기능 개선 및 추가가 된다면, 정말 환상적인 RN 생태계를 꿈꾸게 될 것 같습니다.

 

점점 더 좋아지고 있어서 뿌듯하네요!