React Quiz - state, 제어/비제어 컴포넌트, client side routing
1. React에서 상태 변화가 생겼을 때, 변화를 어떻게 알아채는지 설명해주세요.
- React는 상태를 불변성을 유지하면서 변경시킵니다. 그러므로 상태 정보를 가진 객체의 주소값이 변경되면 변화 되었다는 것을 알 수 있습니다.
2. 제어 컴포넌트와 비제어 컴포넌트의 차이에 대해 설명해주세요.
- 제어 컴포넌트는 React에서 값이 제어됩니다. 그래서 새로운 입력 값이 생길 때 마다 상태가 항상 동기화됩니다.
- 비제어 컴포넌트는 React에 의해 값이 제어되지 않습니다. 그래서 ref를 사용하여 DOM에 직접 접근해서 값을 얻어야 합니다.
2.1 제어 컴포넌트는 언제 사용되나요?
- 실시간 유효성 검사나 유효한 데이터가 없는 경우 submit 버튼 비활성화, 특정 입력방식을 적용할 때 사용됩니다.
2.2 제어 컴포넌트를 사용할 때의 문제점과 그에 대한 해결방안을 얘기해주세요.
- 제어 컴포넌트를 사용하면 사용자가 입력하는 모든 데이터가 동기화되므로 불필요한 단어 입력시에도 값이 갱신됩니다. 그래서 불필요한 리렌더링, 불필요한 api 요청이 발생할 수 있습니다.
- 이를 해결하기 위해 쓰로틀링이나 디바운싱을 사용할 수 있습니다.
- 쓰로틀링 : 마지막 함수가 호출된 후 일정 시간이 지나기 전까지 다시 호출되지 않도록 하는 것
- 디바운싱 : 연이어 호출하는 함수들 중 마지막 (또는 제일 처음)만 호출하도록 하는 것
3. React Router와 같은 client side routing에 대해 설명해주세요.
- Client Side Routing은 페이지의 JavaScript에 의해서만 처리됩니다. 사용자가 링크를 클릭할 때마다 URL 표시줄이 변경되고 페이지에 다른 뷰가 렌더링됩니다. 이러한 SPA는 전체 페이지를 새로 고치지 않기 때문에 사용자에게 부드러운 UI/UX를 제공합니다.
3.1 client side routing의 장단점에 대해 설명해주세요.
- client side routing은 렌더링되는 데이터의 양이 비교적 적기 때문에 구성요소간 라우팅 속도가 빠릅니다. 또한 더 나은 사용감을 주기 위해서 애니메이션과 transition은 서로 다른 컴포넌트 간 전환에서 쉽게 구현할 수 있습니다.
- 그러나 client side routing는 초기 로딩시 모든 route, 컴포넌트, HTML을 한번에 로딩해야하므로 초기 로딩시간이 깁니다. 그리고 SEO 사용이 어려울 수 있습니다.
참고
