최근 실무에서 상태 관리를 위해 Zustand docs와 상태 관리와 관련한 책을 들여다보다 문득 상태 관리를 하려면 상태에 대해서 알아야되는 것 아닌지, 이미 상태에 대해 잘 안다고 단언할 수 있는가하고 스스로 의심하게 되었다. 제일 기본적인 useState도 제대로 알고 쓰는지 확신할 수 없었다. 리액트 공식 문서와 리액트 딥다이브, 리액트 훅을 활용한 마이크로 상태관리 등의 책을 참고하여 상태를 알아보고자 한다. 참고로 원문을 직접 번역해서 적었기 때문에 부족한 부분이 있을 수 있고 그렇기에 react-ko.dev 내용과 차이가 있을 수 있다. State 상태 컴포넌트는 상호작용의 결과에 따라 화면에 표시되는 내용을 변경해야하는 경우가 잦다. form에 입력할 때, input field를 업데이트해..

리액트 스터디 중 "가상DOM과 리액트 파이버" 주제가 나왔다. 발표를 맡게된 리액트 렌더링 부분을 준비하고, 발표 당일 스터디원들과 얘기하며 조금씩 윤곽이 잡히기 시작했다. 하지만 여전히 어려운 건 매한가지... 그러다가 좋은 글을 발견했는데 포스팅 일자가 리액트 15,16 기준이라 렌더가 동기식으로 진행된다고 되어있어서 🤔 제대로 스터디 내용을 복기할 겸, 그리고 파이버와 좀 친해질 겸 포스팅 주제로 선정하게 되었다. 조금 의문이었던 것은 재조정 과정은 똑같고, 여전히 유효할 것 같은데 리뉴얼된 React 사이트에는 파이버와 관련된 내용이 전부 생략되어있다. 왜일까????? 그래서 더 어렵게 느껴졌던 것 같다. 더이상 관련이 없는 내용인지? 레거시한 부분인 건지에 대한 고민. 리액트 파이버 아키텍처 ..

Introduction 나는 null이 아니라 any 형식이 포함된다고 Error가 떴다. React에서의 event를 제대로 이해하지 못한 탓인지 tsx를 화나게 했다. 나처럼 js에서의 Event는 익숙한데, React + TypeScript에서의 Event 타입을 어떻게 다루어야 할 지 이해하지 못하는 분들을 위해 글을 쓴다! React, TypeScript에서의 Event Type JavaScript에서 자주 쓴 `addEventListener( )`, `on____` 예시로 `onChange` change event는 주로 input element의 값이 수정되었을 때 발생하도록쓰인다. // Syntax addEventListener("change", (event) => {}); onchange..