[React] React란 무엇이고 왜 사용할까?

리액트를 사용하고 있긴 하지만, 리액트를 왜 쓰냐? 에 대한 질문에는

"많이 써서"라고밖에 답할 수 없었다. 그럼 사람들은 왜? 리액트를 많이 쓸까?

왜 쓰는지 그 이유와 특징을 안다면 리액트를 써야 하는 상황을 알고, 그렇지 않을 경우에는 어떤 대안을 내놓을지 알게 될 것이다.

---

React 란?

User Interfaces를 만들기 위한 자바스크립트 라이브러리. 웹, 모바일 웹을 손쉽게 만들게 해 줍니다.

UI를 표기하고, 보여주고 나서 이벤트에 반응하도록 만들어진 라이브러리.

2022 가장 많이 쓰이는 웹프레임워크 1위로 선정되었습니다.

 

• facebook에서 오픈소스 공개 (2013)
• React Native 출시 (2015)
• 함수형 컴포넌트(Hooks) 출시 v16.8 (2019)
• SSR를 위한 컴포넌트 출시 v18 (2022)

 

등장 배경

유저의 행동 흐름에 따라 웹 페이지의 구성을 달리 해주어야 하는 페이지를 말합니다. 유저의 요청 정보를 처리한 후 HTML 문서를 전달받게 되는데, 유저 인터랙션을 처리하기 위한 상태 변화가 많아졌습니다.

이를 자연스러운 UI로 만들어주기 위해 프론트앤드 라이브러리/프레임워크가 등장하게 되었습니다.

 

 

프레임워크 vs 라이브러리 (Feat. React, Angular, Vue)

Frameworks

개발하는데 필요한 모든 것들이 제공되며, 소프트웨어 개발에 있어 하나의 뼈대 역할을 합니다.

UI를 만드는 것뿐만 아니라 Routing, HTTP Clients, State Management 등 모든 것들이 들어있습니다. 정해진 틀이 있고, 틀 안에서 원하는 것들을 만들어 나갈 수 있습니다. 

프레임워크에서 권장되는 규칙 등 초기 러닝커브가 요구되고, 자율성이 떨어지는 것이 단점입니다.

ex) Angular, Android, IOS

Libraries

큰 골격이나 규칙이 정해지지 않고, 좀 더 좁은 문제를 해결하기 위한 작은 솔루션 단위.

자율성이 보장되며, 배울게 상대적으로 적고 진입장벽이 낮습니다.

ex) React

 

Vue는 frameworks에 속하지만, HTTP 통신이나 State Management가 제공되지 않기 때문에

경량형 프레임워크라고 보면 될 것 같습니다.

 

 

왜 React를 사용할까?

1. Virtual DOM

Virtual DOM은 뷰에 변화가 있다면, 가상 DOM에 먼저 적용시키고, 변화된 부분만 실제 DOM으로 전달함으로써

한 번만 렌더링을 진행합니다. 이 때문에 컴포넌트 단위 개발이 가능하게 됩니다.

 

Vrtual Dom이란?

 

2. React Native의 앱 개발 기능

3. 방대한 자료와 커뮤니티

4. Component 단위 작성

React는 컴포넌트들의 집합체입니다.

좋은 컴포넌트는 독립적이고 고립적이고 원하는 곳에서 계속 재사용해 나갈 수 있어 재사용성이 높아, 생산성과 유지보수를 용이하게 합니다. 리액트로 개발한다는 것은 좋은 컴포넌트들을 계속 만들어 나가는 과정이라고 할 수 있을 것 같습니다.

5. JSX (Javascript + xml)

자바스크립트에 대한 확장 구문으로, 리액트에서 Element를 제공해줍니다. HTML 문법과 유사해 컴포넌트를 구성하는 데 쉽게 적응할 수 있습니다.

 

 

 

 

reference

https://gurtn.tistory.com/96

https://velog.io/@youthfulhps/React-React%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0