[React 기초 ] 리액트를 사용하는 이유

카테고리 없음

s2somang 2022. 2. 13. 02:17

새로운 스터디로 리액트를 공부하게 되었다.

제로초님의 인프런 강의를 들으며 정리해나갈 예정이다.

(강의 주소 : https://www.inflearn.com/course/web-game-react [웹게임을 만들며 배우는 React] )

퍼블리셔를 준비하는 과정에서 웹페이지를 만들어본 경험이 있다. 이후 백엔드를 공부하게 되면서 동적인 페이지를 알게 되었고,
그 동적인 웹페이지를 보다 효율적으로 유지보수하고 관리할수 있게 만들어진 프레임워크들이 있다는걸 알게 되었다

프레임워크들은 지난 포스팅에 있었던 SPA글을 참고해보면 좋을 것 같다.

[용어정리] SPA ?

SPA ? SPA하면 spa브랜드...스파오.. 아님 뜨끈한~(국밥..)스파 같은 단어만 생각났다. 하지만 개발용어의 SPA는 Single Page Application의 약자이다. 단일 페이지 어플리케이션은 현재 웹 개발의 트랜드 중

somang-dev.tistory.com

가장 사랑받는 기술 '리액트'

리액트란?

리액트(React, React.js 또는 ReactJS)는 자바스크립트 라이브러리의 하나로서[2] 사용자 인터페이스를 만들기 위해 사용된다
(출처 : 위키백과)

리액트는 facebook에서 제공해주는 프론트엔드 라이브러리라고 볼수있다. (프레임워크로도 봄)

하나의 페이지에서 동적인 UI를 더 쉽게 만들 수 있는 장점을 가지고 있다.

웹 애플리케이션의 규모가 커지면 DOM을 건들게 되면서 코드가 난잡해지기 쉽다.

리액트는 어떤 상태가 바뀌면 처음부터 모든걸 새로 만들어보여주자! 라는 아이디어에서 시작되었다.
물론 싹다 날리는건 문제가 있다. 이러 문제의 해결은 리액트의 특징중하나인 Virtual DOM으로 해결한다.

가상DOM을 만든다. -> 업데이트가 필요한 부분만 가상DOM으로 수정한다. - > 그이후 리액트의 알고리즘으로 다른곳을 찾아 DOM에 패치시켜준다.

- 컴포넌트 기반의 라이브러리

리액트에서는 ui를 컴포넌트로 관리한다. header, content, footer 등을 컴포넌트로 묶어서 관리하기때문에 코드의 재사용성과 유지보수가 좋다.

- Virtual DOM (가상DOM)

가상 Document Object Model로 이벤트가 생길때마자 가상돔을 만든 후, 다시 그릴때마다 실제DOM과 비교하고 상태를 비교해 변경이 필요한 최소한의 변경내용만 실제 DOM에 반영해서 앱의 속도나 효율성을 개선시켜준다고 한다.

- Props

부모 컴포넌트에서 자식컴포넌드로 전달해주는 데이터.

- State

사용자와 상호작용을 통해 동적으로 데이터를 변경해야하는 것과 같이 동적인 데이터를 다룰때 사용한다. 독립적이라 다른 컴포넌트에 직접적인 접근은 불가능하다.

1. 리액트 라이브러리가 많다.

제이쿼리가 그랬듯 리액트 역시 라이브러리가 많다.

2. 사용하는 곳이 많다.

- Airbnb, BBC, Codecademy, eBay, Twitch, Yahoo

3. 많은 사람들에게 선택받음

참고