[React]리액트 공부 시작! - 리액트의 특징

기존 개발방식의 문제

먼저 리액트는 3가지의 특징을 가지는데 선언형이고, 컴포넌트기반의 범용성이 높은 라이브러리라고 할 수 있다. 기존의 HTML, CSS를 이용할 때에는 코드의 재사용성이 매우 떨어졌고, 코드가 길어질수록 유지보수의 어려움이 많았다.. 이는 기존에 HTML만 사용했을 때, 하나의 기능을 구현하기 위해 요소들을 만들었을 때 이를 재사용하지 못하고 다시 새로운 코드를 작성해야해서 그렇다.

 

리액트의 특징

[컴포넌트 기반]

버튼 하나를 만들더라도, 그 버튼을 다른 곳에 재사용하기 위해서는 버튼태그를 복사해서 일일이 새로운 HTML파일에 붙여넣기를 해야했고, 복사된 태그는 원본과의 종속성이 없어 추후에 버튼의 디자인이 바뀌거나 기능이 바뀌었을 때 모든 요소를 하나하나 고쳐줘야 한다는 꽤나 비효율적인 단점이었다.

한 두 페이지의 간단한 웹 사이트 라면 컴포넌트로 선언해서 사용하는 것이나 하드코딩으로 버튼을 만드는 것이나 큰 차이가 없어 보이지만, 페이지가 수십개가 넘어가는 상용 프로젝트에서 이는 치명적인 단점이다.

리액트에서는 이러한 단점을 컴포넌트기반의 언어라는 특징으로 극복했다. 하나의 기능구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반하여 개발하게 되면 컴포넌트별로 독립적이고 재사용 가능하게 개발을 할 수 있기 때문에 기능 자체에 집중하여 개발을 할 수 있게된다.

 

[선언형]

리액트는 한 페이지를 보여주기 위해 HTML, CSS, JS로 나눠 적기보다는 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용해서 선언형 프로그래밍을 지향하는데 이는 개발을 하는데 있어 불필요한 시간을 줄일 수 있고, 사용되지 않는 불필요한 코드들을 줄일 수 있다. CSS를 전역에서 사용하다보면 클래스 이름이 겹치게되어 적용한 스타일이 적용되지 않거나 꼬이게 되는데 리액트와 여러 가지 리액트 라이브러리를 사용하게되면 불필요한 코드사용이나, 예상치못한 오류를 피할 수 있다.

 

[범용성]

리액트는 프레임워크가 아닌 자바스크립트 라이브러리로, 자바스크립트 프로젝트 어디에서든 유연하게 사용할 수 있다. 또 facebook에서 관리하고있어 안정적이고, 리액트 네이티브라는 라이브러리를 사용하여 네이티브앱 개발도 가능하다.

 

[리액트와 바닐라JS의 차이점]

바닐라JS에서는 앨리먼트의 변화가 생겼을 때 앨리먼트 전체를 다시그리게 된다. 하지만 리액트에서는 리액트의 알고리즘으로 변화된 부분을 감지하여 변화가 있는 부분만 리랜더링을 하는 방식으로 리소스의 낭비를 줄인다.

이는 리액트의 virtual DOM이라는 것이 있어서 그런데 이 Virtual DOM에서 기존 요소와 새로운 요소의 차이를 분석해서 리랜더링을 진행하게된다.

변경사항의 반영에 대해서는 리액트에게 일임하고 프로젝트를 진행하게 되는 것이다.