React..?

리액트 공부를 시작하기에 앞서...

나는 리액트에 대해 왜 공부해야 할까? 라는 막연한 궁금증이 생겼다.

1. 인기가 있으니까

2. 많은 회사에서 사용하니까

3. 프론트엔드 개발자라면 쓸 줄 알아야 하니까

...

여러가지 이유들이 생각났다.

 

하지만,

나에게 있어서 진짜 이유는.. 그냥?

이었다.

 

리액트를 하다보면 그냥 재미있다.

거창한 이유는 아직까지 찾지 못했지만,

어쩌면 단순한 이유가 나를 여기까지 오게 만든게 아닐까 싶다 :)

 

---

1. React란?

 

React란, Facebook(현 meta)에서 2013년에 만든 기술이다.

이 친구는 UI 라이브러리로, 사용자 인터페이스를 구축하기 위한 Js 라이브러리 이다.

보통 우리가 잘 알고 있는 MVC모델에서 V (view) 부분을 담당하며,

컴포넌트 기반의 개발 방식으로 UI를 구현할 수 있다.

 

2. React의 특징

 

2-1. Virtual DOM

리액트는 Virtual DOM(가상돔)을 사용하여 UI를 렌더링 한다.

이를 통해 필요한 부분만 업데이트하여 DOM 조작을 최소화 하고 성능을 향상시킨다.

Virtual DOM 이란?

가상 DOM은 실제로 브라우저에 그려지는 DOM의 가벼운 복제본이라고 볼 수 있다.

가상 DOM은 리액트의 핵심 개념 중 하나로, 리액트에서 데이터가 변경될 때마다 실제 DOM을 조작하지 않고,

먼저 가상 DOM에서 변경된 내용을 비교하고

최소한의 변경만 실제 DOM에 적용함으로써 빠른 렌더링을 실현할 수 있도록 도와준다.

 

이를 통해 리액트는 브라우저에서 DOM을 직접 조작하지 않고,

가상 DOM을 조작하면서 DOM 조작에 필요한 비용을 최소화할 수 있다.

따라서 빠른 렌더링 성능을 제공하면서도, 개발자는 가독성 높은 코드를 작성할 수 있다.

 

2-2. 컴포넌트

리액트는 Component 기반의 아키텍쳐를 가지고 있다.

이 Component들은 독립적으로 작동하며

필요한 경우 조합하여 더 큰 컴포넌트를 만들 수 있다.

 

2-3. JSX

JSX는 JS를 확장한 문법으로 리액트에서 UI를 작성하는 데 사용된다.

JSX를 사용하면 JS내부에 HTML을 작성할 수 있으며,

이를 통해 코드 가독성을 높이고 유지보수를 쉽게 할 수 있다.

 

import React from 'react';

const SayHello = ({ name }) => {
  return <div>Hello, {name}!</div>;
}

const App = () => {
  return (
    <div>
      <Greeting name="Alice" />
      <Greeting name="Bob" />
      <Greeting name="Charlie" />
    </div>
  );
}

export default App;

 

2-4. 단방향 데이터

리액트는 단방향 데이터 흐름을 따른다.

데이터가 사위 컴포넌트에서 하위 컴포넌트로만 전달되기 때문에

데이터 관리가 용이하며, 디버깅이 쉽다.

 

2-5. state와 props

리액트는 state와 props를 통해 컴포넌트 간 데이터를 전달하고 관리한다.

state(상태)는 컴포넌트 내에서 변경 가능한 데이터를 관리하며,

props(속성)은 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터를 관리한다.

 

2-6. Lifecycle 메서드

리액트 컴포넌트는 생명주기 메서드를 가지고 있다.

이를 이용하여 컴포넌트가 생성되고(Mount) => 업데이트되고(Update) => 파괴되는(Unmount) 과정에서

필요한 작업을 수행할 수 있다.

 

리액트 생명주기를 보여주는 가장 유명한 이미지

 

2-7. 높은 확장성과 유연성

리액트는 컴포넌트 기반 아키텍처를 채택하고,

상태와 속성을 통해 데이터를 관리하기 때문에 높은 확장성과 유연성을 제공한다.

이를 통해 대규모 어플리케이션 개발에도 적합하다.