프론트엔드 웹 개발 / 리액트

최종 수정 : 2024-06-01

프론트엔드 개발

웹 브라우저를 대상으로 사용자에게 보여지는 부분을 자바스크립트 언어로 작성하는 것을 의미한다.

---

리액트 (React)

2013년에 페이스북에서 발표한 오픈소스 자바스크립트 라이브러리이다. 가상 DOM(document object model)과 JSX(JavaScript XML)라는 새로운 방식으로 동작한다. 오직 뷰(View)만 신경쓰며, 사용자 인터페이스를 만드는 데 사용된다.

어떤 데이터가 변할 때마다 어떤 변화를 줄지 고민하는 것이 아니라
그냥 기존 뷰만 날려 버리고 처음부터 새로 렌더링 하는 방식

이렇게 하면 애플리케이션 구조가 매우 간단하고, 작성해야 할 코드양도 줄어든다. 그저 뷰가 어떻게 생길지 선언하며, 데이터에 변화가 있으면 기존에 있던 것은 버리고 정해진 규칙에 따라 새로 렌더링하는 것이다. 이것이 바로 최대한 성능을 아끼고 평안한 사용자 경험(UX, user experience)을 제공하면서 구현하기 위해 개발한 것이 바로 '리액트(React)'이다.

 

# 싱글 페이지 애플리케이션(SPA, Single Page Application)

웹 서버는 웹 브라우저가 요청하는 다양한 유형의 자원(resource)을 제공하는 역할을 한다. 웹 서버가 제공하는 자원을 얻으려면 URL 문자열을 HTTP 프로토콜을 사용하여 웹 서버에 요청해야 한다. 이를 HTTP 요청이라 하고, 요청한 결과를 브라우저에 보내주는 것을 HTTP 응답이라 한다. 그리고 HTTP 응답 데이터를 사용자가 볼 수 있도록 웹 페이지 화면에 보여 주는 것을 렌더링(Rendering)이라고 한다.

 

리액트로 만든 웹 애플리케이션은 index.html 파일 1개로 동작한다. 즉, 리액트는 백엔드에서 받은 JSON 데이터를 해석하여 현재 화면에서 사용자가 새로 요청한 부분만 동적으로 화면을 생성한다. 이런 방식의 웹 애플리케이션을 싱글 페이지 애플리케이션(SPA)라고 한다. 이와 달리, 사용자 요청이 있을 때마다 완전히 새로운 HTML을 전달받는 기존 방식을 멀티 페이지 애플리케이션(multi page application, MPA)이라고 한다.

 

# 클라이언트에서 동작하는 템플릿 엔진

웹 서버는 대부분 HTML 템플릿 엔진을 제공한다. 템플릿 엔진은 HTML 문서를 DB 등에서 추출한 데이터와 결합하여 쉽게 만들어 준다. 프론트엔드는 백엔드에서 제공하는 JSON데이터를 해석하여 자바스크립트 객체들의조합을 얻은 다음, 이 객체들을 다시 웹 브라우저가 이해할 수 있는 DOM 객체로 변환해 줘야 한다.

 

# JSX

https://young-taek.tistory.com/74

JSX 문법

 

# 오직 뷰(view)만 담당한다.

정말 뷰만 신경 쓰는 라이브러리이므로 기타 기능은 직접 구형해야 한다. 다른 라이브러리를 사용하여 빈 자리를 채우면 된다. 이 지점에서 여러 라이브러리를 접해야 한다는 단점이 대된다.

 

# 컴포넌트(component)

특정 부분이 어떻게 생길지 정하는 선언체이다. 템플릿과는 다른 개념이며, 재사용이 가능한 API로 수많은 기능들을 내장하고 있다. 컴포넌트 내부에 또 다른 컴포넌트가 존재할 수 있다.

 

# 렌더링(rendering)

사용자 화면에 뷰(View)를 보여주는 것이다. render() { ... }를 통해 컴포넌트가 어떻게 생겼는지 정의된다. html 형식의 문자열을 반환하지 않고, 뷰가 어떻게 생겼고 어떻게 동작하는지에 대한 정보를 지닌 객체를 반환한다. 컴포넌트 내부에 또 다른 컴포넌트들이 존재할 경우, 내부에 있는 컴포넌트들도 재귀적으로 렌더링한다.

 

최상위 컴포넌트의 렌더링 작업이 끝나면 지니고 있는 정보들을 사용하여 1) HTML 마크업(markup)을 만들고, 2) 이를 실제 페이지의 DOM 요소 안에 주입한다.

 

리액트에서 뷰를 업데이트할 때는 "조화 과정(reconciliation)을 거친다" 라고 하는 것이 더 정확한 표현이다. 새로운 요소를 갈아 끼우기 때문이다. 이 작업 또한 render 함수가 도맡아서 한다. 컴포넌트는 데이터를 업데이트했을 때 단순히 업데이트한 값을 수정하는 것이 아니라, 새로운 데이터를 가지고 render 함수를 또 다시 호출한다. 이때 render 함수가 반환하는 결과를 곧바로 DOM에 반영하지 않는다. 이전 render 함수가 만들었던 컴포넌트 정보와 현재 render 함수가 만든 컴포넌트 정보를 비교한다.

 

두 가지 뷰를 최소한의 연산으로 비교한 후, 둘의 차이를 알아내 최소한의 연산으로 DOM 트리를 업데이트 한다. 이를 더 구체적으로 이해하려면 Virtual DOM을 알아야 한다.

 

# 가상 DOM

https://young-taek.tistory.com/229

DOM / Virtual DOM / 파이버(Fiber)

---

mock data

애플리케이션을 개발하다 보면 실제 데이터가 필요할 때가 있다. 그런데 실제 데이터를 얻기 어려울 떄 그럴듯한 가짜 데이터를 임시로 사용할 수 있다.

 

# chance, luxon 패키지

두 패키지는 자바스크립트로 구현되어 있으므로, 타입스크립트에서 사용하려면 @types/chance, @types/luxon 타입 라이브러리가 추가로 필요하다.

• chance 패키지 : 다양한 종류의 그럴듯한 가짜 데이터를 제공한다.
• luxon 패키지 : '2024/6/1'과 같은 날짜를 '40분 전' 형태로 만들어 주는 유용한 기능을 제공한다.

---

참고 자료

리액트 모던 웹 개발 with 타입스크립트 (p.12-13, 42-43)

리액트를 다루는 기술