React.js란?

리액트란 무엇인가?

리액트는 자바스크립트의 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다. 페이스북과 개별 개발자 및 기업들 공동체에 의해 유지보수된다.

리액트는 싱글 페이지 어플리케이션이나 모바일 어플리케이션의 개발 시 토대로 사용 될 수 있다. 

 

리액트의 특징

리액트를 공부하면서 익혔던 특징은 다음과 같다.

1. React는 선언형이다.
2. React는 컴포넌트 기반으로 재사용성이 뛰어나다.
3. React는 Virtual DOM 기반으로 가볍다.
4. React 컴포넌트는 state와 props를 가진다.

 

1. 선언형이란?

리액트는 선언형 성격에 맞게 컴포넌트를 jsx문법을 통해 구현한다.(jsx를 사용하지 않을 수도 있지만 대부분의 개발자들은 사용하고 있다) 해당 컴포넌트의 변경사항을 체크하는 알고리즘, 리-렌더링 여부는 구현하지 않는다. 이와 같은 선언형 특성은 리액트를 사용할 때 화면 설계에 초점을 맞추게 하고 다른 부분에 대한 고민을 최소화 하여 높은 생산성을 보장해준다.

 

2. 컴포넌트와 재사용성

지금까지 개발하고 있는 웹페이지의 경우 HTML, CSS, javascript를 따로 관리하고 있다. 한 화면에서 전체 디자인이 정의되어 있는 CSS와 라이브러리들을 불러와야 했다.

리액트는 컴포넌트라는 개념을 통해 작성한 HTML, CSS를 간략하게 <Component/>와 같은 식으로 쓸 수 있고 하나의 컴포넌트에 디자인과 이벤트 코드들을 같이 작성할 수 있다.

 

컴포넌트는 독립적인 단위의 소프트웨어 모듈을 말한다. 즉 소프트웨어를 독립적인 하나의 부품으로 만드는 방법이다. 리액트는 웹에서 쓰는 각 요소들을 컴포넌트로 만들 수 있게 해 기존의 UI를 다른 화면에서 다시 쓰거나, 다른 프로젝트에서 다시 쓸 수 있도록 하는 장점(높은 재사용성)을 가진다.

 

3. Virtual DOM(가상 돔)

가상돔을 이해하기 위해서 In-memory의 개념에 대해 알아두면 좋다. 웹 브라우저와 자바스크립트를 동작시키기 위한 V8엔진도 소프트웨어입니다. 즉, 이들이 실행되면 메모리(RAM)가 할당이 된다.

가상돔은 이 메모리 단에서 컴포넌트에 대한 정보를 생성하고 비교하여 전체 DOM 트리가 업데이트가 필요한 경우 이를 반영하는 방식을 말한다.

 

가상돔은 메모리 단에서 컴포넌트에 대한 정보를 생성하고 비교하여 전체 DOM트리가 업데이트가 필요한 경우 이를 반영하는 방식을 말한다. 실제 DOM트리에서 변화를 줄 때마다 반영된다면 DOM트리가 변경되어 렌더링 과정(HTML 파싱, 렌더 트리 구축, 렌더 트리 배치, 렌더 트리 그리기 등의 과정)이 매번 일어나기 때문에 메모리가 낭비된다. 하지만 리액트는 가상DOM을 사용함으로써 변경한 부분과 가상DOM을 비교해 변화가 일어난 부분만 렌더링을 하기 때문에 낭비되는 메모리를 줄일 수 있다.

 

4. State와 Props

리액트는 내부적으로 State와 Props를 가진다. 이는, UI(User Interface)가 사용자의 동작(Actions)에 따라 다른 UI나 Action이 필요하기 때문이다.

리액트를 잘 다루기 위해서는 이런 State에 대한 이해가 필요하다. 어떤 컴포넌트를 만들 때, 내부 컴포넌트에 어떤 State가 있을지, 페이지 전체에 어떤 State가 있는지 파악하고 개발을 진행하는 것이 좋다. State를 이해해야 보다 중복되지 않고 효과적인 컴포넌트를 구성할 수 있기 때문이다.

리액트로 UI 개발을 한다면, State와 Props를 어떻게 구성할 것인지를 먼저 파악하고 개발을 하도록 하자.

 

[React] 리액트를 처음부터 배워보자. —01. React.js란 무엇인가?