리액트 기초

Yeom Gyu Hyeon·2024년 5월 29일
0
post-custom-banner

리액트(React)란?

리액트는 Facebook에서 개발한 오픈 소스 JavaScript 라이브러리로, 사용자 인터페이스(UI)를 구축하는 데 사용됩니다. 특히 단일 페이지 애플리케이션(Single Page Application, SPA)과 모바일 애플리케이션에서 효율적이고 유연한 사용자 인터페이스를 만들기 위해 많이 사용됩니다.

사용자의 View에만 초점을 둔 Facebook이 개발한 라이브러리
기존 프론트엔드 에서 많이 사용되고 있는 프레임워크인 Angular, Aangular JS, Vue 같은 것들은 MVC, NVVM등의 디자인 패턴을 가지고 있고, 자체적으로 ajax, 클라이언트 Routing 모듈을 내장한 패키지 입니다. 하지만 리액트는 이러한 것들이 없고 오직 사용자에게 view를 어떻게 하면 더 효율적으로 보여줄 수 있을지에서 시작한 라이브러리 입니다. 리액트에서 Client routing과 ajax를 사용하기 위해서는 따로 라이브러리를 받아서 실행해야 합니다. (물론 다들 공통적으로 사용하는 라이브러리들이 있습니다.) 그렇기 때문에 리액트는 오직 DOM 객체의 생성과 이벤트 응답에만 관심이 쏠려 있습니다.

더 자세히 말해보자면, 브라우저단 view에서 보여주어야 할 model의 데이터가 변화하는 경우에, 리액트는 변화를 일으키지 않고 model이 변경되어서 바꿔여야 할 View 부분을 새로운 View로 대체 합니다. model이 변화하게 되면 변경을 하는 것이 아닌, 그 부분을 날려버리고 새로 생성된 것으로 다시 그리게 되는 것이죠. 그런데 이 DOM을 날려버리고 다시 그린다는 것은 매우 위험한 발상입니다. 브라우저는 우리가 생각하는 것보다 빠르지는 않기 때문입니다. (매번 다시 DOM을 그리게 된다면 우리는 클릭 한번 할 때마다 1초씩 기다려야 할 지도 모릅니다.) 물론 리액트는 효율적으로 변경되어야 할 부분만 다시 바꿔줍니다. (리액트는 이 점을 Virtual DOM을 이용해 해결 하였습니다.)

리액트의 주요 특징

컴포넌트 기반 아키텍처

컴포넌트(Component)는 리액트의 기본 빌딩 블록입니다. 각각의 컴포넌트는 독립적이며 재사용 가능하며, UI의 일부분을 담당합니다. 컴포넌트는 다른 컴포넌트와 결합하여 복잡한 UI를 구성할 수 있습니다.

컴포넌트는 함수형 컴포넌트와 클래스형 컴포넌트로 나눌 수 있습니다.

  • 함수형 컴포넌트: 간단한 문법으로 작성되며, 주로 useState와 useEffect 같은 훅을 사용하여 상태와 생명주기 메서드를 처리합니다.
  • 클래스형 컴포넌트: ES6 클래스 문법을 사용하여 작성되며, 상태 관리와 생명주기 메서드를 갖습니다. 하지만 최신 리액트에서는 함수형 컴포넌트 사용이 권장됩니다.
// 함수형 컴포넌트 예시
function Greeting(props) {
  return <h1>Hello, {props.name}</h1>;
}

// 클래스형 컴포넌트 예시
class Greeting extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

JSX (JavaScript XML)

자바스크립트와 HTML을 섞어서 쓸 수 있는 자바스크립트의 확장된 문법
HTML의 문법을 그대로 사용할 수는 없다

JSX는 JavaScript 코드 내에서 XML과 유사한 구문을 사용할 수 있게 해줍니다. 이를 통해 HTML 구조를 직관적으로 작성할 수 있습니다. 브라우저에서 실행되기 전에 Babel과 같은 트랜스파일러가 JSX를 일반 JavaScript로 변환합니다.

const element = <h1>Hello, world!</h1>;

가상 DOM (Virtual DOM)

리액트는 실제 DOM 대신 가상 DOM을 사용하여 UI를 업데이트합니다. 가상 DOM은 메모리에 유지되는 경량의 복사본입니다. 상태가 변경되면, 리액트는 가상 DOM에서 변화된 부분을 찾아 실제 DOM에 최소한의 업데이트만 수행합니다. 이를 통해 성능을 최적화할 수 있습니다.

단방향 데이터 흐름

