[React.js] React

※ React 리액트

 

 - 구조가 MVC, MVW 등인 프레임워크와 달리 오직 View만 신경쓰는 라이브러리

 - 리액트 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체가 있는데, 이를 컴포넌트라고 함 ( 재사용 가능한 API )

 

 

▶ 렌더링

 - 서버로부터 HTML 파일을 받아 브라우저에 뿌려주는과정

 - 사용자 화면에 뷰를 보여 주는 것을 렌더링이라고 함

 - 컴포넌트는 재사용이 가능한 API로 수많은 기능들을 내장하고 있으며,

    컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식을 정의함

 - 리액트 컴포넌트가 최초로 실행한 '초기 렌더링'과

    컴포넌트의 데이터 변경으로 다시 실행되는 '리렌더링' 개념을 이해해야 함

 

 

render 함수

  - 컴포넌트가 어떻게 생겼는지 정의하는 역할

  - 최상위 컴포넌트 ( app )의 렌더링 작업이 끝나면 지니고 있는 정보들을 사용하여 html 마크업을 만들고,

     이를 우리가 정하는 실제 페이지의 DOM 요소 ( root ) 안에 주입 ( 태그를 넣음 ) 함

  - 컴포넌트는 데이터를 업데이트했을 때 업데이트한 값을 수정하는 것이 아니라,

    새로운 데이터를 가지고 render 함수를 또 다시 호출 함

     ( 변경된 값만 변화하는것처럼 보이지만 페이지 전체가 갈아끼워지는것임 )

     => 이때 render함수가 반환하는 결과를 곧바로 DOM에 반영하지 않고,

          이전에 render 함수가 만들었던 컴포넌트 정보와

           현재 render 함수 가 만든 컴포넌트 정보를 비교해서 차이를 알아냄.

     => 둘의 차이를 알아내 최소한의 연산으로 DOM 트리를 업데이트

 

 

Virtual DOM

DOM : 객체로 문서 구조를 표현하는 방법으로 XML 이나 HTML로 작성

(Document Object Model)

  - 리액트는 Virtual DOM 방식을 사용하여 DOM 업데이트를 추상화함으로써

     DOM 처리 횟수를 최소화하고 효율적으로 진행

 

▷ 리액트에서 데이터가 변하여 웹 브라우저에 실제 DOM 을 업데이트할 때의 3가지 절차

 

1) 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링

2) 이전 Virtual DOM에 있던 내용과 현재 내용을 비교

3) 바뀐 부분만 실제 DOM에 적용

 

 

 

Node.js

  - 리액트 애플리케이션은 웹 브라우저에서 실행되는 코드이므로 Node.js와 직접적인 연관은 없지만,

     프로젝트를 개발하는 데 필 요한 주요 도구들이 Node.js 를 사용하기 때문에 설치하는 것

  - Node.js를 설치하면 Node.js 패키지 매니저 도구인 npm이 설 치됨

 

 

 

 

---

 

기존의 jsp 가 js 로 바뀐다고 생각하면되고 이들을 컴포넌트라 한다

 

 

App.js

 

  = > 이 컴포넌트에서 return 하는 tag 를

 

 

index.js

- import React from 'react' : 리액트를 불러와서 사용할 수 있게 해줌

 - index에서 불러온 모듈을 모두 합쳐서 하나의 파일을 생성해준다 (번틀링)

 

  = > id 가 root 인 애를 찾아서 app을 렌더링해라

        App 컴포넌트를 아이디가 root 인 엘리먼트에 그린다고 생각하자

 

 

 

index.html

 

  = > 여기 div 로 들어오는거임

 

 

---

▶ 리액트 동작 원리

 

처음에는 빈 html 이 나오고 app.js 에서 리턴된 값을 채워넣는형식

 

 

 

 

 

 

▶ JSX

 - 자바스크립트인데 HTML 이랑 비슷하게 생김 (자바스크립트 확장문법)

 - 브라우저에서 실행되기 전에 코드 번들링되는 과정에서 바벨을 사 용하여 일반 자바스크립트 형태의 코드로 변환됨

 

[1] 감싸인 요소

리액트 컴포넌트에서 요소 여러 개를 하나의 요소로 감싸야 함 - 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문

 

Fragment : div 요소 대신 리액트 v16 이상부터 도입된 Fragment라는 기능을 사용해도 됨

 

 

▷ JSX는 언제 괄호 {} 로 감싸야 하나

 - JSX를 여러 줄로 작성할 때 괄호로 감싸고, 한 줄로 표현할 수 있는 JSX는 감싸지 않는다

 

▷ 꼭 닫아야 하는 태그

 - JSX에서는 태그를 닫지 않으면 오류 발생

 

 

 

 

 

 

[2] 자바스크립트 표현

  - 자바스크립트 표현식을 작성하려면 JSX내부에서 코드를 {}로 감싸 면 됨

function App() {
  const name = '홍길동';
  return (
    <>
    <div>{name} 님 안녕하세요</div>
    </>
  );
}

 

 

 

 

[3] if 문 대신 조건부 연산자

  - JSX 내부의 자바스크립트 표현식에서 if문을 사용할 수 없다

  - JSX 밖에서 if문을 사용하여 사전에 값을 할당하거나, {} 안에 조건 부 연산자(삼항 연산자)를 사용

 

function App() {
  const name = '홍길동';
  return (
    <>
    {
      name ==='홍길동'?(<div>안녕하세요{name}님</div>)
      :(<div>guest님이군요</div>)
    }
    </>
  );
}

name 이 홍길동이면 => 안녕하세요 홍길동님

                                        아니면 => guest 님이군요

 

 

 

 

[4] AND 연산자( && )를 사용한 조건부 렌더링

 

 

[5] undefined를 렌더링하지 않기

  - 리액트 컴포넌트에서는 함수에서 undefined만 반환하여 렌더링하는 상황을 만들면 안됨 (에러는 안남 )

 

 

[6] 인라인 스타일링

  - 리액트에서 DOM 요소에 스타일을 적용할 때는 문자열 형태로 넣는 것이 아니라 객체 형태로 넣어 주어야 함

 

 

 

  - style객체를 미리 선언하지 않고 바로 style 값을 지정하고 싶다면

 

 

 

 

[7] class 대신 className

 

 - App.css 작성

.react {
    background: aqua;
    color: black;
    font
    -size: 48px;
    font
    -weight: bold;
    padding: 16px;
}

 

 - App.js 수정

import './App.css';
function App()
{
    const name='리액트';
    return <div className="react">{name}</div>;
}

 

 

 

 

[8] 주석

 - vscode 단축키 : Ctrl + L

 {/* ... */}