React는 왜 쓸까??

지금까지의 방식

1. index.html에서 style.css와 script.js 파일 불러오기

2. index.html에 <style></style>태그와 <script></script>태그로 css, javascript 코드 바로 작성하기

문제점

만약 메인 페이지를 위해 필요한 CSS, JavaScript가 하나의 style.css, 하나의 script.js 파일에 들어있다면 어떤 문제가 있을까?

구현해야하는 기능이 많아져서 JavaScript가 복잡해지면 하나의 script.js 파일 안에 모든 코드를 넣기 힘들어짐.
가독성도 안 좋아지고, 변수 선언 시 겹치지 않도록 신경써줘야함.

=> 그래서 여러개의 css와 js 파일로 분리하게 되면 좋음

그런데 분리할 때,
element + element를 꾸미기 위한 style + element 동작에 대한 script를 묶고 이 묶음들을 최종적인 HTML로 만들 수 있다면 어떨까???

React에서는 각각의 묶음을 컴포넌트라고 하고 이렇게 한다면 가독성이 매우 좋아질 것이다.

JavaScript vs React

JavaScript

React

=> React를 사용하면 UI 로직(DOM을 업데이트하는 로직)과
비즈니스 로직(데이터 - 상태값을 다루는 로직)을 분리할 수 있다.

UI 영역에 변경이 발생하면, DOM을 처음부터 다시 그리는 것이 아니라 그 부분만 업데이트하기 때문에 성능이 뛰어나다.