React의 대표적인 특징

React는 페이스북(Meta)에서 개발한 자바스크립트의 UI라이브러리 이다.

 

페이스북은 매우 복잡한 UI를 가진 어플리케이션을 개발하고 있었다. 기존의 jQuery와 같은 라이브러리는 이러한 어플리케이션에서 코드의 복잡성과 유지보수성 문제가 발생했다. 이에 대한 대안으로 페이스북은 React를 개발하게 되었다.

 

React이전에는 jQuery, AngularJS 등의 라이브러리와 프레임워크가 있었다. 하지만 이들은 코드의 복잡성과 유지보수성 문제가 있었고 렌더링 속도와 성능에도 한계가 있었다.

 

React의 등장 이후, 컴포넌트 기반 아키텍쳐와 가상 DOM을 사용한 렌더링 방식은 많은 개발자들로부터 좋은 반응을 얻었다. 이를 통해 코드의 재사용성과 유지보수성이 높아졌으며, 렌더링 성능도 향상되었다.

 

그렇다면 대표적인 리액트의 특징은 무엇이 있을까?

1. 컴포넌트기반 아키텍쳐 : 리액트는 컴포넌트 기반 아키텍쳐를 사용하여 UI를 작은 단위의 컴포넌트로 분해한다. 이를 통해 코드의 재사용성과 유지보수성을 높인다.

2. 가상 DOM 사용 : 리액트는 가상 DOM을 사용하여, 렌더링 성능을 향상시킨다. 가상 DOM은 실제 DOM과 동일한 구조를 가지고 있으며, 변경된 부분만 실제 DOM에 적용하여, 렌더링 성능을 최적화하는 것이 가능하다.

3. JSX : 리액트는 JSX라는 자체 문법을 사용한다. 이 문법은 JS코드와 HTML 코드를 통합하여 가독성이 좋아지는 장점이 있다.

4. 단방향 데이터 흐름 : 리액트는 단방향 데이터 흐름을 따른다. 이는 데이터가 항상 상위 컴포넌트에서 하위 컴포넌트로 흐르는 것을 의미한다. 이를 통해 데이터의 일관성을 유지할 수 있으며, 디버깅이 쉬워진다.

 

 

컴포넌트 기반 아키텍쳐가 왜 좋은걸까?

컴포넌트 기반 아키텍쳐란 UI를 작은 단위의 컴포넌트로 분해하고, 이들을 조합하여 UI를 구성하는 아키텍쳐이다. 이 아키텍쳐는 다음과 같은 특징을 가진다.

 

1. 재사용성 : 컴포넌트는 독립적으로 작성되므로, 코드의 재사용성이 높아진다.

2. 모듈화 : 컴포넌트 단위로 UI를 작성하므로 모듈화에 유리하다.

3. 유지보수성 : 컴포넌트 기반 아키텍쳐는 코드의 재사용성을 높이므로, 유지보수성이 향상된다.

4. 테스트 용이성 : 컴포넌트 단위로 테스트를 진행할 수 있으므로, 코드 품질을 향상시킬 수 있다.

5. 성능 : 컴포넌트는 독립적으로 작성되므로, 필요한 경우 해당 컴포넌트만 렌더링하여 성능을 최적화할 수 있다.

 

단점은 무엇이 있을까?

1. 기존 UI개발 방식과 차이가 있으므로 학습곡선이 높아질 수 있다.

2. 프로젝트의 규모가 커질수록 컴포넌트간의 의존성 관리가 어려워 질 수 있다.

3. UI의 일부를 여러 컴포넌트로 분해하면, 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달해야 한다. 이로 인해 데이터의 일관성을 유지하기 어려울 수 있다.

 

단방향 데이터 흐름이 왜 좋은걸까?

앞서 리액트에서는 단방향 데이터 흐름을 따른다고 하였다. 상위 컴포넌트에서 하위 컴포넌트로 데이터가 흐르는 방식을 의미하는데, 이는 부모 컴포넌트가 자식 컴포넌트에게 필요한 데이터만 전달하고, 자식 컴포넌트는 이 데이터를 변경하지 못하고 읽기만 할 수 있도록 하기 때문에 단방향 데이터 흐름이라고 한다.

 

이러한 구조를 가질 때 다음과 같은 장점이 있다.

1. 데이터 흐름의 일관성 : 상위에서 하위 컴포넌트로 데이터가 일관성있게 흐르므로, 데이터의 길관성을 유지하기 쉽다.

2. 디버깅 용이성 : 데이터 흐름이 단방향이므로, 디버깅이 쉽다. 데이터가 어디서 변경되는지 파악하기 쉽기 때문에 코드의 오류를 찾는데  용이한 것이다.

3. 예측가능성 : 컴포넌트의 동작이 예측 가능하다.

 

리액트 이전에는 양방향 데이터 바인딩이 많이 사용되었다. 양방향 데이터 바인딩은 데이터가 양방향으로 흐르는 방식을 의미한다. 예를 들어, 사용자가 입력한 데이터가 입력 필드에 바로 반영되고, 입력 필드에서 변경된 데이터가 상태(state)에 바로 반영되는 것이다.

 

양방향 데이터 바인딩은 다음과 같은 문제점이 있다.

1. 코드 복잡도 : 양방향 데이터 바인딩은 코드의 복잡도를 증가시키기 때문에 데이터가 양방향으로 흐르므로 어디서 데이터가 변경되는지 파악하기 어렵다.

2. 디버깅 어려움 : 위의 결과로 디버깅이 어려워진다.

3. 예측불가능성 : 양방향 데이터 바인딩은 사용자가 입력한 데이터가 즉시 반영 되므로, 컴포넌트의 동작이 예측 불가능하다.

 

하지만 단방향 데이터 흐름을 사용할 때도 어려운 점이 있다.

1. 컴포넌트간 데이터 전달이 단방향이므로 프로젝트 규모가 커질수록 컴포넌트 간의 의존성 관리가 어려워 질 수 있다.

2. 데이터가 여러 단계를 거쳐 하위 컴포넌트로 전달될 때, 데이터를 전달하는 과정이 번거로울 수 있는 것이다.

 

이런 단점을 해결하기 위해 여러 컴포넌트에서 공유하는 상태를 Context API를 사용하여 관리하면 의존성 관리가 편리해진다. Context API를 사용하면 전역 상태를 관리할 수 있으므로, 여러 컴포넌트에서 상태를 필요로 할 때, 상위 컴포넌트를 거치지 않고도 접근할 수 있다. 하지만 이 경우에도 너무 많은 상태를 전역으로 관리하면 코드의 가독성이 떨어지고, 디버깅이 어려워질 수 있다.