[React] 리액트란? 리액트를 왜 사용할까

 

 

지금까지 리액트를 이용하여 프로젝트 진행 경험이 여러번 있었다

 

다만, 나한태 왜 리액트를 이용해? 라고 물어본다면 2가지 정도의 답변을 할 것 같다

 

1. 가장 많이 사용하니까,,?
2. 이걸로 밥벌어 먹고 살아야하니까! -> 많은 기업에서 요구하는 스펙이다

 

솔직히 마음에 들지 않는 답변이다

따라서, 리액트란 무엇이고, 이걸 왜 사용하며, 특징 및 장점이 무엇인지 이번 글을 통해 다시 복기하려한다

 

 

 

 

먼저 리액트란 무엇인가?

 

 

리액트란 간단하게 자바스크립트 라이브러리 라고 간단하게 설명할 수 있다.

기본 html, css, js를 이용해서도 웹페이지를 개발할 수 있지만, 동적인 웹페이지를 보다 효율적으로 유지 보수하고 관리하기 위해 사용한다

 

리액트 외에도 vue, angular와 같은 자바스크립트 프레임워크가 있지만 이 중 가장 생태계가 크고 커뮤니티가 많다고 볼 수 있다.

 

리액트는 spa의 UI를 생성하는데에 집중한 라이브러리이기 때문에 다른 프레임워크보다 부족한 부분도 있다

-> 예로 페이지 전환을 할 때, react-router과 같은 라이브러리를 이용해야 한다

 

 

 

 

그럼 리액트의 장점은 무엇인가?

 

 

 

다른 프레임워크는 독자적인 문법이 있는 경우가 있지만, 리액트는 자바스크립트 문법을 그대로 사용한다. 오픈소스 프로젝트이면서 페이스북의 지속적인 관리가 있으며, 생태계 또한 크기 때문에 사용하기 용이하다

 

 

 

 

리액트의 특징

 

 

1. 가상 돔의 사용으로 업데이트 최적화(virtual dom)
2. 컴포넌트 기반
3. Data flow
4. jsx
5. 선언형

 

로 크게 나눌 수 있을 것 같다

 

 

특징에 대해 좀 자세히 알아볼 필요가 있는 것 같다

 

 

 

 

 

---

 

Virtual DOM(가상 돔)

 

 

리액트 사용자의 수가 많은 건 간단하게 말해서 빠르기 때문이다

이는 리액트는 virtual dom을 사용하여 효율적으로 우리가 원하는 페이지를 빠르게 그려주기 때문이다

 

 

virtual dom을 간단히 말하자면

 

 

dom을 추상화한 객체 (dom을 복제하는 것 이라고 이해하는게 편할듯 하다)

즉, 변경 사항을 dom에 직접 수정하는게 아니라 중간 단계로 Virtual dom을 수정하고 Virtual dom 통해서 dom을 수정하는 원리이다

 

 

 

그렇다면 dom은 무엇일까?

 

간략하게 알아보자면

 

document object model(dom)은 브라우저가 화면을 그리기 위해서 사용하는 방식이고 html 파일 내용을 
토대로 만들어지며 js와 같은 스크립팅 언어로 수정할 수 있도록 만들어진 웹 페이지의 객체지향표현이다

dom tree안에는 각각의 element에 상응하는 node가 들어있고 개발자들은 dom이 제공하는 api를 통해 
dom구조에 접근을 하고, 원하는 element를 조작한다

즉, dom은 웹 페이지를 구성하는 요소를 구조화해서 나타낸 객체고 이 객체를 이용해서 웹 페이지 구성요소를 제어할 수 있다

 

 

결론적으로, dom은 웹페이지를 객체와 노드들로 구성한 방식이고 이를 통해 각 element를 조작할 수 있는다는 것

그런데 왜 virtual dom 을 만든 것 일까?

 

그것은 브라우저 랜더링 방식에 때문이다

 

dom을 변경하면 브라우저 랜더링이 일어나는데, 현대의 프로그램의 조작이 자주 일어나다 보니 dom을 반복적으로 조작하게 되고, 그 만큼 브라우저가 랜더링을 자주하여 pc의 자원을 많이 사용하게 된다

 

 

그래서 나온 개념이 virtual dom 이다

 

virtual dom은 dom과 다르게 직접적으로 브라우저를 조작할수 있는 api는 없다.

-> diffing을 통해 dom을 조작하게 된다

 

 

1. 리액트에서는 state가 변경될 때마다 re-rendering이 일어나게 되는데 이때마다 새로운 가상돔을 생성하여 기존의 가상돔과 비교하여 어떤 요소가 바뀌었는지 체크한다 -> diffing
2. 바뀐 요소를만 실제 dom에 적용한다 -> 재조정

 

