새로운 React Native IDE 사용해보기

 

 

 

요즘 RN을 새롭게 배우고 있는데 Flutter로 개발하던 시절의 좋았던 개발 경험이 자꾸 생각나는 거 같다. 

 

그 이유를 생각해 보면 IDE를 통한 편리한 개발 환경 덕분이였던 거 같은데,

오늘은 Flutter의 IDE와 유사한 React Native IDE에 대해서 설치 방법과 기능을 간단히 작성해 보려고 한다.

 

React Native IDE 공식 홈페이지

 

React Native IDE 설치 방법

React Native IDE는 다른 IDE들 처럼 codebase 근처에 두고 개발하며 바로바로 업데이트 내역을 확인할 수 있다.

다만 아직 배타 버전이며 macOS의 개발만 지원하고 있다. 

 

 우선 홈페이지에 접속한 후 Download from VSCode marketplace 버튼을 눌러서 익스텐션을 사용자 VSCode에 설치해줘야 한다.

 

 

 

그 후 깃허브의 릴리즈 페이지로 들어가서 원하는 버전의 .vsix 파일을 다운로드한다.

 

 

그 후 VSCode의 익스텐션 탭으로 들어가 아래 사진처럼 vsix를 직접 설치해 주면 된다.

 

설치가 성공적으로 이루어졌다면, 우측 상단에 아래 사진과 같은 버튼이 새로 생긴 것을 볼 수 있다.

 

 

만약 인식이 안된다면 터미널에 아래 명령어를 입력해 주면 된다.

code --install-extension myextension.visx

 

설치가 완료 됐으면 VSCode를 완전히 껐다가 켜주도록 하자.

  

주요 기능

1. Click to inspect

원래 Flutter에 있던 기능인데, 화면 요소를 클릭하면 해당 개발 컴포넌트로 바로 이동할 수 있다.

 

 

2. Breakpoints

VSCode의 중단점을 선택했을 때 인스팩트에서 바로 확인 가능하다.

 

3. Navigation made easier

navigation 스택 또한 쉽게 확인 및 테스트 가능하다.

 

4. Search through the logs easily

로그 또한 쉽게 확인할 수 있다.

 

 

5. Develop components in isolation

이 기능도 유용한데, 개별 컴포넌트를 만들고 바로 확인할 수 있다.

 

사용 방법은 'react-native-ide'를 설치하고 아래 예시처럼 사용하면 된다.

import {preview} from 'react-native-ide';

funtion Component():JSX.Element {
	return <View>test</View>
}

preview(<Component/>)

 

이 밖에도 다크 모드나 텍스트의 크기들을 인스팩터를 통해 쉽게 변경할 수 있다.

 

마무리

사용하다 보면 잔 버그들이 있는 걸 볼 수 같지만, 아직 배타 버전이기도 하고 편의성이 정말 뛰어나기 때문에 만족하고 있다.

다만, 올해 3분기 말에 배타가 종료되면서 유료화가 된다고 하다... ㅠ

 

그때까지 많이 사용해야겠다.

 

 

끝