옵저버 패턴으로 컴포넌트 상태 변화 감지하기

리액트를 사용하면 컴포넌트가 상태 변화를 감지하도록 하기 위해 별도로 신경 쓸 필요가 없다. 리액트에서 제공하는 useState라는 편리한 도구가 있기 때문이다. setState로 상태를 원하는 대로 수정만 하면 컴포넌트가 변경 사항을 자동으로 *감지한다. *여기서 감지한다는 표현은, 상태 변화가 발생할 때 리렌더를 수행한다는 의미이다. 반면, 바닐라 JS로 SPA를 만들면 상태 변화를 UI에 반영하기 위해 일일이 처리해 주어야 한다. 상태가 변경되었을 때 해당 상태를 보여주고 있는 컴포넌트를 다시 렌더해 주어야 한다. 이 작업이 생각보다 골치 아프다. 안 그래도 이것저것 많은 책임을 맡고 있는 우리의 컴포넌트를 더 복잡하게 만든다. 더군다나, 만약 하나의 상태를 여러 곳에서 보여주고 있다면 로직의 복잡..
프론트엔드 2024. 4. 10. 18:13
1