프론트엔드 문제
하루에 하나씩 FE 개발자 면접 문제 오픈 채팅방에서 제공하는 문제에 대한 답을 하는 포스팅입니다.
문제
React에서 Hook은 특정 컴포넌트 내부에서 작성되어 작동합니다. 함수형 컴포넌트는 일반 함수처럼 보이지만, 예를 들어 useState를 사용했을 때, 컴포넌트가 리렌더링되어 함수가 다시 호출되더라도 상태 값을 유지할 수 있습니다. 이와 같은 특징을 기반으로, Hook이 어떻게 상태를 유지하는지 설명해주세요.
내가 생각한 답
GPT 피셜 7/10점
Hook은 함수마다 독립적인 환경을 가지게 되는데 그 이유는 함수 컴포넌트는 독립적인 실행 컨텍스트를 가지기 때문입니다. 여기서 useState는 클로저의 기능을 사용해서 개발되었습니다. 이에 메모리에 할당된 state 값을 계속해서 참조하고 있기 때문에 리렌더링이 된다고 하더라도 그 값을 유지할 수 있게 됩니다.
CHAT GPT 답
"React에서 함수형 컴포넌트가 리렌더링될 때도 useState 같은 Hook이 상태를 유지할 수 있는 이유는 React가 각 컴포넌트 인스턴스마다 독립적인 상태 저장소를 갖고 있기 때문입니다. 이 저장소 덕분에 컴포넌트가 리렌더링될 때마다 새로 상태를 초기화하지 않고, 이전에 저장된 값을 기반으로 상태를 계속 유지할 수 있죠.
또, React는 Hook이 호출되는 순서를 바탕으로 각 Hook의 상태를 관리합니다. 그래서 useState가 여러 번 쓰이더라도 순서가 보장되기 때문에 각각 독립적인 상태를 가지게 되는 겁니다. 즉, 컴포넌트가 리렌더링되더라도 Hook은 이전 상태를 그대로 기억하고, 업데이트된 값을 반환할 수 있는 구조로 되어 있습니다."