[250114 TIL] 본캠프 73일차 (면접카타)

기능구현할 때 특정 기술스택을 선택해야 했던 경험이 있다면 어떤 과정을 통해 기술스택을 선택했는지 설명해 주세요.

회원가입과 로그인을 구현하는 과정에서 React Hook Form과 Zod를 사용한 경험이 있습니다.

사용자의 입력 값이 변경될 때마다 실시간으로 유효성 검사를 해주어야 하는데, useState를 이용해도 구현은 가능하지만 이럴 경우 제어 컴포넌트가 되면서 state 값이 변경될 때마다 리렌더링이 발생하기 때문에 성능이 저하될 수 있습니다. 하지만 React Hook Form과 Zod를 사용하게 되면 비제어 컴포넌트를 기반으로 동작하면서도 실시간 유효성 검사 또한 구현이 가능하기 때문에 선택을 하게 되었습니다.

 

 

제어컴포넌트와 비제어컴포넌트의 장단점에 대해 설명해주세요.

제어 컴포넌트는 입력 값을 state로 관리하기 때문에 입력 값을 실시간으로 추적할 수 있고 그에 대한 즉각적인 피드백과 동적인 로직 구현이 가능하지만, 입력 값이 변경될 때마다 리렌더링이 발생하기 때문에 입력해야할 데이터가 많아지게 되면 성능이 저하될 수 있습니다.

비제어 컴포넌트는 입력 값을 state로 관리하지 않고 DOM을 참조하여 직접 처리하기 때문에 성능적으로 우수하지만, 입력 값에 대한 추적이 어렵기 때문에 동적인 로직을 구현하는 것이 복잡하고 유효성 검사와 같은 기능을 구현하기 위해서는 추가적인 도구가 필요합니다.