React (Intro)

경용·2022년 8월 1일
JSXReact가상돔선언적컴포넌트
0

React

목록 보기
1/1

React 등장배경

현재의 웹 애플리케이션은 과거에 비해 동적이고 다양한 UI를 가지며 카테고리 hover 이벤트, 좋아요 및 장바구니 기능 등 유저와의 상호작용이 많아지고 다루어야 할 데이터와 코드가 증가하게 되었다.

이처럼 웹 애플리케이션의 규모가 커지고 다양한 UI, UX를 구현하기 위해서는 이전의 방법(DOM에 직접 접근해서 조작)으로는 웹 애플리케이션을 개발하고 유지보수하는 것이 어려워졌다.
이를 보완해서 생산성을 향상시키고, 많은 양의 데이터 관리와 코드 유지 보수를 더욱 편리하게 하기 위해 다양한 프론트엔드 프레임워크와 라이브러리가 등장했다.

Framework? Library?

프레임워크와 라이브러리는 복잡한 개발을 효율적으로, 편리하게 하기 위해 다른 개발자들이 만들어 둔 코드이다. 둘의 차이점은, 프레임워크는 다른 사람이 만들어둔 코드의 정해진 프레임 속에서만 수동적으로 작업해야 하지만 라이브러리는 개발자가 작업을 진행할 때 필요한 기능을 능동적으로 가져와서 사용할 수 있다는 점이다. 다시 말하면, 프레임워크는 전체적인 흐름을 이미 자체적으로 가지고 있어 개발자가 그 흐름에 맞게 코드를 작성해야 하고 라이브러리는 개발자가 흐름을 가지고 원하는 라이브러리를 가져다 사용할 수 있다.

이러한 프레임워크와 라이브러리 중 프론트엔드에서 가장 많이 쓰이는 세 가지는 Angular(앵귤러), Vue(뷰), React(리액트)이다. 앵귤러와 뷰는 프레임워크이며, 리액트는 라이브러리지만 프레임워크적인 특징을 일부 가지고 있다.

그렇다면 왜 앵귤러나 뷰같은 프레임워크가 아니라, 라이브러리인 리액트를 사용할까?

리액트는 자기만의 문법을 가진 앵귤러나 뷰와는 다르게 대부분 자바스크립트의 문법을 그대로 활용한다. 따라서 이미 자바스크립트에 친숙하다면 리액트를 잘 활용할 수 있고,
페이스북의 지속적인 관리와 함께 생태계가 활성화 되어있어서, 사용자가 많고 커뮤니티가 발달해 있기 때문에 개발의 생산성을 향상시킬 수 있다.
뿐만 아니라 리액트 기반의 React Native라는 기술을 통해 웹 뿐만 아니라 iOS, 안드로이드 기반의 모바일 애플리케이션도 개발할 수 있다.

React 특징

리액트의 특징으로는 크게 선언적, 가상돔, 컴포넌트, JSX 등의 특징이 있다.

선언적

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

절차적 프로그래밍 : 문제를 어떻게 해결할 것인가에 중점을 두는 방식
선언적 프로그래밍 : 무엇을 해결할 것인가에 중점을 두는 방식

프론트엔드 개발에서 바닐라 자바스크립트은 절차적 프로그래밍 방식이고, 리액트는 프로그래밍 방식이 선언적 프로그래밍 방식이다.

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

Virtual DOM (가상돔)

DOM 요소에 변화가 생기면 웹 브라우저는 다시 렌더트리(DOM트리 + CSSOM트리)를 그리고, 레이아웃 위치를 계산하고, 화면에 그리는 작업을 수행한다.
그런데 현대의 복잡하고 규모가 큰 웹 애플리케이션에서는 상호작용이 많은 만큼 DOM 조작이 많이 발생하는데, 이때 DOM을 조작할 때마다 위와 같은 작업을 수행하게 되면 성능이 저하되고, 전체적인 프로세스를 비효율적으로 만든다.

이런 문제를 해결하기 위해서, 리액트는 이전 UI 상태를 메모리에 유지하는 가상 DOM 을 통해 변경될 UI의 최소 집합을 계산하여 DOM 처리 횟수를 최소화하고 진행한다.

view에 변화가 있다면 그 변화가 실제 DOM에 적용되기 전에 가상 DOM에 먼저 적용시키고, 그 최종적인 결과를 실제 DOM으로 전달해 줌으로써 웹 브라우저 내에서 발생하는 연산의 양을 줄이고 성능 저하를 개선한다.

Component

컴포넌트(Component)란 재활용 가능한 UI 구성 단위를 의미한다. UI를 여러 조각으로 나누고, 각 조각을 개별적으로 사용할 수 있다.

특징

  • 필요한 곳에서 재사용할 수 있다. 함수도 기능이 독립적이고 한번 선언해두면 필요할 때마다 호출하면서 재사용할 수 있듯이, 컴포넌트도 함수처럼 필요한 곳에 가져와서 사용할 수 있다.
  • 독립적으로 사용할 수 있기 때문에 코드의 유지보수에 좋다.
  • 또 다른 컴포넌트를 포함할 수 있다.
  • 해당 페이지가 어떻게 구성되어 있는지 한눈에 파악하기 좋다.

JSX

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

문법

  • JSX element : JSX 문법을 통해 자바스크립트 파일 어디에서나 필요한 곳에 HTML처럼 작성할 수 있다. 아래 예시처럼 변수에 저장할 수도 있고, 함수의 인자로 넘길 수도 있다.
const hi = <p>Hi</p>;
  • Javascript 표현식 : JSX 내부에서 자바스크립트 값을 출력하고 싶다면, { ... JavaScript... } 와 같이 { } 안에 유효한 자바스크립트 표현식을 작성할 수 있습니다.
import React from 'react';

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

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

export default Greetings;

  • JSX attribute : 태그의 attribute name은 camelCase로 작성해야 한다. attribute를 추가하고 싶을 때는 실제 HTML에서 쓰는 attribute name(속성명)과 다를 수 있다.

  • Event 처리하기 : 태그를 작성할 때 직접 이벤트와 이벤트 핸들러(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>
  • Inline Styling : camelCase를 요소로 가지는 자바스크립트 객체를 받는다. 그렇기 때문에 중괄호를 두 번 겹쳐서 쓰는 형태로 사용한다. 
<h1 style={{ color: "red", backgroundImage: "yellow" }}>
  Welcome to Wecode!
</h1>
  • Self-Closing Tag : 어떤 태그라도 self closing tag로 사용할 수 있다.
  • Nested JSX : 반드시 최상위를 감싸고 있는 하나의 태그가 있어야 한다.
const Greetings = () => {
  return (
    <div>
      <h1>yong2님!</h1>
      <h2>위코드에 오신 걸 환영합니다!</h2>
    </div>
  );
}
  • React.Fragment : 최상위를 감싸고 있는 태그에 특별한 의미나 스타일이 없다면 불필요한 요소를 생성하게 된다. 이럴때 사용되는 것이 <React.Fragment>이다. Fragment는 추가적인 DOM element를 생성하지 않고 하나의 컴포넌트 안에 여러 요소(자식)를 간단하게 그룹화할 수 있다.
    축약형인 <> ... </> 문법으로도 동일하게 사용할 수 있다.
const Greetings = () => {
  return (
    <>
      <h1>yong2님!</h1>
      <h2>위코드에 오신 걸 환영합니다!</h2>
    </>
  );
};
profile
경용
문제를 객관적으로. 그 후 true / false

0개의 댓글