[React] 리액트 실행해보기

리액트 란?

인터페이스 구축을 위한 javascript 라이브러리이다. 그럼 리액트가 필요한 이유는 뭘까?

1. Component(컴포넌트)
   • 페이지마다 공통적으로 사용되는 코드들을 따로 빼서 관리 - 컴포넌트화 방식
   • 중복코드를 방지할 수 있다.
   • 컴포넌트 기반의 UI 라이브러리 
2. 선언형 프로그래밍
   • 명령형 프로그래밍인 Jquery와는 다르게 선언형 프로그래밍으로 코드를 간단히 줄일 수 있다.
   • 명령형 - 결과에 대한 과정을 하나하나 나열하는 것 / 선언형 - 목적을 분명히 한 것
3. Virtual DOM
   
   • 브라우저는 이벤트 하나를 실행할 때마다 새로운 돔을 형성하게 된다.
   • 예를 들어, 버튼하나를 눌러 여러 이벤트를 실행시키더라도 실상은 버튼하나를 눌렀을 때 이벤트의 개수만큼 돔 요소가 추가되어 브라우저 동작을 하고 있다. -> 성능저하원인

Virtual DOM 생성 시 브라우저 실행 방식

• 가상의 돔을 만들어 버튼 하나를 눌러도 돔이 한 번만 생성되어 이벤트가 한꺼번에 실행될 수 있도록 하여 성능저하를 해결할 수 있다.

 

※ 여기서 DOM이란?

 

Html을 객체를 변환시켜 놓은 모습

• 브라우저가 실제로 사용하는 객체 
• 웹 브라우저가 html을 틀의 형태로 변환시켜놓은 객체 형식

브라우저가 웹 페이지 하나를 보여주기 위해 거쳐가는 과정

 

---

1. 빈 폴더하나 생성

원하는 경로에 빈 폴더 하나를 생성한다.

 

나는 문서에 폴더를 만들었다.

2. intellij 실행

 

1. 인텔리제이에서 위에서 만든 폴더를 불러온다.
2. 터미널에서 리액트에 필요한 실행환경과 패키지를 확인한다. -> 제대로 설치가 되어 있지 않다면 설치하고 올 것

참고링크 = https://connect00t.tistory.com/3

[React] 리액트 시작 전 Node.js 설치

3.  create-react-app

리액트를 사용하여 개발하려면 배워야 할 기술들이 많다. 대표적으로 바벨, 웹픽 등이 있는데 이런 기술들을 당장 배우지 않아도 쓸 수 있도록 CLI(커멘트 라인 인터페이스)라는 도구를 사용한다.

 

npx create-react-app 프로젝트명

 

※ 아래와 같이 오류가 날 경우, 폴더명 생성 시 대문자가 아닌 소문자로 변경 필요.

오류

Happy hacking!

정상적으로 설치가 되면 폴더 정리를 먼저 해주자.

위와 같은 과정을 거쳤다면 프로젝트 안에  폴더가 생기고 그 폴더 안에 설치된 파일들이 들어가 있을 텐데 설치된 파일들을 꺼내 프로젝트 밑으로 넣어주고 빈 폴더가 된 것은 지우면 된다.

 

처음 저 분홍색 표시가 되어있는 폴더 안에 소스들이 들어가 있었고, 안에 있는 소스들을 밖으로 빼낸 모습

 

폴더 삭제!

 

 

최종적으로 프로젝트 밑에 해당 소스들이 들어가 있으면 되는 것

 

우리는 여기서 package.json 파일로 들어가 간단하게 살펴보자.

 

packge.json

• 맨 위 name은 프로젝트 이름이 적혀있다.
• dependencies에는 패키지들의 정보들을 확인할 수 있다.
• scripts는 npm을 사용하여 리액트 실행 명령어를 확인할 수 있다.

이제 리액트를 실행해 볼 텐데 터미널에 npm start를 입력해 주면..? 끝

 

npm start

 

 

 

쟈란...멀고 멀었다.

 

실행하는 방식을 알았으니 필요 없는 소스들을 제거 후, 만들고 싶은 프로젝트를 만들면 된다.

필요 없는 소스들은 적어놓을 테니 삭제 후 사용하자(필수 X)

 

1. public
   1. favicon.ico
   2. loggo192.png
   3. logo512.png
   4. manifest.json
2. src
   1. App.texs.js
   2. logo.svg
   3. reportWebVitals.js
   4. setupTests.js

5. index.js 필요없는 부분

 

6. app.js 필요없는 부분