[React] React란?

하서율·2022년 8월 6일

위코드

목록 보기

12/15

▪️ React

리액트의 주요 기능

SPA (Single Page Application) 로써 페이지전환을 부드럽게 해준다
- index.js파일을 통해 index.html파일의 div(root) 내부에 코드를 추가하여 화면을 그려줌
component 기능으로 html의 재사용을 가능하게 한다
state 기능으로 변하는 데이터를 html 에 자동으로 반영해 줄 수 있다.
프로젝트를 개발하는데 필요한 주요 도구들이 Node.js기반이기 때문에 반드시 Node js를 설치해야 한다.
UI 구축이 주 목적이기 때문에 그 외 다른 기능을 사용하기 위해서는 다른 패키지들과 서로 호환을 해주는 과정이 필요하다
NodeJs
- 브라우저 밖에서도 자바스크립트를 실행 할 수 있게 해주는 실행환경
npm (node package manager)
- Node.js를 설치하면 자동으로 설치되는 패키지도구
- Node기반의 다양한 패키지를 설치하고 버전을 관리할 수 있다.
CRA (Create-React-App)
- 리액트 프로젝트를 시작하는데 필요한 도구들을 미리 조합하여 설정하는등, 개발 환경을 미리 세팅해주는 toolchain중 하나.
- 다른 툴체인도 있지만 새로운 싱글페이지 앱을 만들때는 CRA를 가장 권장.
- Node와 NPM이 모두 설치되어 있어야 사용가능
  
  ✔️ 또다른 툴체인
  Next.js : 서버렌더링 Node.js웹사이트 만들기
  Gatsby : 고정적인 콘텐츠 지향적 웹사이트 만들기

특징

선언적 프로그래밍
:문제를 해결하는 과정보다 해결결과에 중점을 둠
(<->바닐라JS : 절차적)
가상돔(Virtual DOM)
: 기존 바닐라 JS는 일부 데이터가 업데이트 되면 페이지를 다시 로드 해서 새로운 페이지를 만들어준다.
또, HTML태그를 하나하나 선택해야하고 코드를 읽었을 때 한눈에 보이지 않는다는 단점이 있다.
그래서 리엑트에서는, 데이터가 업데이트 되었을때, 모든 페이지를 재 업로드 하지 않고 바뀐 부분만 계산하여 업데이트 해준다.

CRA를 통해 프로젝트 생성하기

1. 프로젝트파일에 CRA 설치

cd Desktop/project폴더명
npx create-react-app my-project

2. 프로젝트 폴더로이동

cd my-project

3. 로컬서버열기

npm start

1번 안되는경우:
터미널을 열어 sudo npx create-react-app 프로젝트명 입력

실행중인 서버종료:
터미널에서 Ctrl + C

npx:
프로젝트 생성해주는 명령어 제공

*NodeJS & NPM & 라이브러리 = 스마트폰 & 앱스토어 & 앱 의 관계

주요폴더 설명

Node_modules:

NPM으로 설치한 패키지들이 실제로 저장되는곳
프로젝트 구동에 필요한 모든 라이브러리코드들을 보관하는곳

public:

index.html을 포함, 실제서버에 배포되는 폴더이기 때문에 url로 접근가능하다.
static 파일 보관함
html파일이나 이미지파일들을 잠시 보관하고 싶을때 사용

src:

코드를 작성하는 곳으로, 가장중요한 폴더
index.js가 메인페이지

Public폴더(index.html) & src폴더(index.js) & src폴더(App.js)

Public폴더(index.html)
: SPA로 여기서 자바스크립트를 이용한 모든처리를 다함.

JSX로 작성
- JSX : 자바스크립트 안에서 HTML을 보다 쉽게 작성할 수 있게 도와주는 언어로 html과 문법이 유사

src폴더(index.js)
: index.js와 index.html을 연결.

import 명령어를 사용하여 다른파일들의 내용을 가져올 수 있는데
react reactDOM등 여러 패키지에서 미리만들어둔 함수를 이용해서
DOM에서 id가 root인 값을 가져와서 App이라는 컴포넌트와 렌더링