23-01-13 리액트 시작 / 리액트란? , JSX의 문법

*프레임워크란?

-라이브러리들이 모여서 큰덩어리를 이루고 그것이 뼈대를 이루고 있는것이 프레임 워크

 

1. 리액트란?

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

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

 

SPA란?

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

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

 

어떻게?

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

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

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

 

 

DOM (Document Object Model) 이란?

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

 

리액트의 Virtual DOM 이란?

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

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

 

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

 

 

걱정마세요 리액트가 해줄거에요

 

2. 환경설정하기

1. node.js 다운. 설치

-node.js는 자바스크립트 서버임.

-주소 : https://nodejs.org/ko/

-무조건 최신버젼을 받는게 아니고, 안정적이고 가장 많이 쓰는 왼쪽 버젼으로 다운로드.

2. 에디터 vscode 설치

3. create-react-app으로 프로젝트 생성하기

npm create react-app 프로젝트명

- react 폴더에서 위 구문으로 프로젝트를 설치합니다.

- 프로젝트가 설치된 뒤에,  vs-code file 메뉴에서 open folder 누르고  만든 프로젝트 폴더를 root 폴더로 다시 지정해줍니다.

 

4. 프로젝트  시동하기

npm start

- 서버를 끄고자 하면  터미널 창에서 

  ctrl + c 를 눌러줍니다.  그러면

 

일괄 작업을 끝내시겠습니까 (Y/N)? n 이렇게 나옴.

다시 서버를 시작 하고 싶다면

npm start 를 통해 서버 시작.

 

리액트 코드 살펴보기

1. index.js

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
	<React.StrictMode>
   		<App />
	</React.StrictMode>
);

index.html에 id가 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/> 로 사용됩니다.

 

- JSX란?

JS의 확장 문법으로 (HTML에 JS코드를 녹여낸 형태) 입니다.

 

- 코드를 수정하게 될 때 자동으로 화면이 리렌더링 됩니다. (웹팩 로더가 동작)

- Webpack Loader는 직접 설정(커스터마이징)도 가능하고, create react-app 생성시 자동으로 해줍니다.

 

Webpack Loader는 다양한 종류가 있습니다.
1. css로더 - css로드
2. file로더 - 폰트,이미지, 파일 등 로드
3. babel로더 - ES6문법을 화면에서 사용할 ES5문법으로 다운그레이드 하여 변환해 줍니다.

 

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. 홀로 사용하는 태그는 닫는태그를 반드시 작성합니다.

jsx 문법 코드확인

import logo from './logo.svg';
import './App.css';
import { Fragment } from 'react';

function App() {
  /*
  jsx문법

  */

  const name = "홍길동"; //변수
  const age = 20;
  const myStyle = {color: 'red', backgroundColor : 'yellow', fontSize: 15};

  return (
    <Fragment>
      <ul>
        <li>1. 주석 alt + shift + a {/* 주석 */}</li>
        <li>2. return구문은 반드시 1개여야 합니다. 반드시 하나의 태그를 리턴 해야합니다</li>
        <li>3. div를 사용하고 싶지 않으면 Fragment컴포넌트를 사용합니다</li>
        <li>4. 함수안에서 변수를 만들고 사용하고 싶으면 {name}를 사용합니다</li>
        <li>5. if문 대신에 3항연산자를 사용합니다</li>
        <li>6. 화면에 그리고 싶은 내용이 없다면 null을 반환합니다</li>
        <li>7. undefind을 반환하는 상황을 만들면 안됩니다.(렌더링은 가능)</li>
        <li>8. DOM에 직접 스타일을 하고 싶은 경우는 객체로 묶고 속성은 카멜 표기법을 사용합니다.(단위생략시 px)</li>
        <li>9. class속성 대신에 className을 사용합니다</li>
        <li>10. 홀로 사용하는 태그는 반드시 닫는 태그를 작성합니다. (예: {/* <input /> <br/> */}</li>
      </ul>

      <div className='App' style={myStyle}>
        {name === '홍길동' ? '홍길동입니다' : '홍길동이 아닙니다'}
        {name === '이순신' ? <h3>이순신입니다</h3> : <h3>이순신이 아닙니다</h3>}
        {age === 30 ? <h3>20입니다</h3> : null}
      </div>

    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          안녕하세요~
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
    </Fragment>

  );
}

export default App;

 

결과