[React] 1. 리액트란 무엇이고, 왜 쓸까?

++ React를 더 잘 이해하기 위한 정리노트 시리즈

리액트란?

사용자 인터페이스를 만들기 위한 JavaScript 라이브러리

리액트 공식문서를 보면 저런 설명이 있다.

예를 들어보면, 넷플릭스로 영화를 보려고 넷플릭스 홈페이지나 앱에 접속하면 보이는 화면, 구성하는 모든 것을 보여주고 사용할 수 있게 해주는 거대한 라이브러리다.

리액트의 특징들을 알아보자.

# 선언형

하나의 상태변수를 정의하고 값이 바뀌면 리액트는 알아서 변경된 부분을 감지하고 렌더링해 화면에 값을 반영해준다.

기존의 JS로 같은 역할을 하려면, 먼저 요소를 가져오고 값을 초기화해준 뒤 변경된 값을 넣는 과정을 하나하나 정의해야 한다.
이 중 하나라도 빠지면 동작이 안된다.

# 컴포넌트 기반

컴포넌트라는 이름의 UI 레고 블럭들을 만들고 원하는 곳에 조립해 사용할 수 있다. 각각의 레고 블럭들은 스스로 상태를 직접 관리하기 때문에 블록의 역할에 따라 코드도 분리되고 쉽게 관리할 수 있다.

리액트를 사용하는 이유

또플릭스를 들어보자면, 영상 호버링, 실시간 영화 업데이트 등등 프론트 단에서 다양하고 복잡한 인터렉션이 필요하다.

이런한 것들을 JS로만 코드를 짜야한다면 모든 과정들을 하나하나 명령해 그려내야 한다. 그러나 리액트를 사용해 기능들을 컴포넌트화하고, 상태 변수들을 잘 정의해주면 변경된 사항을 알아서 적용해주니 훨씬 쉽게 구현할 수 있다.

이외에도 다양한 리액트의 장단점이 있겠지만 가장 큰 특징들을 기억하고 알맞게 리액트를 써보자!