React - 리액트의 개념

1. 리액트란?

 

- 리액트는 자바스크립트 라이브러리입니다.

- 구조가 MVC, MVVM과 같은 다른 프레임워크등과는 다르게 오직 View만 처리하는 라이브러리입니다.

 

SPA란?

- Single Page Application의 줄임말입니다.

- index.html하나만 로드하고 실행시키는 구조입니다.

 

어떻게?

번들러(Webpack)가 이 모든것을 해줍니다.

Webpack이란 어플리케이션을 동작시키는데 필요한 자원(JS파일들, CSS, Image 등)을 하나로 묶어서 조합하여 경량화 하여 결과물을 만들어 주는 도구입니다.

번들러는 node.JS를 통해 직접 설정 할 수 있지만, 리액트 프로젝트를 생성시 자동으로 포함됩니다.

 

 

DOM (Document Object Model) 이란?

- HTML을 이해하기 쉽도록 트리 구조로 만들어진 태그(객체)들 입니다

 

DOM

 

리액트의 Virtual DOM 이란?

HTML에서 DOM을 조작하여 처리할 때, DOM핸들링 자체는 빠릅니다.

하지만, 웹 브라우저가 DOM의 변화를 감지하고, CSS를 적용하고, 처리하는 과정에서 시간이 많이 소요됩니다.

 

리액트의 Virtual DOM은, 이를 추상화시킨 자바스크립트 객체를 이용해서, 바뀐 부분만 부분적으로 리렌더링하여 사용 하는 방법입니다.

쉽게 말하면, 변경페이지와 기존페이지를 비교해서, 변한것이 없다면 그대로 놔두고,
변한것이 있으면 변한것만 부분적으로 바꿔주는 형식이라고 생각하면 될 것 같습니당

 

 

2. 기초 환경설정

 

1. node.js 설치

2. vscode 설치

3. vscode 터미널에다가 이거 입력하기

npm create react-app react-basic

입력하고 y누르면 이것저것 알아서 설치해준다

 

다 설치되면, 왼쪽에 이것저것 생기고

cd react-basic과 npm start를 추천해준다.

그대로 터미널에 입력해주면 react페이지가 나온다!

ctrl + c 를 누르면 실행을 중지할 수 있다

 

위에서 나온 명령문은 이렇다

npm create react-app 프로젝트명(react-basic)

# 프로젝트 최상위에서 실행
cd 프로젝트명

# 시작
npm start

 

 

scripts

- npm으로 실행시킬 수 있는 명령문이 작성된다.

npm start
npm build
npm test
npm eject

 

---

git에서 clone받았을 때 트러블슈팅(문제해결)

- node_modules (node.js 전체모듈이 들어있다.)

- 노드모듈은 git에 올리는 것이 아닙니다.

 

node_modules 폴더가 없는 경우

git에서 프로젝트를 받았을 때 node_module이 없다면 아래명령을 사용하면 된다.

npm install

 

---

 

리액트 코드 살펴보기

 

1. index.js

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

 

- index.html에 iod가 root인 값을 얻음

- React.StricMode는 옛날 기능을 사용할때 경고를 출력하는 기능

- root의 render함수는 App컴포넌트를 화면에 그리는 기능

 

2. App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

 

- return (JSX) 문장을 반환합니다.

- export default App 로 모듈을 빼냅니다.

- Index.js 파일에서 <App/> 로 사용됩니다.

function App() {} 안을 JSX라고 부른다.

JSX란?
- JS의 확장 문법 (HTML에 JS코드를 녹여낸 형태)
- 코드를 수정하게 될 때 자동으로 화면이 리렌더링 된다. (웹팩 로더가 동작)
- Webpack Loader는 직접 설정(커스터마이징)도 가능하고, create react-app 생성시 자동으로 해준다.

 

 

JSX의 문법

1. JSX의 주석 alt + shift + a
2. JSX문법 - 반드시 하나의 태그를 return 해야함
3. div를 사용하기싫다면 Fragment컴포넌트를 이용하면 된다.
4. 함수안에서 만들어진 변수는  중괄호 {name} 로 참조할 수 있다.
5. if문 대신 3항연산자를 이용한다.
6. 화면에 보여주고싶은게 없다면 null을 이용한다.
7. undefind을 반환하는 상황을 만들면 안 된다.
8. DOM요소에 스타일을 직접 넣을때는 반드시 객체형 객체로 묶고 속성은 카멜 표기법을 사용한다.
9. class대신 className을 사용함
10. 홀로 사용하는 태그는 닫는태그를 반드시 작성한다.

 

+

react에서 오류나면 뜨는 것

 

좀 무섭다..

 

react 기본 끝!