데이터는 부모 컴포넌트에서 자식 컴포넌트로 전달됩니다. 이를 통해 데이터의 흐름을 예측 가능하게 하고 디버깅을 용이하게 합니다. 컴포넌트는 props를 통해 부모로부터 데이터를 받아 상태를 관리합니다.

리액트 상태(State)와 속성(Props)

  • 상태(State): 컴포넌트 내부에서 관리되는 데이터입니다. 이 데이터는 컴포넌트의 동적인 부분을 관리하고, UI의 변화나 상호작용에 따라 변경됩니다. 상태는 컴포넌트 내에서 useState 훅이나 클래스 컴포넌트의 setState 메서드를 통해 정의되고 업데이트됩니다.
import React, { useState } from 'react';

function Counter() {
  // 상태(state)를 정의합니다. 초기값은 0입니다.
  const [count, setCount] = useState(0);

  // 버튼 클릭 시 상태를 업데이트하는 함수
  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      {/* 클릭 이벤트가 발생하면 increment 함수가 호출되어 상태를 업데이트합니다. */}
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;

위의 코드는 간단한 카운터 컴포넌트입니다. useState 훅을 사용하여 count라는 상태를 정의하고, 버튼을 클릭할 때마다 increment 함수를 호출하여 count 상태를 증가시킵니다

  • 속성(Props): 컴포넌트에 외부에서 전달되는 데이터입니다. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용됩니다. 속성은 읽기 전용이며, 해당 컴포넌트 내에서 변경할 수 없습니다. 속성은 컴포넌트의 설정값이나 사용자로부터의 입력값을 전달하는 데 사용됩니다.
import React from 'react';

// 속성을 받아 이름을 표시하는 함수형 컴포넌트
function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

// 부모 컴포넌트에서 Greeting 컴포넌트를 사용할 때 name 속성을 전달합니다.
function App() {
  return <Greeting name="John" />;
}

export default App;

위의 코드에서 Greeting 컴포넌트는 props를 받아 이름을 표시하는 간단한 함수형 컴포넌트입니다. App 컴포넌트에서 Greeting 컴포넌트를 사용할 때 name 속성을 전달하여 이름을 출력합니다.

간단한 예를 들면, 상태는 컴포넌트 내부의 카운터 값과 같은 데이터를 관리하고, 속성은 부모 컴포넌트로부터 받은 이름과 같은 정보를 표시하는 데 사용됩니다. 상태는 컴포넌트 내부에서만 사용되고 변경될 수 있으며, 속성은 외부에서 전달되어 읽기만 가능하고 변경할 수 없습니다.

리액트의 사용 예시

다음은 간단한 리액트 컴포넌트 예시입니다:

import React, { useState } from 'react';

// 함수형 컴포넌트 정의
function Counter() {
  // useState 훅을 사용하여 상태 관리
  const [count, setCount] = useState(0);

  // 버튼 클릭 시 상태 업데이트
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default Counter;

이 예제는 클릭할 때마다 카운트가 증가하는 간단한 카운터 컴포넌트를 보여줍니다. useState 훅을 사용하여 상태를 관리하며, 버튼 클릭 시 상태를 업데이트합니다.

리액트의 장점

  • 재사용성: 컴포넌트 기반 구조로 인해 코드의 재사용성이 높아집니다.
  • 성능 최적화: 가상 DOM을 통해 최소한의 업데이트만 수행하여 성능을 최적화합니다.
  • 유지보수 용이성: 코드가 모듈화되어 있어 유지보수가 용이합니다.
  • 커뮤니티와 생태계: 풍부한 커뮤니티와 다양한 라이브러리, 도구들이 있어 개발에 도움이 됩니다.

리액트를 사용하는 이유

리액트는 다양한 이유로 인기를 끌고 있으며, 많은 대규모 프로젝트에서 채택되고 있습니다. 다음과 같은 이유들이 리액트를 선택하는 주요 요인입니다:

  • 빠른 렌더링: 가상 DOM과 효율적인 렌더링 방식으로 빠른 사용자 경험을 제공합니다.
  • 명확한 구조: 컴포넌트 기반 아키텍처로 코드 구조가 명확하고 유지보수가 쉽습니다.
  • 풍부한 생태계: 다양한 서드파티 라이브러리와 도구들로 개발 생산성을 높일 수 있습니다.
  • 광범위한 커뮤니티 지원: 큰 커뮤니티와 풍부한 학습 자료들이 있어 쉽게 학습하고 문제를 해결할 수 있습니다.

리액트는 이러한 특징들 덕분에 현대 웹 개발에서 널리 사용되며, 특히 복잡한 사용자 인터페이스를 구축하는 데 매우 효과적입니다.

리액트와 다른 프론트엔드 프레임워크의 차이점

리액트(React)는 다른 프론트엔드 프레임워크와 몇 가지 중요한 측면에서 차별화됩니다. 여기서는 주로 Angular와 Vue.js와의 비교를 통해 리액트의 독특한 점을 설명하겠습니다.

리액트 vs 앵귤러(Angular)

  1. 아키텍처:

    • 리액트: 리액트는 UI 구축을 위한 라이브러리입니다. 단일 책임 원칙을 따르며, 상태 관리나 라우팅 같은 추가 기능은 외부 라이브러리를 사용하여 구현합니다.
    • 앵귤러: 앵귤러는 완전한 프레임워크로, 상태 관리, 라우팅, HTTP 클라이언트 등 필요한 모든 기능을 내장하고 있습니다.

  2. 언어:

    • 리액트: 주로 JavaScript (ES6+)와 JSX를 사용합니다.
    • 앵귤러: TypeScript를 기본 언어로 사용합니다.

  3. DOM 처리:

    • 리액트: 가상 DOM(Virtual DOM)을 사용하여 효율적으로 UI를 업데이트합니다.
    • 앵귤러: 실제 DOM(Real DOM)을 사용하며, 변경 감지(Dirty Checking) 메커니즘을 통해 UI를 업데이트합니다.

  4. 데이터 바인딩:

    • 리액트: 단방향 데이터 바인딩(One-way Data Binding)을 사용합니다.
    • 앵귤러: 양방향 데이터 바인딩(Two-way Data Binding)을 지원합니다.

  5. 커뮤니티와 생태계:

    • 리액트: 커뮤니티 주도형 생태계로, 수많은 서드파티 라이브러리가 존재합니다.
    • 앵귤러: 구글에서 주도적으로 개발하며, 공식 라이브러리와 도구들이 잘 갖추어져 있습니다.

리액트 vs 뷰(Vue.js)

  1. 아키텍처:

    • 리액트: UI 구축에 집중된 라이브러리로, 상태 관리나 라우팅 등의 기능은 추가 라이브러리를 사용합니다.
    • 뷰: 핵심 라이브러리는 UI 레이어에 집중되어 있지만, 공식적으로 제공되는 라우터와 상태 관리 라이브러리가 있습니다.

  2. 언어:

    • 리액트: JavaScript (ES6+)와 JSX를 사용합니다.
    • 뷰: JavaScript와 템플릿 구문을 사용합니다. JSX도 지원하지만 주로 사용하지 않습니다.

  3. DOM 처리:

    • 리액트: 가상 DOM을 사용합니다.
    • 뷰: 가상 DOM을 사용합니다.

  4. 데이터 바인딩:

    • 리액트: 단방향 데이터 바인딩을 사용합니다.
    • 뷰: 양방향 데이터 바인딩을 지원합니다.

  5. 학습 곡선:

    • 리액트: JSX와 관련된 개념을 이해하는 데 시간이 걸릴 수 있습니다.
    • 뷰: 템플릿 기반 문법이 HTML과 유사하여 학습 곡선이 완만합니다.

  6. 커뮤니티와 생태계:

    • 리액트: 커뮤니티 주도형 생태계로, 수많은 서드파티 라이브러리가 존재합니다.
    • 뷰: 에반 유(Evan You)와 핵심 팀이 주도하지만, 활발한 커뮤니티가 있습니다.

결론

  • 리액트는 컴포넌트 기반 구조와 가상 DOM을 사용하여 빠른 UI 업데이트와 높은 유연성을 제공합니다. 라이브러리 중심이기 때문에 필요한 기능을 선택하여 사용할 수 있습니다.
  • 앵귤러는 완전한 프레임워크로, 대규모 애플리케이션 개발에 필요한 모든 도구와 기능을 제공합니다. TypeScript를 사용하여 정적 타입 검사를 지원합니다.
  • 뷰는 직관적인 템플릿 문법과 가상 DOM을 사용하여 학습이 쉽고, 작은 프로젝트에서 큰 프로젝트까지 유연하게 사용할 수 있습니다.

각 프레임워크와 라이브러리는 고유한 장단점이 있으며, 프로젝트의 요구사항과 팀의 기술 스택에 따라 선택할 수 있습니다.

https://ljh86029926.gitbook.io/coding-apple-react/1/what-is-react
https://velog.io/@gracelee5/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EA%B8%B0%EC%B4%88

profile
Yeom Gyu Hyeon
개발일지
이전 포스트

2024.04.04

post-custom-banner

0개의 댓글