[1주차] 기술 스터디

◾️ 상태관리를 왜 할까요? 그리고 평소 state 관리는 어떻게 하시나요?

상태관리는 사용자의 입력이나 외부 API를 통해 나오는 데이터, 애플리케이션 내부에서 생성되는 데이터를 구조화하고 관리하는 것을 말합니다. 이러한 상태관리가 필요한 이유는 여럼 컴포넌트나 모듈 간에 상태를 공유하고 애플리케이션 내의 데이터와 UI의 상태를 일관성 있게 유지, 변경되는 상태를 추적하고 관리하기 위해 사용됩니다. 

 

Redux, Recoil, Zustand 등 다양한 상태관리도구가 있습니다. 그 중 저는 Recoil을 주로 사용합니다. 이유는 보일러플레이트가 적고 코드가 굉장히 짧고 간결하기때문입니다. 

 

◾️ Redux가 무엇인가요, 왜 Redux를 사용하시나요?

Redux란 상태관리 라이브러리 중 하나로 주로 React와 함께 사용합니다. Redux의 구성 요소는 스토어, 액션, 리듀서, 디스패치로 이루어져있습니다. 스토어는 애플리케이션을 저장하는 중앙 데이터 저장소이며 상태를 관리하고 변경을 추적합니다. 액션은 상태 변경을 트리거하는 객체입니다. 애플리케이션의 상태를 변경하려는 의도를 나타냅니다. 리듀서는 액션을 처리하고 새로운 상태를 반환하는 순수 함수입니다. 리듀서는 이전 상태와 액션을 받아서 새로운 상태를 생성하는 역할을 합니다. 디스패치는 액션을 스토어에 보내는 것을 의미합니다. 디스패치를 통해 액션을 실행하여 상태를 변경할 수 있습니다. 

 

다른 상태관리도구와 Redux가 구별되는 장점은 Redux는 액션과 리듀서를 통해 상태 변경이 어떻게 이루어지는 지 명확하게 추적할 수 있습니다. 그리고 상태를 store에서 모두 관리하므로 상태관리에 관련된 복잡성을 줄일 수 있습니다. Redux는 비동기 작업을 관리하고 외부 데이터 소스와의 통신을 처리하기 위한 미들웨어를 지원합니다. 다양한 미들웨어와 플러그인을 활용하는데 편리합니다. 그렇기 때문에 Redux는 대규모 애플리케이션에서 상태 관리를 효유적으로 처리하기 유리합니다.

 

 

◾️ Redux 말고 다른 전역 상태 관리 아는 것 하나와 차이점을 말해주세요

Redux는 상태, 액션, 리듀서, 스토어와 같은 개념을 사용하여 애플리케이션의 상태를 중앙에서 관리합니다. Redux는 예측 가능하며 디버깅이 쉽습니다. Recoil은 상태를 원자 상태(atom)와 유도 상태(Selectors)로 구분하여 관리하며, 더 자유로운 상태 관리를 지향합니다. 각 컴포넌트에서 필요한 상태를 선택적으로 구독하고 갱신할 수 있으며, 더 세분화된 상태 관리가 가능합니다. 그리고 Redux는 상태, 액션, 리듀서, 미들웨어 등 러닝 커브가 높은 편이며 반대로 Recoil의 개념은 간단하고 직관적이며 복잡한 설정이 필요하지 않아 러닝 커브는 낮은 편입니다.

 

◾️ 버츄얼 돔과 리얼 돔의 차이를 설명해주세요 

Virtual DOM과 Real DOM은 UI 업데이트와 성능 최적화를 위해 사용되는 개념으로 Virtual DOM은 Real DOM 즉 실제 돔트리의 복사본으로 애플리케이션의 현재 상태를 나타내는 가상의 돔 트리입니다. 애플리케이션의 상태가 변경될 때마다 가상의 돔이 업데이트 되고 Real DOM과 비교하여 변경된 부분만 찾아내어 업데이트 합니다. Virtual DOM은 변경된 부분만 업데이트하므로 Real DOM을 직접 조작하는 것보다 효율적이고 성능 향상과 더 빠른 UI 업데이트를 가능하게 합니다.

 

◾️ useRef에 대해 설명해보세요 

useRef는 React 함수형 컴포넌트에서 DOM요소에 접근하거나 이전 값을 유지하기 위해 사용되는 Hook중에 하나입니다. useRef는 컴포넌트에서 this를 사용하여 DOM요소에 접근하던 방식과 유사한 기능을 제공합니다. DOM요소에 직접 접근하여 조작해야 하는 경우에 사용합니다. 또한 useRef로 생성된 변수는 항상 'current' 속성을 가지고 있으며 이를 통해 변수의 현재 값을 읽거나 수정할 수 있습니다. 이처럼 함수형 컴포넌트에서 렌더링과 관련 없는 데이터를 저장하고 유지할 때 유용합니다.