[JavaScript] 리액트의 장점, 왜 이렇게 많이 쓰일까?

1. 컴포넌트 기반 구조

리액트에서는 UI를 조각 단위(컴포넌트)로 나눠서 개발합니다.

• 버튼, 카드, 모달 같은 걸 독립적으로 만들 수 있음
• 한 번 만든 컴포넌트를 여러 군데에서 재사용 가능
• 유지보수가 훨씬 편리
  👉 예를 들어, 버튼 스타일을 바꾸려면 Button 컴포넌트만 수정하면 전체 앱의 버튼이 한 번에 바뀝니다.

2. 선연형 UI

리액트는 "어떻게" 그릴지를 신경쓰기보다, "어떤 모습이어야 하는지"만 코드로 적는다.
예시로 할 일 리스트를 보자

// 명령형 방식 (옛날 DOM 직접 조작)
for (let i = 0; i < todos.length; i++) {
  const li = document.createElement("li");
  li.textContent = todos[i];
  ul.appendChild(li);
}

// 선언형 방식 (리액트)
<ul>
  {todos.map(todo => <li key={todo}>{todo}</li>)}
</ul>

👉 개발자가 DOM 조작을 직접 신경 쓸 필요가 없고, 코드가 깔끔해진다.

3. 빠른 렌더링 (가상 DOM 활용)

리액트는 가상 DOM을 활용해서 실제 DOM 조작을 최소화한다.
즉, 화면에서 바뀐 부분만 업데이트하기 때문에 불필요한 렌더링이 줄고 성능이 좋아진다.
👉 전체 새로 그리기가 아니라 달라진 부분만 바꾸기라는 점에서 효율적이다

4. 방대한 생태계와 커뮤니티

리액트를 쓰면 거의 모든 기능에 대한 라이브러리가 이미 존재한다.

• 상태 관리(Redux, Recoil, Zustand)
• 라우팅(React Router)
• UI 라이브러리(Material UI, Chakra UI 등)

👉 혼자 모든 걸 만들 필요 없이, 검증된 도구를 가져다 쓸 수 있다.

5. 크로스 플랫폼 확장성

리액트 기반으로 웹뿐 아니라 모바일 앱(React Native), 데스크탑 앱(Electron)까지 확장할 수 있다.
👉 한 번 배워두면 여러 환경에 적용할 수 있다.

---

정리

리액트가 사랑 받는 이유는 결국 "개발자를 편하게 해주기 때문"이다.

• 컴포넌트 기반 → 재사용성과 유지보수성 ↑
• 선언형 UI → 코드 가독성 ↑
• 가상 DOM → 성능 최적화
• 풍부한 생태계 → 필요한 기능 빠르게 확장
• 크로스 플랫폼 지원 → 웹, 모바일, 데스크탑까지 가능