리액트 vs 바닐라JS

 

1. 프레임워크가 할 수 있는 일은 모두 바닐라 JS 로 가능하다.

그럼에도 불구하고 왜 프레임워크를 사람들이 사용할까..?
 

2. 데이터 변화의 적용이 편리하다.

const element = document.querySelectorAll('.element');
let innerText = '이걸로 다 바꿔줘'
element.innerText = innerText

innerText = '또 다 바꿔줘'

만약 바닐라 JS 에서 데이터가 변해서 DOM 을 업데이트하려고한다면, 두 가지의 절차가 필요하다
 - 바꾸려는 데이터가 쓰일 DOM 엘리먼트를 가져온다.
 - 변경 내용을 적용
위의 코드에서 두가지 절차를 진행 한 후 '이걸로 다 바꿔줘' 는 DOM 을 업데이트 시켰지만, '또 다 바꿔줘' 라는 데이터는 변경 된 것만으로 변경되지 않는다
또 위 두가지 처리를 해줘야 하는 것이라, 어떤 데이터 값이 어느 돔에 적용 되었는지 기억해야하고, 데이터 업데이트가 많아 질 수록, 돔을 선택하고 업데이트 하는 양이 방대해진다
리액트에서는 이 데이터값이 어느 돔에 쓰였는지 다 알지 못해도 상관없다 해당 프레임워크가 그 데이터가 적용된 모든 돔을 업데이트 하기 때문에, 데이터가 변경됨에 따라 적절한 컴포넌트만 효율적으로 렌더링 할 것 이다

3. 컴포넌트 단위 개발이 유용하다.

대규모 웹 사이트는 작게 쪼개어 개발하는 것이 좀 더 수월하다. 이를 쪼갠 것을 컴포넌트라고 부르는데,
컴포넌트로 쪼개어 개발했을 때, 해당 컴포넌트가 어떻게 생겼는지, 가독성이 증가하고 유지보수가 좋아진다
 

4. 결론

리액트 쓰자