[React] 정의 & 특징

React 정의

React는 사용자 인터페이스(UI)를 만들기 위한 자바스크립트 라이브러리이다.
리액트는 UI를 자동으로 업데이트해주고 이로인해 데이터 기반의 선언적 개발이 가능해지고 그 과정에서 Virtual DOM(가상 돔)을 통해 최적화된 업데이트를 할 수 있다. 또한 Component(컴포넌트)기반의 개발을 통해 복잡한 UI를 효과적으로 구성할 수 있고 JSX문법으로 컴포넌트를 편리하게 작성할 수 있다.

---

React 특징

• 선언적
  리액트의 프로그래밍 방식은 선언적 프로그래밍 방식이다.
  원하는 결과, 화면에 그려지는 View에만 초점을 두고 우리가 원하는 모습을 선언해서 리액트에게 전달해주면, “어떻게" 하는지에 대한 중간과정은 리액트가 알아서 처리해 주는데 이때문에 편리하고 효율적으로 개발할 수 있으며 기존의 DOM을 절차적으로 조작하는 개발 방식을 완전히 바꿔놓았다.

• Virtual DOM
  DOM 요소에 변화가 생기면 웹 브라우저는 다시 렌더 트리(DOM 트리 + CSSOM 트리), 레이아웃 위치를 계산하고(layout), 화면에 그리는 작업(paint)을 수행하는데 DOM을 조작할때마다 위와 같은 작업을 실행하면 성능이 저하되기에 리액트는 이전 UI상태를 메모리에 유지하는 가상 DOM을 통해 DOM처리 횟수를 최소화하고 효율적으로 진행한다. 절차는 view에 변화가 생길때 그 변화가 실제 DOM에 적용되기 전 가상 DOM에 적용시킨 후 최종 결과를 실제 DOM에 전달해주게 된다. 이 과정에서 브라우저 내 발생하는 연산의 양을 줄이고 성능 저하를 개선할 수 있다.

• Component
  컴포넌트(Component)란 재활용 가능한 UI 구성 단위를 의미한다. UI를 여러 조각으로 나누고 각조각을 개별적으로 사용할 수 있다.
  컴포넌트는 필요한 곳에서 재사용 할 수 있고 독립적으로 사용할 수 있기 때문에 코드의 유지보수에도 좋다. 또한 또 다른 컴포넌트를 포함할 수 있으며 해당 페이지가 어떻게 구성되어 있는지 한눈에 파악하기 좋다.

---

• 컴포넌트의 사용
  리액트는 소문자로 시작하는 요소를 HTML 태그로 인식하기 때문에 컴포넌트명은 항상 첫 글자가 대문자가 되도록 작성해야 한다. 선언한 컴포넌트는 다른 곳에서 import하여 사용할 수 있다.

예시

// src/pages/Curriculum/Curriculum.js

import GNB from '../components/GNB/GNB';
import LNB from './LNB/LNB';
import Session from './Session/Session';

const Curriculum = () => {
  return (
    <>
      <GNB />
      <div className="curriculum">
        <LNB />
        <Session />
      </div>
    </>
  );
};

export default Curriculum;

// src/pages/Curriculum/Session/Session.js

import SessionTitle from './SessionTitle/SessionTitle';
import SessionContent from './SessionContent/SessionContent';

const Session = () => {
  return (
    <>
      <SessionTitle />
      <SessionContent />
    </>
  );
};

export default Session;

---

• JSX
  JSX(JavaScript Syntax eXtension) 란 리액트에서 사용하는 자바스크립트 확장 문법이다. JSX는 HTML과 자바스크립트 로직을 하나의 자바스크립트 파일 안에서 모두 처리하기 위해 확장한것이다.

• JSX 문법

1. JSX element
   JSX 문법을 통해 자바스크립트 파일 어디에서나 필요한 곳에 HTML처럼 작성한다.

const hi = <p>Hi</p>;

2. Javascript 표현식
   JSX 내부에서 자바스크립트 값을 출력하고 싶다면, { ... JavaScript... } 와 같이 { } 안에 유효한 자바스크립트 표현식을 작성한다.

// Greetings.js
import React from 'react';

const Greetings = () => {
  const name = '김개발';

  return <h1>{name}님, Welcome to Wecode!</h1>;
};

export default Greetings;

3. JSX attribute
   태그의 속성은 camelCase로 작성해야한다. 예시로 class를 주고 싶을때 원래 속성명은 class 지만 JSX에서는 className을 사용한다.

/* HTML
<h1 class="greetings">Welcome to Wecode!</h1>

/* JSX
<h1 className="greetings">Welcome to Wecode!</h1>

4. Event 처리
   JSX에서는, 태그를 작성할 때 직접 이벤트와 이벤트 핸들러(Event Handler)를 부여한다.

• 이벤트는 앞에 on을 붙여 camelCase로 작성
• 문자열이 아닌 함수로 이벤트 핸들러를 전달

// JS
const title = document.getElementsByClassName("title")[0];
title.addEventListener("click", handleClick);

// JSX
<h1 className="title" onClick={handleClick}>
  Welcome to Wecode!
</h1>

5. Inline Styling
   중괄호를 두 번 겹쳐서 쓰는 형태로 사용한다. 바깥의 { }는 JSX 문법을 의미하며 안쪽의 { }는 자바스크립트 객체를 의미하고 사용을 지양하는것이 좋다.

// HTML
<h1 style="color:red;background-image:yellow">Welcome to Wecode!</h1>

// JSX
<h1 style={{ color: "red", backgroundImage: "yellow" }}>
  Welcome to Wecode!
</h1>

6. Self-Closing Tag
   어떤 태그라도 self closing tag로 사용할 수 있다.

7. Nested JSX
   반드시 최상위를 감싸고 있는 하나의 태그가 있어야 한다.

// Bad
const Greetings = () => {
  return (
    <h1>김개발님!</h1>
    <h2>위코드에 오신 걸 환영합니다!</h2>
  );
}

// Good
const Greetings = () => {
  return (
    <div>
      <h1>김개발님!</h1>
      <h2>위코드에 오신 걸 환영합니다!</h2>
    </div>
  );
}

8. React.Fragment
   Fragment는 추가적인 DOM element를 생성하지 않고 하나의 컴포넌트 안에 여러 요소(자식)를 간단하게 그룹화할 수 있는 기능이다. 축약형인 <> ... </> 문법으로도 동일하게 사용할 수 있다.

const Greetings = () => {
  return (
    <React.Fragment>
      <h1>김개발님!</h1>
      <h2>위코드에 오신 걸 환영합니다!</h2>
    </React.Fragment>
  );
};

const Greetings = () => {
  return (
    <>
      <h1>김개발님!</h1>
      <h2>위코드에 오신 걸 환영합니다!</h2>
    </>
  );
};