• React

[REACT] React

man_on 2021. 8. 29. 16:57

React

🔻 사용자 인터페이스(UI)를 만들기 위한 Javascript 라이브러리

✔️ 사용이유?

UI를 자동으로 업데이트 해줌 ( 가상 돔 virtual Dom을 통해 UI를 빠르게 업데이트)

virtual Dom : 이전 UI상태를 메모리에 유지해서, 변경될 UI의 최소 집합을 계산 ( 불필요한 UI업데이트 줌, 성능향상)

✔️ 작업환경

Node. js : js가 브라우저 밖에서도 동작하게 하는 환경

npm : 다양한 패키지를 설치하고 버전을 관리할 수 있음

React Native : 웹> 앱 / 안드로이드 & ios동시에 가능

React VS React.DOM

react : component를 생성하고 관리

react.DOM : component를 가져와 DOM에 rendering하는 library (실제 DOM과 상호작용)

🔻 react에서 render되는 과정

index.html의 <div class=container>에 수많은 component들이 render되는 것.

(최상위 루트인 container요소안의 자식으로 들어가는 것이다.)

//src - index.js
import React from "react";
import ReactDOM from "react-DOM";

const App = () => {
  return <div> hi</div>;
};

ReactDOM.render(<App />, document.querySelector(".container"));

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/style/style.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css">
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAq06l5RUVfib62IYRQacLc-KAy0XIWAVs"></script>
  </head>
  <body>
    <div class="container"></div>
  </body>
  <script src="/bundle.js"></script>
</html>

✔️ 작업환경

Node. js : js가 브라우저 밖에서도 동작하게 하는 환경

npm : 다양한 패키지를 설치하고 버전을 관리할 수 있음

React Native : 웹> 앱 / 안드로이드 & ios동시에 가능

CRA

Create-React-App

: 리액트 프로젝트를 시작하는데 필요한 개발 환경 세팅해주는 도구

✔️ CRA 설치

1. 리액트 프로젝트 생성

npx create-react-app 프로젝트명

2. react-app에 접근

cd 프로젝트명

3. 개발모드 실행

npm start ( https://localhost : 3000 접속된 창 )

4. 개발모드 종료

ctrl + c

CRA 기본 폴더 및 파일 구성

> node.modules

CRA 를 구성하는 모든 패키지 소스 코드가 존재

(github에 올릴때 불필요함 > .gitignore파일에 추가)

> package.json

CRA 기본 패키지 외 추가로 설치된 라이브러리/패키지 정보(종류, 버전)가 기록

( 실제 내코드와 설치 패키지는 내 로컬에만 존재 > github올릴때 package.json넘기면 다른사람이 pull받아서

npm install만 입력하면 package.json확인하여 자동설치)

참고) 새로운 Library(package) 설치 시

> npm으로 설치 (ex. npm install slider)

설치 시 node modules 에 자동설치 되지만 package.json - dependencies 에 추가 자동으로 되는 건 아님.

그래서, npm install slider —-save ( —-save 까지 작성해야 dependencies 에 추가)

"scripts"

run : 프로젝트를 development mode(개발 모드) 실행을 위한 명령어. npm run start.

build : 프로젝트 production mode(배포 모드) 실행을 위한 명령어. 서비스 상용화.

> gitignore

.gitignore 파일에 github 에 올리고 싶지 않은 폴더와 파일을 작성

> public 폴더

index.html / images - 이미지 파일 관리 / data - mock data 관리

> public - index.html

CRA에는 html파일이 index 한개. (리액트로 만든 앱은 single page application 이기 때문)

> src 폴더

components - 공통 컴포넌트 관리

pages - 페이지 단위의 컴포넌트 폴더로 구성 ( Login - Login.js, Login.scss ) ( Main- Main.js, Main.scss )

styles 폴더 ( reset.scss - css 초기화 ) ( commom.scss - 공통으로 사용하는 css 속성 정의 )

index.js / App.js 제외 삭제

> src - index.js (고정)

React의 시작 (Entry Point)

ReactDOM.render( <App /> , document.getElementById('root'))

( ReactDOM.render 함수의 인자는 두 개

첫 번째 인자는 화면에 보여주고 싶은 컴포넌트, 두 번째 인자는 화면에 보여주고 싶은 컴포넌트의 위치)

> src - App.js

현재 화면에 보여지고 있는 초기 컴포넌트

참고) components vs. pages

여러 페이지에서 동시에 사용되는 컴포넌트의 경우 components 폴더에서 관리 (ex. Header, Nav, Footer)

페이지 컴포넌트의 경우 pages 폴더에서 관리.

해당 페이지 내에서만 사용하는 컴포넌트의 경우 해당 페이지 컴포넌트 폴더 하위에서 관리.

저작자표시 비영리 변경금지

'• React' 카테고리의 다른 글

[React] Router (0)	2021.10.24
[React] React hook basic (0)	2021.10.21
[REACT] State / Event (0)	2021.09.04
[REACT] Component / Props / Mock data (0)	2021.09.01
[REACT] JSX / Component (0)	2021.08.30

현재글[REACT] React

chez Manon

[REACT] React

React

React VS React.DOM

CRA

CRA 기본 폴더 및 파일 구성

'• React' 카테고리의 다른 글

'• React'의 다른글

티스토리툴바

[REACT] React

React

React VS React.DOM

CRA

CRA 기본 폴더 및 파일 구성

'• React' 카테고리의 다른 글

'• React'의 다른글

관련글

티스토리툴바

CRA