React란 무엇인가? - React 배우기

1. React란 무엇인가?

React (ReactJS)는 Facebook에서 개발한 오픈 소스 JavaScript 라이브러리

• 원저자 : Jordan Walke
• 개발자 : 페이스북 및 공동체
• 저장소 : https://github.com/facebook/react
• 프로그래밍 언어 : javascript
• 종류 : 자바스크립트 라이브러리
• 웹사이트 : https://react.dev/
• 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리
• 자주 사용되는 기능을 정리해 모아 놓은 것
• UI 라이브러리
• 웹사이트를 만들기 위해서는 HTML, CSS, JS를 모두 잘 다뤄야 하는데, 이러한 복잡한 사이트를 쉽고 빠르게 만들고 관리하기 위해 만들어진 것이 리액트이다.

2. React의 장점

• 빠른 업데이트와 렌더링 속도
• 컴포넌트 기반 구조
• 재사용성
• 메타(구 페이스북)의 서비스 지원
• 지식 공유 커뮤니티의 활성화
• 모바일 앱 개발 가능 (리액트 네이티브)

- Multi Page Application

여러 페이지를 만들어 body 태그의 내용이 바뀌면서 내용이 변경되는 HTML과는 달리...

이미지출처: 소플의 리액트

- SPA(Single Page Application)

리액트는 하나의 html 페이지만 존재하는 웹사이트(웹애플리케이션)으로 다른 컨텐츠 페이지를 불러들어오는 구조입니다.

개발자가 재사용 가능한 구성 요소로 렌더링을 제어해 페이지의 나머지 부분이 다시 로드되지 않고 단일 요소를 변경할 수 있습니다.

이미지출처: 소플의 리액트

예를 들어 소셜 미디어에 게시물을 좋아하면 하트 아이콘만 바뀝니다. 같은 페이지에서 HTML, CSS, 자바스크립트를 사용했다면 상호 작용할 때마다 전체 페이지를 다시 로드해야 합니다.

리액트는 또한 기존의 HTML, CSS, 자바스크립트 코드에 비해 많은 워크플로우 이점을 가지고 있습니다. 복잡한 UI를 보다 단순한 구성 요소로 분해할 수 있는 기능은 리액트의 효율성과 유연성으로 개발자들 사이에서 높은 인기를 끌고 있습니다.

- Component-based

React는 Component-based architecture를 사용하며, 각 Component는 UI의 일부이며 어플리케이션을 통해 재사용이 가능하여 개발 효율성과 일관성을 높일 수 있다.