예로

<ul>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
<ul>

 

이런 구조에서 리스트를 전부 바꾸는 과정에서

 

dom -> li 태그를 하나씩 바꾸게 된다 -> 여러번 랜더링

virtual dom -> virtual dom에서 리스트를 변경하고 집단화한 뒤 실제 dom과 비교하여 변경된 부분을 교체한다 -> 1번 랜더링

 

을 통해 보다 빠르고 효율적으로 dom을 변경할 수 있게 되는 것이다~

 

 

 

 

 

 

컴포넌트 기반

 

리액트는 UI를 여러 컴포넌트로 쪼개서 만든다

한 페이지 내에서도 여러 부분을 독립된 컴포넌트로 만들고  이러한 컴포넌트들을 조립해 화면을 구성한다

 

컴포넌트 단위로 쪼개져 있기 때문에 

 

1. 전체 코드를 파악하기 비교적 쉽고
2. 재사용성이 높아진다

 

 

 

 

 

Data flow

 

결론부터 리액트는 단방향 데이터 바인딩을 한다!

그럼 데이터바인딩은 무엇이고, 단방향은 무엇일까?

 

 

데이터바인딩이란?

 

 

화면상에 보여지는 데이터와 메모리에 있는 데이터를 동기화하는 것

예로, html에서 서버에서 받아온 데이터를 화면상에 보여주고 있을 때, 값이 변경이 될 경우 html 상에서도 변경된 값에 맞추어 주는 동작

 

 

이 데이터바인딩에는 양방향데이터 바인딩이 있고, 단방향 데이터 바인딩이 있는데

 

 

 

단방향데이터 바인딩이란 (리액트가 이에 해당)

 

• js에서 html로의 흐름, 즉, 한 방향으로만 데이터를 동기화 하는 것을 의미한다
• 단방향이기 때문에 html에서 js로 직접적 데이터 갱신을 불가능하다 -> 이벤트 함수를 호출하여 데이터를 변경해야한다
• 부모컴포넌트 -> 자식컴포넌트로만 데이터가 전달되는 구조이다

 

 

 

양방향데이터 바인딩이란

 

• html과 js 둘 중 하나만 변경되어도 함께 변경되는 것을 의미
• 부모 컴포넌트 -> 자식컴포넌트는 props를 통해 데이터를 전달
• 자식 컴포넌트 -> 부모컴포넌트는 emit event를 통해 데이터를 전달
• 대표적으로 angular와 vue에서 사용

 

	단방향 데이터 바인딩	양방향 데이터 바인딩
장점	성능 저하 없이 갱신 가능하며, 데이터 추적이 쉬움	코드량을 줄여줌
단점	화면을 업데이트 하는 코드를 매번 작성해야됨	dom에서 객체 전체를 랜더링해 성능이 저하될 수 있음

 

 

 

 

 

 

JSX

 

 

jsx(javascript xml) javascript에 xml을 확장한 문법이다. xml 과 비슷한 형식이고, jsx 형식으로 작성된 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 javascript 형태로 변환된다

 

 

번들링 -> 사용자가 더 쉽게 애플리케이션에 접근할 수 있게 용량최소화 등을 하여 전달
즉, 사용자에게 웹 애플리케이션을 배포하는 과정

번들: 사용자에게 웹 애플리케이션을 제공하기 위한 파일 묶음


바벨 -> es6에서 es5로 변환하는 도구
바벨을 사용하면 jsx를 브라우저가 읽기 쉬운 es5로 변환해주고 이를 바탕으로 최신문법을 사용하며
여러 브라우저에 작동되는 코드를 짤 수 있다

 

 

jsx는 공식적인 javascript 문법은 아니나 매우 편안하게 UI를 랜더링 할 수 있게 된다

 

 

 

 

 

선언형

 

 

• 과정을 중요시한 명령형이 아닌 결과물에 집중하고 복잡한 과정은 추상화 하여 신경쓰지 않는 것
• 명령형의 경우 다음에 어떤 일이 발생할지 한줄씩 읽으면서 추측해야하지만 선언형은 코드만 보고 예측이 가능
• 즉, 선언형이 더 가독성이 좋으며 예측이 쉽다

 

 

const App = () => {
  <Nav />
  <Menu />
  <Detail />
}

 

 

위와 같은 코드에서 nav, menu, detail이 무엇인지 들어가봐야 알겠지만, 어떤순서와 대충 무엇인지 예측이 가능하며 랜더링 되는 과정 따위는 신경쓰지 않는다...!