React/ReactJS의 매력

ReactJS or React; IMAGE from https://react.dev

React의 사용이 시작된 지는 한참 전부터이다.

나도 개인적으로 React의 사용은 많지 않았지만,

회사에서 쓰고 있는 앱 중에 만져야 하는 부분이 있기 때문에

나의 선택과 상관없이 지속적으로 지원해줘야 했다.

 

새로운 부분을 만들 때도 예전 개발자가 만든 것을 고치거나 새로운 것을 붙일 때도.

사실 익숙한 언어가 아닐 땐 코드를 바꾸기엔 여간 꺼려지는 건 어쩔 수 없는 거 같다.

 

이번에 내 의사와 상관없이 무직으로 변신 후, 여러 회사를 찾아보던 중

React/ReactJS나 NodeJS 또는 Typescript를 원하는 직종이 많이 보였다.

그래서 나름 React에 대해 공부를 하면서

왜 React이 무엇인지 또 그것의 매력이 무엇이 있는지 찾아보았다.

 

React는 무엇인가

React는 Facebook에서 개발한 자바스크립트 라이브러리로, 웹 애플리케이션의 사용자 인터페이스(UI)를 개발하는 데 사용된다. 다른 프레임워크와는 달리 View에만 집중하며, Model과 Controller는 개발자가 선택한 다른 라이브러리나 프레임워크를 사용하여 구현할 수 있다.

 

가장 큰 특징은 Virtual DOM과 컴포넌트 기반 구조이다. Virtual DOM은 실제 DOM과는 별도로 메모리 상에서 가상의 DOM을 구성하여 변경된 부분만을 실제 DOM에 반영함으로써 성능을 향상하며, 또한 컴포넌트 기반 구조는 애플리케이션을 작은 단위인 컴포넌트로 나누어서 개발할 수 있어서 유지보수가 쉽고 코드의 재사용성을 높일 수 있다.

 

React는 JSX라는 문법을 사용하여 컴포넌트를 작성하며, JSX는 HTML과 유사한 구문을 사용하기 때문에 코드 가독성이 높아지고 작성하기 쉬워진다. 또한 생태계가 매우 활성화되어 있어서 다양한 라이브러리와 플러그인을 사용하여 개발을 보다 쉽고 빠르게 할 수 있다.

 

또한, 다양한 애플리케이션을 개발할 수 있는데, 예를 들어 단일 페이지 애플리케이션(SPA), 모바일 애플리케이션, 데스크톱 애플리케이션 등을 개발할 수 있고, 또한 서버사이드 렌더링을 지원하여 유니버설 앱 개발에도 유용하게 사용할 수 있다.

 

React는 자바스크립트 생태계에서 가장 인기 있는 프런트엔드 라이브러리 중 하나이며, 많은 기업에서 이를 사용하고 있고 대규모 애플리케이션 개발에도 적합하다.

React의 매력

1. 컴포넌트 기반 구조 React는 컴포넌트 기반 구조로 이루어져 있으며 이는 애플리케이션을 여러 개의 독립적인 컴포넌트로 나눌 수 있어서 개발 및 유지보수가 편리하다.
2. Virtual DOM React는 Virtual DOM을 사용하여 성능을 향상하며 이는 변경된 부분만 렌더링 하여 DOM 조작이 최소화되어 빠른 화면 갱신이 가능하다.
3. JSX 문법 React는 JSX 문법을 사용한다. 이는 HTML과 유사한 문법을 사용하여 컴포넌트를 작성할 수 있어서 코드 가독성이 높아지고 작성하기 쉬워진다.
4. 생태계 React는 많은 개발자들이 사용하고 있기 때문에 생태계가 활성화되어 있으며, 다양한 라이브러리와 플러그인을 사용할 수 있어서 개발 효율성을 높일 수 있다.
5. 유니버설 앱 개발 React는 서버사이드 렌더링을 지원하여 유니버설 앱을 개발하는 데 유리하다. 이는 검색 엔진 최적화(SEO)를 위한 HTML 마크업이 생성되므로 애플리케이션의 검색 가능성이 높아진다.

이러한 ReactJS의 매력은 개발자들이 웹 애플리케이션을 더 빠르고 효율적으로 개발할 수 있도록 도와준다.

React의 Lifecycle

React 컴포넌트의 생명주기(lifecycle)는 컴포넌트가 생성되고 소멸될 때까지의 과정을 의미하는데, 다음과 같은 생명주기 메서드를 제공하여 컴포넌트의 상태 변화에 따른 작업을 처리할 수 있다.

Mounting(생성)

• constructor(): 컴포넌트의 생성자 메서드로, 초기 상태를 설정한다.
• static getDerivedStateFromProps(): props로부터 상태를 도출하는 메서드이다.
• render(): UI를 렌더링 한다.
• componentDidMount(): 컴포넌트가 화면에 마운트 된 후 호출되는 메서드입니다. 초기 데이터 로드 등의 작업을 처리한다.

Updating(업데이트)

• static getDerivedStateFromProps(): props로부터 상태를 도출하는 메서드이다.
• shouldComponentUpdate(): 컴포넌트가 업데이트되어야 할지 결정하는 메서드이며, 성능 최적화를 위해 사용된다.
• render(): UI를 렌더링 한다.
• getSnapshotBeforeUpdate(): 업데이트 이전에 DOM 상태를 캡처하여 처리하는 메서드이다.
• componentDidUpdate(): 컴포넌트가 업데이트된 후 호출되는 메서드이며, 데이터 로드, 네트워크 요청 등의 작업을 처리한다.

Unmounting(소멸)

• componentWillUnmount(): 컴포넌트가 제거되기 전에 호출되는 메서드이며, 이벤트 해제, 타이머 해제 등의 작업을 처리한다.

Error Handling(에러 처리)

• componentDidCatch(): 자식 컴포넌트에서 발생한 에러를 처리하는 메서드이다.

React의 생명주기를 이해하면, 컴포넌트의 상태 변화에 따른 작업을 효율적으로 처리할 수 있다.