바닐라로 상태 기반 렌더링 컴포넌트 만들기 1 - 왜 상태 기반 렌더링을 하게 됐을까?

Sonny·2022년 4월 12일
9

Vanilla

목록 보기
1/5
post-thumbnail

최근 React를 사용해보며 "바닐라로 구현해보면 어떨까?"라는 호기심 + 간단하게나마 원리를 파악해보고 싶다는 생각으로 바닐라 타입스크립트로 컴포넌트 만들기를 도전!!

시작은 "왜" 상태 기반으로 렌더링을 하게 되었는지부터 고민해보는걸로..!
jQuery로만 개발을 하던 저에게 상태를 기반으로 한 렌더링은 낯설다구요...🥲

"왜" 상태 기반 렌더링을 하게 됐을까요..?

상태(state)는 화면에 보여지는 "데이터의 현재 값"을 의미하는 걸로 내맘대로 정의!

위 코드는 버튼을 클릭했을 때, Count를 1씩 증가시킨 뒤, Count를 보여주는 요소들의 내용을 업데이트하는 간단한 코드이다.

count라는 상태는 존재하지만 렌더링과 상태가 연결이 되어 있지 않아 Element들을 열심히 선택해서 수동으로 렌더링 해주고 있다..

위의 상황처럼 3개의 Element에서만 보여지는게 아니라 100개의 Element에 표시되고 있다면..?
최악의 상황을 가정했을 때, 우리는 일일이 100개를 선택하고 업데이트 해줘야한다..!

이렇게 된다면..? 🤔

"실수로 하나 빠뜨리면 어쩌지..?"
"그럼 계속 이렇게 하나 수정될 때마다 전부 다 업데이트 해줘야하나..?"
"웹 사이트는 점점 복잡해질텐데..?"

라는 유지보수, 효율성, 안정성의 문제를 해결하기 위해 최근에는 상태(state)를 기반으로 렌더링하는 방식으로 발전이 된 것 같다!

이유에 대해 알아보았으니 다음장부터는 실전!!! 코드로!!

profile
FrontEnd Developer

2개의 댓글

comment-user-thumbnail
2022년 4월 12일

상태기반의 랜더링이 어떤 식으로 진행될지 궁금해지는 글이네요! 앞으로의 글들이 어떻게 진행될지 기대됩니다

그리고 그림들도 너무 귀여워요…☺️☺️다만 그림이 png라 그런지 다크모드에서는 잘 보이지 않는게 아쉽습니다…ㅜ
(오히려 조아…??!)

1개의 답글