[React] React의 정의와 특징

dev.galim·2022년 12월 21일

React

목록 보기

2/10

React의 정의

리액트 → 페이스북에서 개발, 관리하는 사용자 인터페이스(UI)를 만들기 위한 자바스크립트 라이브러리.

리액트의 UI 자동 업데이트로 인해 데이터 기반의 선언적 개발이 가능해지고, 자동으로 UI를 업데이트하는 과정에서 가상 돔(Virtual DOM)을 통해 최적화된 업데이트를 할 수 있다.
컴포넌트(Component) 기반의 개발을 통해 복잡한 UI를 효과적으로 구성할 수 있으며 JSX 문법으로 컴포넌트를 편리하게 작성할 수 있다.

React의 특징

선언적

개발 방식엔 크게 절차적인 개발과 선언적인 개발이 있다.

절차적 → 이 방향으로 직진해서 두 번째 블록에서 우회전해주시고, 이후 첫 번째 신호등에서 좌회전해주세요. 전방에 다리를 건널 때까지 직진해주시고, 소방서가 있는 블록에서 우회전 후 300m 앞에서 내려주세요.

선언적 → OOO으로 가주세요.

절차적 방식은 목적지보다 목적지에 어떻게 도달하는지에 초점이 맞춰져있고, 선언적 방식은 도달할 목적지에 초점이 맞춰져 있다.

절차적(명령적) 프로그래밍 → 문제를 어떻게 해결할 것인가에 중점을 두는 방식.
선언적 프로그래밍 → 무엇을 해결할 것인가에 중점을 두는 방식.
- 내가 원하는 결과(화면에 그려지는 View)에 초점을 두고 내가 원하는 모습을 선언해서 리액트에게 전달해주면, 어떻게 하는지에 대한 중간과정은 리액트가 알아서 처리해준다. 이처럼 선언적인 방식으로 개발하게 되면 개발 과정에서도 최종 결과물의 모습만 고려하면 되기에 훨씬 편리하고 효율적으로 개발할 수 있다.

💡 프론트엔드 개발에서
바닐라 자바스크립트의 프로그래밍 방식 = 절차적 프로그래밍 방식.
리액트의 프로그래밍 방식 = 선언적 프로그래밍 방식.

Virtual DOM

→ React가 내부적으로 DOM을 조작하는 과정에서 브라우저 내에 발생하는 연산의 양을 줄이는 방식을 통해 성능을 개선하는 방법.

리액트에서 UI를 업데이트하고자 할 때, 어떻게 하는지에 대한 중간과정을 처리하기 위해 DOM 요소에 변화를 주기 전, 내부적으로 가상 DOM을 이용해서 실제 DOM에 일어나야 하는 변화를 계산한다.

실제 브라우저의 DOM을 조작하면
1. DOM을 계산
2. CSS를 계산
3. 화면상에 DOM이 그려질 위치를 계산(Layout)
4. 브라우저에 실제 픽셀을 그림(Paint)
  
  이 과정을 DOM을 조작할때마다 수행하기 때문에 DOM조작이 많아지면 브라우저가 처리해야 할 연산량이 늘어난다.
현대 애플리케이션은 UI를 업데이트하기 위해 빈번하게 DOM을 조작하기 때문에 이러한 과정이 늘어나면 성능에 악영향을 줄 수 있다. 그래서 React는 이 문제를 해결하기 위해 DOM의 미니어처인 Vitual DOM을 통해 DOM 조작을 계산한 뒤, 한번에 DOM을 조작한다.
Virtual DOM을 이용하면 연산의 빈도수를 줄일 수 있기 때문에 효율적으로 동작할 수 있고, Layout, Paint 과정을 거치지 않기 때문에 상대적으로 조작에 부담이 덜하다.

DOM(Document Object Model) → 웹 페이지를 이루는 태그들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델.

DOM은 HTML과 JS를 이어주는 역할을 한다.

컴포넌트

→ 독립적이고 재사용 가능한 UI 단위.

컴포넌트 === 레고블럭 레고블럭을 조립해서 큰 성을 만들듯이, 작은 UI를 조합하여 큰 UI를 구성할 수 있다.
컴포넌트 단위로 개발했을 때 장점
1. 독립적이고 재사용할 수 있다. ⇒ 유지보수에 용이함.
2. 다른 컴포넌트를 포함할 수 있다.
  
  ⇒ 컴포넌트간 계층(부모-자식) 관계 형성 가능.
  
  ⇒ 컴포넌트를 조합하여 큰 컴포넌트를 만들 수 있음.
3. UI가 어떻게 구성되었는지 파악하기 용이함.
  
  ⇒ 가독성 향상.
  
  ⇒ 유지보수에 용이함.
React에선 클래스 컴포넌트와 함수 컴포넌트로 컴포넌트를 선언할 수 있다.

클래스 컴포넌트

→ 자바스크립트 Class 문법을 이용해서 컴포넌트를 선언하는 방법.

