[React] 리액트의 원리와 특징

 

 

1. 리액트의 주요 특징

리액트는 자바스크립트 기반의, 오로지 UI에만 집중한 라이브러리다.

리액트는 선언형 프로그래밍을 지향한다.

선언형 프로그래밍이라는 것은 내가 이해한대로 표현하자면 '목적'을 분명히 밝힌다는 것이다.

 

명령형 vs 선언형 프로그래밍을 말할 때 'how'와 'what'의 차이라고도 하는데,

'what'을 밝힌다는 것은 지금 이 코드의 목적이 무엇인지를 분명히 한다는 것이다.

그에 비해 'how'가 중점이 되면 어떻게 목적에 도달하는지를 그 과정을 상세하게 표현한다.

 

리액트는 컴포넌트를 기반으로 하는데,

컴포넌트라는 것 자체가 하나의 기능을 하는 코드들을 묶어 놓은 것이기 때문에

컴포넌트를 제 용도에 맞게 잘 활용하면 그 기능을 어떻게 구현했는지는 컴포넌트 속에 감춰진 채

겉으로 드러난 컴포넌트의 이름으로 그 목적을 미루어 짐작하게 된다.

 

이런 점에서 리액트는 컴포넌트 기반 라이브러리고, 선언형 프로그래밍을 지향한다고 할 수 있다.

 

리액트 공식 문서의 예시. UserInfo라는 컴포넌트가 어떻게 작동하는지는 몰라도 그 목적은 분명히 알 수 있다.

 

이렇게 컴포넌트 기반으로 코드를 작성하면 코드의 재사용성이 높아진다.

함수가 하나의 기능을 하는 코드들을 묶어서 추상화하는 것처럼,

컴포넌트도 하나의 UI를 나타내는 코드들을 묶어 주기 때문에

같은 기능을 하는 UI 요소가 여러 곳에서 사용될 경우

매번 코드를 새롭게 작성하지 않고 작성된 컴포넌트를 재사용할 수 있다.

 

리액트의 또 다른 특징은 범용성이 크다는 것이다.

자바스크립트 기반 프로젝트라면 어디든 적용할 수 있으며

다른 라이브러리나 프레임워크와도 조합해서 사용할 수 있다.

 

이것은 장점이 될 수도 있지만 관점에 따라 단점으로 여겨질 수도 있는데,

리액트가 오로지 UI만 담당하는 라이브러리이기 때문에

Ajax, 데이터 모델링, 라우팅 등은 다른 라이브러리와 조합해서 구현해야 한다.

그만큼 신경쓸 것이 많다고도 볼 수 있고, 자유도가 높다고 볼 수도 있을 것이다.

 

2. Vitual DOM

리액트는 Virtual DOM을 사용한다.

Virtual DOM이라는 것은 DOM을 가벼운 복사본처럼 만든 객체로,

데이터에 변화가 생기면 새로운 Virtual DOM과 이전의 Virtual DOM을 비교해

변화가 생긴 부분을 파악하고 진짜 DOM에서 그 부분만 다시 렌더한다.

그렇기 때문에 Virtual DOM은 DOM 전체를 다시 렌더하는 방식에 비해서 효율적이고 빠르다.

 

3. JSX(JavascriptXML)

JSX는 자바스크립트를 확장한 문법으로, html을 작성하는 것과 비슷해 가독성이 높다.

JSX에서 지켜야 할 문법은 다음과 같다.

 

• 여러 요소가 있을 때는 최상위에서 하나의 요소로 묶어 줘야 한다.
• class 속성은 class가 아니라 className을 써서 지정해야 한다.
• JS를 사용할 때는 중괄호({})를 사용해야 한다.
• 사용자 정의 컴포넌트는 대문자로 시작해야 한다.
• 조건부 렌더링 시 if문을 사용할 수 없으므로 삼항연산자를 사용한다
• 여러 개의 요소를 표시할 때는 map()을 사용하고, 반드시 key 속성을 사용해야 한다.

 

조건부 렌더링에서 삼항연산자를 쓰면 좋은 이유는 더 간략하기 때문이다.

JSX 내부에서는 if문을 쓸 수 없으므로 삼항연산자를 사용하거나 JSX밖에서 if문을 사용해야 한다.

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
    </div>
  );
}

function render() {
  const isLoggedIn = this.state.isLoggedIn;
  if (isLoggedIn) {
    return <div>The user is currently logged in.</div>;
  } else {
    return <div>The user is not logged in.</div>;
  }
}

삼항연산자를 쓴 경우(위)와 if ... else 조건문을 사용한 경우(아래)를 비교해 보면

삼항연산자를 썼을 때 중복을 줄이고 간략하게 코드를 작성할 수 있다는 걸 알 수 있다.

 

---

(내가 보려고 정리한) 참고 자료

https://velog.io/@yesbb/virtual-dom의-성능이-더-좋은이유