강의

멘토링

커뮤니티

인프런 커뮤니티 질문&답변

동배님의 프로필 이미지
동배

작성한 질문수

웹 게임을 만들며 배우는 React

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

해결된 질문

작성

·

218

0

강좌 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로 직접 접근을 해서 그런건가요?

별로 차이가 없는것 같아서 너무 헷갈리내요

답변 1

0

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

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

동배님의 프로필 이미지
동배

작성한 질문수

질문하기