state, lifeCycle 등 여러 기능을 사용할 수 있어 초기에 많이 사용되었다.
Class의 문법과 동작이 다소 복잡하다는 단점을 갖고있다.

함수 컴포넌트

→ 자바스크립트 함수 문법을 이용해서 컴포넌트를 선언하는 방법.

초기엔 state, lifeCycle 등의 기능을 사용하지 못했으나 Hook이 등장하면서 이 기능들을 사용할 수 있게 되었다.
Class에 비해 직관적이고 사용하기 쉽다는 장점이 있다.
현재 React 생태계에선 함수 컴포넌트를 많이 사용한다.

JSX

→ 리액트에서 사용하는 자바스크립트 확장 문법.

HTML + 자바스크립트의 형태. 리액트에선 HTML에서 마크업하고 자바스크립트에서 로직을 작성하는 방법이 불편하다 생각했고 마크업과 로직은 서로 연결되어 있다고 생각함 ⇒ JSX라는 문법이 탄생하게 됨.
자바스크립트 문법이 아니기 때문에 브라우저에서 해석할 수 없다. JSX로 작성한 코드는 Babel(컴파일러)을 통해 React.createElement() 함수로 변환된다.

JSX의 특징

JSX는 자바스크립트의 값이다.

값 → 특정 변수에 이 값을 담을수도 있고 함수의 인자로 전달하거나 리턴값으로도 사용할 수 있다.
JSX는 자바스크립트의 값을 포함할 수 있다.
```
function App() {
	const name = "김개발";
	return <h1>hello {name}</h1>;
}
```
- 변수뿐만 아니라 함수도 들어갈 수 있다.
- if문, for문등의 구문들은 값이 아니기 때문에 JSX 안에서 사용할 수 없다. 값인지 아닌지 판단하는 방법 → 변수에 담을 수 있는지 생각해보기.
JSX안에서 태그의 속성을 정의할 수 있다.
- JSX는 HTML보다 자바스크립트에 더 가까운 문법이기 때문에 자바스크립트에 맞춰 camelCase로 작성해줘야 한다.(class → className)

JSX안에서 이벤트리스너를 등록할 수 있다.

on + 이벤트명

function App() {
	const name = "김개발";
	const introduce = () => alert("hello world");
	return <h1 className={name} onClick={introduce}>hello {name}</h1>;
}

inline style
- style 속성은 HTML에서 문자열로 받는것과 달리 camelCase를 요소로 가지는 자바스크립트 객체를 받는다. 그렇기 때문에 중괄호를 두번 겹쳐쓰는 형태로 사용한다.
```
// HTML
<h1 style="color:red;background-image:yellow">Welcome to Wecode!</h1>

// JSX
<h1 style={{ color: "red", backgroundImage: "yellow" }}>
  Welcome to Wecode!
</h1>
```
  바깥의 {} → JSX 문법을 의미. 안쪽의 {} → 자바스크립트 객체를 의미.
- inline styling은 css보다 성능이 낮고 우선순위가 높기 때문에, 동적으로 계산하여 스타일링하는 경우 이외엔 사용을 지양하는 것이 좋다.
Self-Closing Tag

→ 어떤 태그든 Self-Closing Tag로 사용할 수 있다.

<img>처럼 하나의 태그가 요소인 경우, 기존 HTML은 /로 끝내지 않아도 되지만 JSX에선 <img />처럼 항상 /으로 끝내줘야 한다.
Nested JSX

→ 반드시 최상위를 감싸고 있는 하나의 태그가 있어야 한다.
```
// Bad
const Greetings = () => {
  return (
    <h1>김개발님!</h1>
    <h2>위코드에 오신 걸 환영합니다!</h2>
  );
}

// Good
const Greetings = () => {
  return (
    <div>
      <h1>김개발님!</h1>
      <h2>위코드에 오신 걸 환영합니다!</h2>
    </div>
  );
}
```
Bad의 경우, <h1><h2>를 감싸고 있는 태그가 없기 때문에 에러가 발생한다.
- JSX를 하나의 태그로 감싸야 하는 이유 → 리액트의 가상돔에선 컴포넌트의 변화를 효율적으로 비교할 수 있도록 한 컴포넌트는 하나의 DOM 트리구조로 이루어져야 한다는 규칙이 있기 때문이다.
React.Fragment <> ... </>

→ 앞서 JSX에선 반드시 최상위를 하나의 태그로 감싸야 한다고 했는데, 최상위를 감싸고 있는 태그에 특별한 의미나 스타일이 없을 경우 <React.Fragment> 를 사용하면 된다.

Fragment는 추가적인 DOM element를 생성하지 않고 하나의 컴포넌트 안에 여러 요소(자식)를 간단하게 그룹화 할 수 있는 기능이다.
```
// Before
const Greetings = () => {
  return (
    <React.Fragment>
      <h1>김개발님!</h1>
      <h2>위코드에 오신 걸 환영합니다!</h2>
    </React.Fragment>
  );

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