React의 정의와 특징

이진경·2022년 12월 17일

👩‍💻 REACT

목록 보기

2/10

✅ React의 정의

리액트는 페이스북에서 개발하고 관리하는 UI를 만들기 위한 js 라이브러리이다. 리액트를 사용하는 가장 큰 이유 중 하나는 UI를 자동으로 업데이트 해준다는 점이다. 이로 인해 선언적개발이 가능해지고 자동으로 UI를 업데이트하는 과정에서 Virtual DOM(가상돔)을 통해 최적화된 업데이트를 할 수 있다. 마지막으로 Component 기반의 개발을 통해 효과적으로 UI를 구성할 수 있고 JSX 문법으로 Component를 편리하게 작성할 수 있다.

✅ React의 특징

✍️ 선언적 프로그래밍

개발 방식에는 명령형 프로그래밍과 선언형 프로그래밍이 있다.

💡 명령형 프로그래밍은 어떤일을 어떻게 할 것인가에 관한 것이고,
💡 선언형 프로그래밍은 무엇을 할 것인가에 관한 것이다.

👉 Red Lobster
퇴근 후 엄마와 함께 ‘Red Lobster’ 식당에 밥을 먹으러 갔다. 당신은 Red Lobster에 도착했고 프론트 데스크에서 다음과 같이 말했다.

명령형 접근 (how) : 저기 Gone Fishin 이라고 적힌 표지판 아래에 있는 테이블이 비었네요 우리는 저기로 걸어가서 저 테이블에 앉도록 하겠습니다.
선언형 접근 (what) : 2명 자리주세요

명령형 방식은 내가 실제로 자기에 어떻게 앉을지에 관심이 있기때문에 어떻게 테이블을 잡아서 자리에 앉을지에 관해 필요한 단계들은 하나씩 나열해야 한다.
반면 선언형 방식은 오로지 내가 무엇을 원하는지에 관심이 있다.

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

💡 우리가 원하는 결과를 선언해서 리액트에 전달해주면 어떻게 하는지에 대한 중간과정은 리액트가 알아서 처리해준다.

이처럼 선언적인 방식으로 개발하게 된다면 개발 과정에서도 최종 결과물의 모습만 고려하면 되기때문에 훨씬 편히라고 효율적으로 개발할 수 있다.

✍️ Virtual DOM

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

👉 화면의 업데이트 과정
Dom 요소에 변화가 생기면 웹브라우저는 다시 렌더트리 (DOM트리 + CSSOM트리)를 그리고 / 레이아웃 위치를 계산하고 / 화면에 그리는 작업을 수행한다.

현대의 복잡하고 규모가 큰 웹 애플리케이션에서는 상호작용이 많은 만큼 DOM 조작이 많이 발생하는데, 이때마다 위와 같은 작업을 수행하게 되면 성능이 저하되고, 전체적인 프로세스를 비효율적으로 만든다.

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

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

✍️ Component

:: 컴포넌트란 ?

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

:: 컴포넌트의 특징

필요한 곳에 재사용할 수 있다.
독립적으로 사용할 수 있기 때문에 코드의 유지보수에 좋다.
또 다른 컴포넌트를 포함할 수 있다.
해당 페이지가 어떻게 구성되어 있는지 한눈에 파악하기 좋다.

:: 컴포넌트의 사용

리액트는 소문자로 시작하는 요소를 HTML 태그로 인식하기 때문에 컴포넌트 명은 항상 첫 글자가 대문자가 되도록 작성해야 한다.

✍️ JSX

:: JSX란?

리액트에서 사용하는 js 확장 문법이다. js에 xml를 추가한 확장 문법이으로 리액트에서만 사용되며 공식적인 자바스크립트 문법은 아니다.
브라우저에서 실행하기 전에 Bable을 사용하여 일반 js형태의 코드로 변환된다.

const element = (
  <h1 className = "greeting">
      Hello, world!
  </h1>
  );

const element = React.createElement(
  'h1',
  {classNAme : 'greeting'},
  'Hello, world!'
 );

JSX로 작성한 코드(위)와 Bable로 변환된 JSX코드(아래)

::JSX의 특징

JSX 문법을 통해 js파일 어디에서나 필요한 곳에 html처럼 작성할 수 있다. 그리고 아래 코드처럼 변수에 저장할 수 도잇고, 함수의 인자로 넘길 수도 있다.

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

JSX 내부에서 js값을 출력하고 싶다면, {...js표현식...}와 같이 {}안에 유효한 js표현식을 작성할 수 있다.
태그의 속성명은 camelCase로 작성해야 한다.
태그를 작성할 때 직접 이벤트와 이벤트 핸들러를 부여할 수 있다.

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

어떤 태그라도 self closing tag로 사용할 수 있다. <img>와 같이 하나의 태그가 요소인 경우, 기존 html은 /로 끝내지 않아도 되지만 JSX에서는 항상 /로 끝내줘야 한다.
Nested JSX : 반드시 최상위를 감싸고 있는 하나의 태그가 있어야 한다.
React.Fragment :최상위를 감싸고 있는 태그에 특별한 의미나 스타일이 없을때 DOM element를 생성하지 않고 하나의 컴포넌트 안에 여러 자식을 간단하게 그룹화 할 수 있는 기능이다. 축약형인 <>...</>문법으로도 동일하게 사용할 수 있다.