React의 정의
React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리입니다. “컴포넌트”라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕습니다.
공식문서에 의하면, React의 정의는 위와 같다. 하지만 의미가 직관적으로 와닿지는 않는다. 그러니 내 방식대로 다시 한번 이해해보자~!
1️⃣ 사용자 인터페이스(UI)를 구축하기 위한 라이브러리
React는 웹사이트에서 사용자들이 눈으로 보는 화면을 JS로 쉽게 만들 수 있게 도와주는 도구이다.
2️⃣ 선언적이고 효율적이다.
- 선언적: UI가 어떻게 생겼는지 직접 그리는 것이 아니라, '이런 상태면 이렇게 보여줘'라고 말하는 방식
- 효율적: 화면의 변화가 생겼을 때 전체를 다시 그리지 않고, 필요한 부분만 바꿔준다.
3️⃣ 컴포넌트 단위
- 화면 전체를 작고, 독립적인 컴포넌트로 나누며 조립하듯이 이어 붙여서 사용한다.
- 각각의 컴포넌트는 자기만의 상태, 로직을 갖고 있다.
React를 사용해야 하는 이유
html, css, js만으로도 웹페이지를 작성할 수 있는데 왜 굳이 리액트를 사용해야 할까? 체크박스와 체크 상태를 문구로 나타내는 예시를 통해 생각해보자.
✅ html, js로만 체크박스 만들었을 때의 문제점
1. UI와 데이터 상태가 분리되어 있다.
- 체크 여부: checkbox.checked, UI(문구): DOM을 찾아서 innerText로 따로 바꿔줘야 함
=> 화면과 데이터가 따로 논다.
2. 상태가 바뀔 때마다 DOM을 직접 조작해야 한다.
- getElementById, innerText같이 매번 DOM을 조작하는 코드를 써야 하기 때문에 비효율적
3. 항목의 수가 많아질수록 유지보수의 난이도가 상승한다.
- 체크박스가 20개, 100개가 된다면 각 체크박스마다 상태를 확인해야 하므로 유지보수가 매우 힘들어진다.
✅ 리액트로 체크박스 만들었을 때의 장점
1. UI와 상태가 항상 함께 있음.
- 상태와 UI가 하나의 컴포넌트 안에서 연결되어 있다.
=> 데이터만 바꾸면 화면은 자동으로 업데이트 된다.
2. useState를 사용하면, 상태가 변할 때 리액트가 알아서 필요한 DOM 업데이트를 수행한다.
=> 개발자가 직접적인 DOM을 조작할 필요가 없어짐.
결국, 리액트를 사용했을 때 상태만 잘 관리한다면 UI는 자동으로 맞춰주기 때문에 개발자 로직에만 집중할 수 있다.