📌 기술 면접 준비 관련_React

Q : React의 state와 props에 대해서 설명해 주세요.

A : React에서 state와 props는 컴포넌트 간 데이터를 주고 받고 관리하는데 사용되는 중요한 개념입니다.
state란 컴포넌트 내에서 관리되는 로컬 상태를 나타내며 컴포넌트가 내부적으로 상태를 가질 수 있고 상태가 변경될 때마다 자동으로 컴포넌트를 다시 렌던링합니다.
props는 부모 컴포넌트로부터 자식 컴포넌트로 데이터를 전달하는 데 사용되며 자식 컴포넌트에서는 이를 직접 수정할 수 없고 읽기 전용으로 사용합니다.

---

Q : React 컴포넌트의 key 속성에 대해서 설명해 주세요.

A : 리액트는 컴포넌트의 상태나 속성이 변할때마다 렌더링이 되는데 기존 요소들 뒤에 새로운 내용을 추가할 경우 모든 부분이 재렌더링이 되는데 이런 상황을 최적화하기 위해 key 속성을 사용하여 각 항목에 고유한 식별자를 부여해주고 React 업데이트 시에 어떤 항목이 변경되었는지 식별을 하고 변경된 항목만 업데이트 됨으로써 성능 향상과 불필요한 렌더링을 방지할 수 있게 됩니다.

React의 Key는 가능하면 항목 자체의 고유한 식별자를 key로 사용하는 것이 가장 좋다. 예를 들어, 배열 인덱스를 사용하여 고유한 키를 할당하게 되면 항목의 추가나 삭제가 있을 경우 문제가 있을 수 있다.

---

Q : 상태관리 라이브러리의 필요성에 대해서 설명해주세요.

A : 상태 관리 라이브러리는 대규모 웹 애플리케이션에서 복잡한 상태 및 컴포넌트 간 통신을 효율적으로 관리하며, 중앙화된 데이터 흐름을 제공하여 예측 가능한 상태 업데이트와 유지 보수성을 촉진합니다. Redux와 같은 라이브러리는 React 애플리케이션에서 널리 사용되며, 중앙화된 상태관리와 불변성을 기반으로 한 패턴을 제공하여 개발자에게 효과적인 도구를 제공합니다.

---

Q : Redux의 주요 개념들과 연결 관계를 설명해주세요.

A : Redux는 상태 관리를 위한 라이브러리이며 다음과 같은 주요 개념들을 중심으로 동작합니다.
1. Store : 애플리케이션의 상태를 담고 있는 객체이며 스토어는 단일 상태 트리를 가지며 애플리케이션의 모든 상태는 여기에 저장됩니다.
2. Action : 상태 변경을 나타내는 객체로 애플리케이션에서 스토어롤 보내지며 액션은 type 필드와 추가 데이터를 포함하고 있습니다.
3. Reducer : 액션을 기반으로 상태를 어떻게 변경할지 정의하는 순수 함수이며 리듀서는 현재 상태와 액션을 받아 새로운 상태를 반환합니다.
4. Dispatch : 액션을 스토어에 보내는 메서드이며 디스패치를 통해 액션을 발생시키면 리듀서가 호출되어 상태가 업데이트 됩니다.
5. Middleware : 액션이 디스패치되어 리듀서에 도달하기 전에 실행되는 코드이며 미들웨어는 액션의 처리를 중간에 가로채어 로깅, 비동기 작업 처리 등을 수행할 수 있습니다.

디스패치를 통해 사용자가 요청한 액션이 스토어롤 전달이 되며 리듀서는 액션의 type에 따라 상태를 업데이트하고, 업데이트된 상태는 스토어에 저장이 되어집니다.

---

Q : React Hook의 개념과 사용규칙에 대해 설명해주세요.

A : React Hook은 함수형 컴포넌트에서 상태나 생명주기와 같은 React 기능을 사용할 수 있도록 하는 기능입니다. 함수형 컴포넌트에서 클래스 컴포넌트의 기능을 사용할 수 있게 해주는 것이 주요 목표입니다. Hook은 최상위 레벨, 함수형 내부에서만 호출이되어야 하며 클래스 컴포넌트나 일반 Javascript 함수 내에서는 사용할 수 없습니다.
주로 사용하는 Hook으로는 상태 관리를 위한 usestate, 라이프사이클과 관련된 작업을 수행할 수 있는 useEffect, Context를 활용하여 상태를 전역적으로 공유할때 사용하는 useContext가 있으며 그외 다양한 Hook을 사용하여 함수형 컴포넌트에서도 클래스 컴포넌트의 편리한 기능들을 사용할 수 있습니다.