OCEAN-WARD BOUND

React에서 상태 관리와 클로저 문제 해결안녕하세요 Ocean입니다.최근 프론트엔드 면접에서 React에서 상태를 어떻게 관리하는지, 그리고 이 과정에서 발생하는 클로저 문제에 대해 질문을 받았습니다. 사실 이 문제는 생각해본 적이 없어서 답변을 잘 못했었는데, 여러 자료를 찾아보니 좋은 글들이 많았습니다. 그래서 이 기회를 통해 관련 자료들을 정리해보았습니다.참고 글1. React useState의 동작 원리와 클로저2. React Hook은 실제로 어떻게 동작할까? (번역)3. React Hooks: 마술이 아니라 그저 배열일 뿐이다 (번역)React의 useState훅은 함수형 컴포넌트에서 상태를 관리하는 중요한 도구입니다. 또한 useState는 클로저를 설명하는 아주 좋은 예이기도 합니다.이번..

useState란?useState는 컴포넌트에 state 변수를 추가할 수 있는 React Hook입니다.const [state, setState] = useState(initialState); state란 컴포넌트의 기억 저장소라고 합니다. React Component가 Rerendering 될 때, 특정한 상태를 기억해야 하는 경우가 많습니다. 이 때 일반 변수는 컴포넌트 함수가 실행, 즉 Render될 때 기존의 값을 초기화하기 때문에 React에서는 useState란 hook을 제공하여 state라는 개념을 통해서 React가 해당 Component의 state를 기억하게 하여, Component의 Rendering 사이의 데이터를 기억할 수 있게 합니다. 기본 규칙useState는 컴포넌트의 최..