state와 화면의 일치(synchronize) 질문

Question

강좌 1-3, 7:40초 쯤에서 기존 웹을 하시는분(react같은 프레임웤,라이브러리 사용x)분에게는 이게 놀라운 것이라 하셔서 질문드립니다. react를 사용하지 않고 js만 사용했을때 const   btn  =  document . createElement ( "button" );        btn . textContent  =  "click" ;        let   clicked  =  true ;        btn . addEventListener ( "click" , ()  =>  {          clicked  = ! clicked ;          btn . textContent  =  clicked  ?  "click"  :  "clicked" ;      }); 이것도 clicked라는 변수에 상태를 두고 클릭될때 마다 자동으로 변화시키는 것이 아닌가요? 단지 textContent로 직접 접근을 해서 그런건가요? 별로 차이가 없는것 같아서 너무 헷갈리내요

제로초(조현영) · Answer

이는 데이터를 textContent를 통해 화면을 직접 바꿔준 것입니다. 만약 저런 것들이 많아진다면 어떻게 될지 생각해보세요. 아마 수도 없이 이벤트리스너들이 많이 달릴 것입니다. 그럴 때 실수로 하나라도 데이터에 따라 화면을 바꿔주는 것을 빼먹는다면 바로 버그가 됩니다. React는 HTML처럼 JSX를 통해서 변수(상태, state) 자리만 정해주면 state를 바꾸면 알아서 화면이 바뀝니다.