[Frontend] 기술면접 top30
해당 질문에 면접에서 답변할 수 있을 정도의 길이(3~4줄)로 답변을 달아보세요. 특히 면접 답변의 핵심은 두괄식(핵심을 먼저 말하는 것)입니다. 완성 후, 면접 하루 전날 족보처럼 훑어보고 면접을 보러갑시다!
📌상태관리를 왜 할까요? 그리고 평소 state 관리는 어떻게 하시나요?
답변▶️
📌상태(state)란?
- 리액트에서 이벤트에 의해 변경되는 동적인 값
- 웹 애플리케이션을 렌더(render)하는데 있어서 영향을 미칠 수 있는 값
- 어떤 시스템이나 프로그램의 현재 상황이나 정보를 나타내는 것 ⇒ 값이 변하면 상태가 변하는 값
📌상태의 종류
전역상태 (Global State)
- 프로젝트 전체에 영향을 끼치는 상태
- Props Drilling 방식을 통해서 부모에서 자식으로 데이터를 전달함.
컴포넌트 간 상태 (Cross Component State)
- 여러 가지 컴포넌트에서 관리되는 상태
- 프로젝트 군데군데에서 쓰이는 모달
- Props Drilling을 필요로 함.
지역상태 (Local State)
- 특정 컴포넌트 안에서만 관리되는 상태
- 다른 컴포넌트들과 데이터를 공유하지 않는다.
- input , selectbox 등 사용자의 입력값을 받는 경우
중앙 State관리소에서 State를 생성하고, 만약 어떤 컴포넌트에서 State가 필요하다면 컴포넌트가 어디에 위치하든 상관없이 State를 불러와 사용할 수 있습니다.이렇게 특적 컴포넌트에 종속된 것이아닌, 중앙 State관리소에서 생성된 State를 Global State라고 합니다. 그리고 이런 값을 관리하는 것을 전역 상태 관리라고 합니다. 우리가 직접 전역상태관리를 구현하기는 어려우니 이러한 라이브러리를 사용해 그것을 구현합니다.
📌상태 관리 라이브러리들
☑️useState
- state를 관리하여 DOM을 업데이트하는 react hook
☑️Context API
- React 컴포넌트 트리 안에서 전역 상태를 공유할 수 있도록 만들어진 방법
- 전역적인 상태 관리를 위한 방법
- 프로바이더와 컨슈머를 활용
- 앱 전체의 관점 / 컴포넌트 관점에서 상태를 관리 할 수 있게 함
- 불필요한 리렌더가 일어나기도 함.
☑️리덕스 (Redux)
- 컴포넌트 간 상태 전달을 위한 효율적인 방법!
- 어플리케이션 전체에 대한 중앙 저장소 역할
- 중앙 상태 관리 방식으로 동작
⇒ Store에 상태를 저장해 앱 내 어디서든지 접근 가능 - 단 하나만 존재하는 Store가 전역 상태를 저장
- Action을 통해서 Store에 대한 행동을 정의하여 상태 변경에 대한 이벤트 트리거의 역할
- Reducer를 통해서만 전역 상태를 변경하고 업데이트할 수 있으며 어떤 액션이 들어오는지에 대한 이벤트를 처리하는 이벤트 리스너
☑️React Query
- 서버와 클라이언트 간 비동기 작업을 쉽게 다룰 수 있게 도와주는 라이브러리로 서버 상태를 관리하는 라이브러리
- 비동기를 통해 서버 상태를 가져오고 관리하기 쉽게 도움
평소의 state관리 방법
평소 상태관리는 redux를 사용합니다. 그 이유는 컴포넌트 코드와 상태 관리 코드의 분리가 가능하며, 효율적인 렌더링이 가능하며 데이터를 저장하고 불러오는 코드를 쉽게 작성 할 수 있습니다.
