안녕하세요. UXPin 총판 단군소프트입니다.

React 라이브러리, 다들 들어 보셨나요~

React는 온라인 커뮤니티에서 가장 빠르게 성장하고 있는 개발자 커뮤니티 중 하나로 UXPin과 함께 사용하면 더 효과적으로 개발을 할 수 있는 라이브러리입니다. 실제로 많은 개발자들이 UXPin의 Merge기능과 React의 컴포넌트를 이용해 DesignOps의 다양한 문제를 쉽게 해결하고 있습니다.

React에는 수많은 훌륭한 기능이 있지만 그중 개발자들에게 가장 사랑받는 기능은 단연 디자인 패턴입니다. (‘디자인 시스템’과는 다른 단어입니다! 혼동하지 말아 주세요! ) 과연 어떤 기능이기에 많은 개발자들에게 사랑받는지 궁금하지 않나요?

그래서 준비했습니다!

React의 디자인 패턴에 대해 궁금해할 분들을 위해 앞으로 총 두 포스팅에 걸쳐 “꼭 알아야 할 React의 디자인 패턴”을 소개할 예정입니다. 오늘은 그 첫 시간으로 React 라이브러리와 디자인 패턴에 대한 간단한 소개를 준비했으니, 즐겁게 읽어주시길 바랍니다!

JSX(JavaScript eXtension) 문법

위의 태그 문법이 무엇일까요? HTML이라고 생각하실 분도 계시겠지만, 아닙니다! 이 재미있는 태그 문법은 바로 React에서 사용하는 JSX(JavaScript eXtension) 문법입니다. JSX는 자바스크립트를 기반으로 하고 있으며 자바스크립트 코드를 HTML처럼 표현할 수 있는 문법입니다.

즉, 자바스크립트 안에서 HTML 문법을 사용해 쉽게 view를 구성할 수 있어 React 개발에 많은 도움을 주고 있습니다.

Virtual DOM(Document Object Model, 문서 객체 모델)

React는 서버와 데이터 통신과는 별개로 DOM 객체를 직접 조작해야 하는 기존의 웹 화면 개발 방식과 달리, Virtual DOM이라는 실용적인 수준의 추상적 개념을 사용하고 있습니다.

Virtual DOM 이란 UI의 이상적인 또는 “가상”적인 표현을 메모리에 저장하고 React DOM과 같은 라이브러리에 의해 “실제”DOM과 동기화하는 프로그래밍 개념을 뜻합니다. 이 개념을 데이터가 자주 변경되는 웹 앱에 적용하면 성능을 크게 향상시킬 수 있습니다.

Component

마지막 특징은 바로 Component입니다. React는 재사용 가능한 컴포넌트 기반 라이브러리로 HTML 코드를 여러 부분으로 분할해 저장할 수 있습니다. 그렇기 때문에 코드의 일부를 수정해야 할 때 그 부분만 수정이 가능합니다. 오류가 발생했을 때 전체의 코드를 수정하지 않아도 되기 때문에 업무의 효율을 높이고 유지 보수성을 높이는 데 도움이 됩니다.

React의 힘은 위와 같은 놀라운 기능과 그것이 제공하는 강력한 아키텍처 때문입니다. 이 외에도 React의 디자인 패턴은 라이브러리에 탁월한 실용성과 유용성을 제공해줍니다. 이 뛰어난 디자인 패턴에 대한 소개는 다음 세션에서 이어 진행하겠습니다.

‘디자인 패턴’​은 간단히 말해 소프트웨어 개발에서 일반적으로 발생하는 문제들에 대한 해결 방법을 정리한 패턴을 뜻합니다. “바퀴를 다시 발명하지 마라”라는 말이 있듯이 이미 만들어진 해결 방법을 다시 만드는 건 시간 낭비입니다.

그렇기 때문에 디자인 패턴이 탄생한 것이며 이를 사용하면 개발 프로세스의 속도와 효율을 높일 뿐만 아니라 코드를 읽기 쉽게 하고 유지할 수 있습니다. 그 밖에 디자인 패턴이 할 수 있는 일이 무엇인지 알아볼까요?

개발자들에게 표준 플랫폼 제공

위에서 알려드린 것처럼 디자인 패턴은 알려진 문제에 대한 표준 용어와 솔루션을 제공합니다. 그렇기 때문에 개발자들에게 표준 개발 플랫폼을 제공할 수 있습니다. 디자인 패턴 중 하나인 Singleton 패턴을 예를 들어 보겠습니다.

Singleton 패턴은 전역 변수를 사용하지 않고 객체를 하나만 생성하도록 하며, 생성된 객체를 어디서든 참조할 수 있도록 하는 패턴을 뜻합니다. 이 패턴을 사용하면 구현한 개발자가 다른 개발자에게 별도의 설명 없이 특정 프로그램이 Singleton 패턴을 따르고 있다고 쉽게 알려줄 수 있습니다.

모범사례(Best Practice) 보장

디자인 패턴은 광범위한 연구와 테스트의 결과로서 만들어졌습니다. 그렇기 때문에 디자인 패턴을 사용하면 개발자는 쉽게 개발 환경에 쉽게 익숙해질 수 있고 시행착오를 거치지 않고 모범사례를 만들 수 있습니다.

이제 디자인 패턴에 대해 이해하셨나요? 디자인 패턴을 효과적으로 재사용하는 방법을 배워 보시려면 ‘뛰어난 아티스트들이 재사용하는 방법’에 대한 기사를 확인해보세요.

여기까지 디자인 패턴에 대한 소개였습니다.

다음 시간에는 이어서 React에서 사용 가능한 디자인 패턴 중 가장 널리 사용되는 몇 가지를 소개할 예정이니, 많은 기대와 관심 부탁드립니다!

다음 시간에 만나요~:)

이 글은 The Best React Design Patterns You Should Know About를 번역한 글입니다.