왜 React인가?

date

Aug 7, 2024

slug

why-react

author

status

Public

왜 리액트인가?

프론트엔드 개발자 포지션을 살펴보면 대부분 리액트에 대한 개발 경험을 요구하고 있습니다. 이를 통해 리액트가 프론트엔드 개발자에게 필수적인 기술로 인식되고 있음을 알 수 있습니다. 저도 여러 언어들을 고려해봤지만 결국 React를 사용하게 되었는데, 왜 많은 사람들이 React를 선호하는 것일까요? React를 공부하기 전에 왜 React를 사용하는지 알아보도록 하겠습니다.

명시적 상태 변경

리액트는 단방향 데이터 바인딩을 지원합니다. 이는 데이터의 흐름이 한쪽 방향으로만 간다는 것을 의미합니다. 반면 Angular는 양방향 데이터 바인딩을 지원합니다. 양방향 바인딩은 편리하지만, 코드의 규모가 커질수록 상태 변화를 추적하기 어려워집니다. 리액트의 단방향 바인딩은 상태 변화를 명시적으로 처리하게 해주어, 상태가 변화했을 때 이를 유발한 함수를 쉽게 찾을 수 있습니다. 이러한 명시적 상태 업데이트는 간단하고 유연한 코드를 작성할 수 있게 해줍니다.

양방향 바인딩이 항상 나쁜 것은 아닙니다. 단방향 바인딩은 매번 변화를 감지하고 업데이트하는 코드를 작성해야 하므로 코드 양이 늘어날 수 있습니다. 하지만 단방향 바인딩은 데이터 흐름이 단순해져 코드를 읽기 쉽고, 버그 발생 가능성을 낮출 수 있다는 장점이 있습니다.

JSX(JavaScript XML)

Angular는 뷰를 표현하기 위해 문자열 템플릿과 디렉티브라는 전용 문법을 사용합니다. 반면 리액트는 HTML에 JS 문법을 더한 JSX를 사용합니다. JSX는 몇 가지 특징만 이해하면 쉽게 작성할 수 있어, HTML과 JS를 알고 있는 개발자라면 손쉽게 컴포넌트와 페이지를 만들 수 있습니다.

비교적 배우기 쉽고 간결함

리액트는 위 두 가지 특징 덕분에 비교적 배우기 쉽고 간결한 코드 작성을 가능하게 합니다. HTML과 JS에 대한 기본 지식이 있다면 쉽게 컴포넌트를 만들고 페이지를 구성할 수 있습니다. 그러나 리액트를 완벽히 이해하고 성능을 최적화하는 것은 상대적으로 어려운 편입니다.

Virtual DOM

웹 브라우저는 텍스트 문서를 읽어 DOM 구조를 바꾸어 사용자에게 보여줍니다. 사용자 반응에 따라 전체 화면을 새로 그리는 것은 성능에 좋지 않습니다. 리액트는 Virtual DOM을 사용하여 불필요한 화면 갱신을 최소화함으로써 성능을 향상시킵니다. Virtual DOM은 실제 DOM의 변경 사항을 효율적으로 관리하여 최적의 성능을 유지할 수 있게 해줍니다.

리액트를 사용하면 명시적 상태 변경, JSX, 배우기 쉬운 문법, Virtual DOM 등을 통해 프론트엔드 개발을 더욱 효율적이고 즐겁게 할 수 있습니다. 이러한 이유로 많은 개발자들이 리액트를 선호하며, 리액트가 프론트엔드 개발의 필수 기술로 자리잡고 있습니다.