replit으로 리액트 시작하기

일반 컴퓨터에서 리액트를 시작하기 위해서는 여러가지 인스톨하고 환경설정하고 등등 해야 할 것 들이 많다. 그러나 replit을 사용하면 인터넷 상에서 바로 리액트를 이용할 수 있어 아주 좋다. 인터넷에서 리액트를 사용하는 방법을 알아보자.

먼저 https://replit.com/~에 접속해서 회원가입 하고 로그인한다.

 

초기 화면에서 '+'가 보이는 아이콘중 아무것이나 클릭하면 시작한다. 3개의 '+ '아이콘중 아무것이나 눌러도 똑 같다.

 

Create a Repl 창이 뜨면 검색창에 react를 입력하자. replit에서 제공하는 template이 50개가 넘으므로 스크롤을 내려서 찾기가 쉽지않다. React Javascript를 클릭한다.

 

Title에 적당한 이름을 주고 엔터를 누르거나 아래 '+ Creat Repl' 버튼을 클릭한다.

 

리액트 초기 화면이 열린다. 좌변을 보면 리액트를 구성하는 여러 파일들이 보이는데 'src' 폴더 안에 3개의 파일이 있다. 이 중 메인 파일이 App.jsx 파일이다. 여기에다 대부분의 코드를 입력하게 된다. 처음에는 Replit에서 제공하는 글자가 출력된다. 우변에 보이는 Webview 화면이 실지 인터넷 브라우저에 출력되는 화면이다. 우측에 있는 화면 확대 아이콘을 클릭하면 인터넷 브라우저 화면으로 넘어간다.

 

반응형

 

<main></main> 태그 사이에 넣는 문자열이나 태그가 브라우저 화면에 나타난다.

 

index.jsx 파일은 프로그래머가 거의 손댈일이 없는 파일이다. 리액트에서 내부적으로 처리된다.

 

App.css 파일은 브라우저 화면에 표시되는 기본 스타일을 지정해 주는 파일이다. 필요에 따라 프로그래머가 편집한다.

 

src 폴더 밖의 index.html 파일이 실제 브라우저 화면에 내용을 뿌려주는 파트이다.  index.jsx 파일안에서 document.getElementById('root') 부분을 찾아 App.jsx 파일의 내용을 뿌려주는 것이다.

리액트의 기본 화면 구성과 각 파일들의 용도에 대해서 알아보았다. 다음 시간에는 좀더 리액트의 세계안으로 깊이 들어가 보자.