리액트 앱 만들기, 동작원리

리액트는 웹 서비스를 만드는 기술이지만 다양한 상호작용을 제공하기에, 마치 웹이 아니라 어플리케이션 같아서 React App이라 부름

 

 

 

 

[React App 만드는 3단계]

 

1. npm init을 통해 Node.js 패키지 생성

2. npm install react를 통해 리액트 설치

3. 기타 도구들 설치하고 설정

 

하지만 3번처럼 처음부터 하나하나 세팅하려면 사전에 공부해야하는 도구(웹팩, 바벨 등)들이 너무 많다. 즉 입문자들에게 권장하기 어렵다

 

그래서 vite3를 이용한다. vite3은 명령어 한 번으로 잘 세팅된 리액트 앱을 자동으로 생성해 준다.

 

 

 

 

[리액트 앱 생성]

 

터미널에 npm create vite@latest 입력한다.

vite라는 도구를 이용해서 새로운 리액트앱을 생성하는 명령어이다.

 

+ vite 또한 node js 라이브러리라서 npm~ 을 이용한다

+ @latest는 가장 최신의 리액트앱을 생성하겠다는 뜻

 

 

1. Project name을 물어본다. 입력한 값이 패키지 이름(리액트 앱의 이름)이 됨

2. Select a framework를 통해 프레임워크를 선택하라고 나온다. 

3. Select a variant를 통해 리액트 앱의 버전을 물어본다. 

 

3가지 과정을 입력하면 폴더가 생성된다. 이후 npm install을 통해 라이브러리를 받는다.

 

 

 

 

 [vite를 이용해서 생성된 리액트앱의 어떤 파일과 폴더들이 있는지 살펴보자]

 

- package.json 파일 안에  devDependencies 부분이 있는데, devDependencies는 실제로 프로젝트를 빌드해서 서버에 올릴 때는 필요하지 않은 ‘개발용 라이브러리’를 명시하는 공간이다.

 

 

- public 폴더는 svg, png, jpg 같은 이미지를 보관하거나 폰트나 동영상 등의 코드가 아닌 정적인 파일을 보관하는 장소이다.

 

- src 폴더는 실제 우리가 작성하는 리액트, JS 코드들을 보관하는 폴더이다.

 

- src/assets 폴더는 소스에서 직접 접근하는 이미지나 폰트를 보관하는 곳이다. public 말고도 소스에서 직접 접근해서 사용하고자 한다면 assets 폴더에 보관할 수도 있다.

 

- src/App.css는 CSS를 보관하는 파일  src/App.jsx는 js코드와 react코드가 작성된다.

 

- .eslintrc.cjs는 eslintrc의 옵션을 설정하는 곳이다. eslintrc는 개발자들 간의 코드 스타일을 통일하는데 도움을 주는 도구

 

- .gitignore는 깃허브에 업로드할 때 생략하고자 하는 파일을 명시하는 곳

 

- index.html는 리액트앱의 틀 역할을 하는 HTML 코드들이 담긴 파일 

 

- vite.config.js는 리액트 앱을 만들 때 사용한 vite라는 도구의 옵션을 설정하는 파일

 

 

 

 

npm run dev를 입력하면 vite가 리액트 앱을 작동시켜 준다.

 

 

 

 

[리액트앱 동작원리]

 

 

[http://localhost:5173은 무슨 주소이고, 이 주소로 어떻게 리액트 앱에 접속할 수 있는 것일까?]라는 질문에 대한 답을 알기 위해서는 웹과 웹서버에 대한 원리를 먼저 살펴봐야 한다.

 

모든 웹 서비스는 도메인이라고 불리는 고유한 주소가 있다. https://naver.com에 접속하다는 것은 사용자가 웹브라우저를 통해서 https://naver.com이라는 주소를 가진 웹 서버에 요청을 보내고, 웹 서버는 그에 맞게 응답으로 웹 페이지를 보내주는 것이다.

 

즉 우리가 만든 리액트앱도 웹 서버로서 http://localhost:5173 주소를 갖고, 브라우저가 이 주소로 요청을 보내면, 이에 맞게 리액트 웹서버가 알맞은 페이지를 보내주는 것

 

 

 

 

http://localhost:5173

 

'localhost'는 ‘내 컴퓨터’를 의미한다.

 

리액트 앱을 만들고 실행시킨다는 것은 사실 내 컴퓨터에 리액트 웹서버를 가동시킨 일을 한 것이다. 이 리액트 앱의 주소가 바로 http://localhost:5173이다.

 

즉 컴퓨터에 리액트 앱을 켜놓고, 브라우저를 통해 http://localhost:5173을 요청을 보내면 결국 내 컴퓨터의 리액트 웹서버에 요청을 보내는 것과 동일하다 

 

 

 

:5173 는 포트번호이다.

포트번호는 하나의 컴퓨터 내에서 여러 대의 서버를 동작시키기 위해 필요한 주소 체계이다.

 

만약 내 컴퓨터에서 리액트 앱으로 만든 웹 서버와 PHP 앱으로 만든 웹서버가 함께 동작하고 있다고 하자. 컴퓨터의 주소는 http:// 10.0.0.8이다.

 

이때 브라우저에서 http:// 10.0.0.8 주소로 요청이 들어오면 어떤 서버가 응답을 해줘야 하는지 알 수가 없다. 그렇다고 하나의 컴퓨터에 하나의 서버만 켜는 것도 서버값이 아깝다. 이를 해결하기 위해 하나의 컴퓨터 내부에서 특정 프로그램을 가리키는 번호인 포트번호를 사용하는 것이다. 

 

주의할 점은 localhost는 자기 자신의 컴퓨터를 나타내는 주소이므로 남의 컴퓨터에서는 이 주소로 리액트 앱에 접속할 수 없다.

 

 

 

 

[리액트 앱이 어떤 원리로 화면에 요소들을 렌더링 하는가!]

 

index.html 파일을 열어보면 실제로 화면에 나타날 요소들이 없다. 즉 빈 div태그와 script태그 밖에 없다.

 

 

하지만 화면에는 요소들이 나온다.

 

 

index.html의 <div> 안에는 내용이 비워져 있으나, 실제 개발자 도구로 보면 이미지 등이 들어가 있다. 이는 script태그가 실행한 js태그가 동적으로 생성한 요소이다.

 

 

main.jsx로 이동해 보면 리액트에서 제공하는 다양한 함수를 사용하는 것을 확인할 수 있다.

대략적인 의미는 'id가 root인 요소를 가져와서, 리액트의 Root로 만들고, 그 요소 아래에 <App/> 컴포넌트가 렌더링 하는 이미지나 글자들을 렌더링 하겠다!'이다.

 

 

<App/>은 그럼 뭐냐?

 

 

<App/>으로 이동해 보자

App이라는 함수가 있고,

export default App으로 App함수를 내보내고 있다.

즉 main.jsx는 App.jsx로부터 내보내기 된 <App> 함수를 불러와서 렌더링 한다

 

 

 

정리하면 App 함수가 반환하는 값들이 main.jsx의 root라는 id를 갖는 div 아래에 렌더링이 되고 있는 것이다!