# React 예상 질문 - 2

- ⭐ 라이프사이클에 대해 설명해주세요. (71번) 
: 라이프사이클은 소프트웨어 엔터티의 생명 동안 발생하는 일련의 단계를 설명하는 용어로, 리액트에서는 특히 컴포넌트의 생명주기를 나타냅니다.
컴포넌트는 마운팅(Mounting), 업데이트(Updating), 언마운팅(Unmounting)의 세 단계로 나뉩니다.

리액트의 클래스 컴포넌트에서는 각 라이프사이클 단계에 해당하는 라이프사이클 메서드들이 제공되어, 개발자가 해당 메서드 내에서 필요한 로직을 정의하여 컴포넌트의 동작을 조절할 수 있습니다.

반면, 함수형 컴포넌트에서는 기존의 라이프사이클 메서드가 없습니다. 대신, 리액트는 Hook이라는 API를 도입하여 함수형 컴포넌트에서도 비슷한 라이프사이클 동작을 수행할 수 있게 했습니다.



- ⭐ 라이프 사이클 메소드에 대해 설명해주세요. (72번)
: 라이프 사이클 메소드는 클래스형 컴포넌트가 생성, 업데이트, 소멸하는 과정 동안 실행되는 여러 메서드입니다. 이 메서드들은 컴포넌트의 수명 주기 동안에서 발생하는 여러 단계에 따라 정의되며, 마운팅, 업데이트, 언마운팅의 세 주요 단계에서 작동합니다.


1. 마운팅 (Mounting): 컴포넌트가 처음으로 DOM에 삽입될 때의 단계
 - constructor() : 컴포넌트의 생성자 메소드. 초기 state를 설정할 때 주로 사용
 - static getDerivedStateFromProps() : props를 받아 state를 업데이트할 때 사용.
 - render(): 컴포넌트를 렌더링하는 메소드.
 - componentDidMount(): 컴포넌트가 마운트된 후에 호출. API 호출, 이벤트 리스너 설정 등의 작업을 주로 수행.


2. 업데이트 (Updating): props 또는 state의 변화로 인해 컴포넌트가 리렌더링될 때의 단계
 - static getDerivedStateFromProps()
 - shouldComponentUpdate(): 컴포넌트가 리렌더링 될지 결정하는 메소드. 성능 최적화에 유용.
 - render()
 - getSnapshotBeforeUpdate(): DOM 업데이트 직전의 어떤 값 (예: 스크롤 위치)을 캡처하여 componentDidUpdate에 전달.


3. 언마운팅 (Unmounting): 컴포넌트가 DOM에서 제거될 때의 단계
 - componentWillUnmount(): 컴포넌트가 언마운트되기 직전에 호출. 이벤트 리스너 제거 등의 정리 작업을 주로 수행.





- 함수형 컴포넌트의 장점에 대해 설명해주세요. (73번)
1. 함수형 컴포넌트는 클래스 컴포넌트보다 문법이 간결하여 가독성이 좋습니다.
2. 함수형 컴포넌트에서는 this를 사용하지 않기 때문에 바인딩에 관한 문제나 혼란이 없습니다.
3. 성능 최적화: 리액트 팀에 따르면, 함수형 컴포넌트는 미래의 리액트 버전에서 클래스 컴포넌트보다 성능 최적화가 더 잘 이루어질 가능성이 있습니다.
4. 함수형 컴포넌트를 사용하면 React Hooks를 활용할 수 있습니다.
이를 통해 state, 라이프사이클 메소드, 그 외의 여러 기능들을 함수형 컴포넌트 내에서 사용할 수 있게 됩니다.
5. 재사용 및 테스트 용이성: 작은 기능별로 함수형 컴포넌트를 분리하여 개발할 경우, 재사용성과 테스트의 용이성이 향상됩니다.




- ⭐ React Hooks에 대해 설명해주세요. (74번)
: React 16.8에서 도입된 기능으로, 함수형 컴포넌트에서도 state, 라이프사이클 메소드, 그 외의 여러 기능들을 사용할 수 있게 해주는 API입니다.
주로 사용하는 hooks 8가지를 설명 드리겠습니다.

1. useState: 컴포넌트의 로컬 상태를 관리합니다. 초기 상태 값을 인자로 받아, 현재 상태와 그 상태를 업데이트하는 함수를 반환합니다.
2. useEffect: 라이프사이클 메소드를 함수형 컴포넌트에서 사용할 수 있게 해줍니다. 주로 데이터 패치, 이벤트 리스너 등의 side effect를 수행하는 데 사용됩니다.
3. useContext: React의 Context API를 사용하여 컴포넌트의 상위 계층에서 전달되는 값을 직접 사용할 수 있게 해줍니다.
4. useReducer: 복잡한 상태 로직을 관리하는 데 유용한 hook으로, redux의 reducer와 유사한 패턴을 사용합니다.
5. useCallback: 메모이즈된 콜백을 반환하여, 불필요한 리렌더링을 방지하는데 사용됩니다.
6. useMemo: 메모이즈된 값을 반환하여, 성능 최적화에 도움을 줍니다.
7. useRef: 참조(reference) 값을 반환합니다. 주로 DOM 요소에 직접 접근할 때 사용됩니다.
8. useParams : React Router의 Hook 중 하나로, 현재 route의 parameter 값을 가져올 수 있게 도와줍니다.




- ⭐ 함수형 컴포넌트에서 클래스형 컴포넌트의 라이프 사이클 메소드를 비슷하게 사용하는 방법에 대해 설명해주세요.(useEffect => ComponentDidMount, ComponentDidUpdate, ComponentWillUnmount) (75번)
: React Hooks 중  useEffect를 사용하면 componentDidMount, componentDidUpdate, componentWillUnmount와 같은 라이프사이클 메소드의 기능들을 통합하여 제공합니다.

1. componentDidMount는 컴포넌트가 마운트될 때 한 번만 호출됩니다. useEffect에서 두 번째 인자로 빈 배열을 전달하면 이와 동일한 동작을 할 수 있습니다.
2. componentDidUpdate는 컴포넌트가 업데이트될 때마다 호출됩니다. useEffect를 사용하되, 두 번째 인자 없이 사용하면 이와 동일한 동작을 할 수 있습니다. 만약 특정 상태나 props의 변경에만 반응하길 원한다면, 그 상태나 props를 배열 안에 넣어 useEffect의 두 번째 인자로 전달할 수 있습니다.
3. componentWillUnmount는 컴포넌트가 언마운트될 때 호출됩니다. useEffect 내에서 함수를 반환하면, 그 함수는 컴포넌트가 언마운트될 때 실행됩니다.



- useEffect와 useLayoutEffect의 차이점에 대해 설명해주세요. (76번)
: useLayoutEffect와 useEffect는 React Hooks로, 매우 유사하게 동작하지만 실행 시점과 용도에 차이점이 있습니다. 

1. useEffect: 비동기적으로 동작하며, 브라우저가 화면을 그린 후에 발생합니다.
 DOM 업데이트와 관련된 부수 효과(side effects)를 처리할 때 사용됩니다.
데이터 패치, 이벤트 리스너 설정, 로컬 스토리지에 데이터 저장 등의 작업에 주로 사용됩니다.

2. useLayoutEffect: 동기적으로 동작하며, 브라우저가 화면에 그리기 전에 발생합니다.
화면 깜빡임과 같은 미묘한 UI 관련 동작을 제어하거나, 동기적으로 DOM을 변경해야 할 때 유용합니다.
대부분의 경우에는 useEffect를 사용하면 충분하지만, DOM을 동기적으로 업데이트하거나 조정해야 할 경우 useLayoutEffect를 사용해야 합니다.





- Pure Component에 대해 설명해주세요. (77번)
: Pure Component는 React의 중요한 최적화 도구 입니다. 기본적으로 React 컴포넌트는 상위 컴포넌트가 리렌더링될 때마다 리렌더링됩니다. 그러나 경우에 따라 이러한 리렌더링이 불필요할 수 있습니다. Pure Component는 컴포넌트의 props나 state가 변경되지 않았다면 리렌더링을 방지하여 앱의 성능을 향상시킬 수 있게 도와줍니다.

1. Pure Component는 props와 state의 얕은 비교를 수행하여 실제로 변경이 필요한 경우에만 리렌더링됩니다. 이는 효율적인 업데이트를 도와주지만, 복잡한 데이터 구조에서는 제대로 동작하지 않을 수 있습니다.

2. 성능 최적화: 불필요한 렌더링을 방지함으로써 성능을 향상시킬 수 있습니다. 그러나 모든 곳에서 Pure Component를 사용하는 것은 권장되지 않습니다. 실제로 성능 이점이 있을 때만 사용하는 것이 좋습니다.

3. 불필요한 리렌더링을 방지해줍니다.




- shouldComponentUpdate에 대해 설명해주세요. (78번)
: React의 클래스 컴포넌트에서 사용되는 리렌더링 여부를 결정하는 라이프사이클 메소드로, 컴포넌트가 다시 렌더링되어야 할지 여부를 결정하는 데 사용됩니다. 즉, 성능 최적화를 위해 사용 됩니다.

두 개의 인자(새로운 props(nextProps)와 새로운 state(nextState))를 받고, boolean 값을 반환합니다.
true를 반환하면 컴포넌트는 다시 렌더링되고, false를 반환하면 컴포넌트의 리렌더링이 중단됩니다.
기본적으로, shouldComponentUpdate는 항상 true를 반환합니다. 이는 컴포넌트가 기본적으로 state나 props의 변경이 있을 때마다 리렌더링되도록 설정되어 있음을 의미합니다.
이 메소드를 재정의하여, 특정 조건에서만 컴포넌트가 리렌더링되도록 설정할 수 있습니다. 이를 통해 불필요한 렌더링을 방지하고 앱의 성능을 향상시킬 수 있습니다.



- State에 대해 설명해주세요. (79번)
: State는 React 컴포넌트의 내부 데이터 입니다. State는 컴포넌트 내부에서만 직접 수정 가능하고, props와 달리 부모 컴포넌트로부터 상속받지 않습니다.

State는 변경이 가능하며, 변경될 때 해당 컴포넌트와 그 자식 컴포넌트들이 재렌더링됩니다.
클래스 컴포넌트에서는 생성자 내부에서 this.state를 사용하여 초기화되며, 함수형 컴포넌트에서는 useState 훅을 사용하여 초기화됩니다.
State를 직접 변경해서는 안됩니다. this.setState 메소드(클래스 컴포넌트) 또는 useState의 상태 설정 함수(함수형 컴포넌트)를 사용하여 업데이트해야 합니다.

관련 도구로는 useState, redux가 있습니다.
1. useState: React Hooks로, 상태의 초기값을 받아서 현재 상태와 그 상태를 업데이트하는 함수를 반환합니다.
2. Redux: 외부 라이브러리로, 전역 상태 관리를 위해 사용됩니다. 여러 컴포넌트에서 공유되는 상태를 중앙 집중적으로 관리하며, 복잡한 앱에서 상태의 일관성 및 유지 보수성을 높이는 데 도움을 줍니다.



- React에서 State를 어떻게 관리하나요? (80번)
: React에서 State는 컴포넌트 내에서 동적으로 변할 수 있는 데이터입니다. 상태는 사용자 상호작용, API 호출 결과 등으로 인해 변경될 수 있으며, 상태가 변경될 때 컴포넌트는 재렌더링됩니다. useState나 Context API, redux, MobX, Recoil등을 사용하여 상태를 관리 할 수 있습니다.

1. useState는 React의 Hook 중 하나로, 함수형 컴포넌트 내에서 로컬 상태를 관리할 수 있게 해줍니다.
컴포넌트 내부에서만 사용되는 상태를 관리하는 데 적합합니다.
2. React의 내장 기능인 Context를 사용하면, 애플리케이션 전체에 걸쳐 상태를 공유할 수 있습니다.
Provider와 Consumer 컴포넌트를 사용하여 데이터를 공유합니다.
3. Redux는 JavaScript 애플리케이션의 전역 상태 관리 라이브러리입니다.
복잡한 애플리케이션의 상태를 중앙에서 관리하는데 유용하며, predictability, maintainability, debugging, testing 등의 이점을 제공합니다.
Redux는 action, reducer, store 등의 개념을 사용하여 상태를 관리합니다.
4. MobX는 상태 관리 라이브러리 중 하나로, observable 상태와 computed values, reactions 등의 개념을 사용하여 상태 변화를 자동으로 추적합니다
5. Recoil은 Facebook에서 제작한 상태 관리 라이브러리로, 상태와 상태와 관련된 로직을 컴포넌트 트리의 다양한 레벨에서 쉽게 공유할 수 있게 해줍니다.



- ⭐ Props Drilling에 대해 설명해주세요.
Props Drilling을 어떻게 해결할 수 있나요? (81번) 
: Props Drilling은 React에서 컴포넌트 계층구조 내에서 상위 컴포넌트로부터 하위 컴포넌트로 props를 계속 전달하는 과정을 의미합니다. 중간에 있는 컴포넌트들이 해당 props를 실제로 사용하지 않더라도, 그 props를 하위 컴포넌트로 전달하기 위해 받아야 하는 상황을 생성합니다. 이로 인해 애플리케이션의 복잡성이 증가하며, 유지 보수가 어려워집니다.

Props Drilling을 해결하기 위해서는 Context API, Redux, MobX 등의 방법이 있습니다.

1. React에 내장된 Context API를 사용하면, 부모 컴포넌트와 직접적인 관계가 없는 하위 컴포넌트로 데이터를 직접 전달할 수 있습니다. Provider와 Consumer 컴포넌트를 통해 데이터를 공유하며, 중간의 컴포넌트들을 건너뛰고 데이터를 전달할 수 있습니다.
2. Redux는 전역 상태 관리 라이브러리로, 애플리케이션의 모든 컴포넌트에 상태를 제공합니다. Redux store에 상태를 저장하고 필요한 컴포넌트에서 직접 해당 상태를 추출하여 사용할 수 있습니다.
3. MobX는 리액트 상태 관리 라이브러리 중 하나로, 자동으로 상태 변경을 추적하고 해당 상태에 의존하는 컴포넌트를 재렌더링합니다. 간결한 API로 중앙 집중적인 상태 관리를 할 수 있습니다.
4.  더 작은 컴포넌트들을 조합하여 더 큰 컴포넌트를 만드는 방법으로, 필요한 props만을 전달하는 방식으로 복잡성을 줄일 수 있습니다.



- 데이터를 자식에서 부모로도 전달할 수 있나요? (82번)
: 부모 컴포넌트에서 콜백 함수를 정의하고, 이를 자식 컴포넌트에 props로 전달하는 방법이 있습니다.
자식 컴포넌트에서는 특정 이벤트나 상황 발생 시에 이 콜백 함수를 호출함으로써 부모 컴포넌트에게 데이터를 전달할 수 있습니다.




- Props와 State의 차이에 대해 설명해주세요. (83번)
:props와 state는 컴포넌트의 데이터를 관리하고 상호작용하는 개념입니다.

1. Props
부모 컴포넌트로부터 전달받은 데이터로, 컴포넌트 외부에서 내부로 정보를 전달하는 매개체 역할을 합니다.
단방향 데이터 흐름으로 부모 컴포넌트에서 자식 컴포넌트로 데이터가 전달됩니다.
읽기 전용으로 컴포넌트 내부에서 직접 변경할 수 없습니다. 부모 컴포넌트에서 변경이 이루어지면 새로운 값을 전달받게 됩니다.
컴포넌트 간에 데이터를 전달하거나, 재사용 가능한 컴포넌트를 만들기 위해 사용됩니다.


2. State
컴포넌트 내부에서 선언하고 관리되는 데이터로, 컴포넌트의 상태를 추적하며 변경될 때 컴포넌트는 재렌더링 됩니다.
상태 변경은 주로 사용자 상호작용, API 응답 등으로 인해 발생하며, 상태 변경은 해당 컴포넌트와 그 자식 컴포넌트에 영향을 줄 수 있습니다.
setState (클래스 컴포넌트) 또는 useState (함수형 컴포넌트)를 통해 상태 값을 변경할 수 있습니다.
동적인 데이터를 추적하고, 사용자 상호작용에 반응하거나 시간에 따라 변화하는 데이터를 관리하기 위해 사용됩니다.





- 왜 state를 직접 바꾸지 않고 setState (useState)를 사용해야 하나요? (84번)
: state에 직접 접근하게 되면, 예상치 못한 부작용을 야기 시킵니다.

1. React의 setState 메서드는 연속적인 상태 업데이트를 올바르게 처리하기 위해 비동기로 작동합니다. state를 직접 수정하게 되면, 이러한 비동기 처리 메커니즘이 무시되어 예상치 못한 상태의 변경이 발생할 수 있습니다.
2.  state를 직접 변경하면 React는 그 변경 사항을 알지 못합니다. 따라서 컴포넌트는 새로운 상태에 따라 자동으로 재렌더링 되지 않습니다. setState나 useState의 setter 함수를 사용하면, React는 상태가 변경되었음을 인식하고 관련 컴포넌트를 재렌더링 합니다.
3. React는 불변성 원칙을 따르기를 권장합니다. 이는 상태 변경을 예측 가능하게 만들고, 최적화를 통한 성능 향상을 가능하게 합니다. 직접 state를 수정하면 이 원칙이 위반됩니다.
4. setState는 여러 변경사항을 일괄 처리하는 배치 업데이트를 지원합니다. 이는 성능 최적화를 위한 중요한 기능입니다. state를 직접 변경하면 이러한 배치 처리의 이점을 잃게 됩니다.




- React 에서 상태 변화가 생겼을 때, 변화를 어떻게 알아채는지에 대해 설명해주세요. (85번)
: React는 상태나 속성 변화시,  해당 컴포넌트의 재렌더링을 트리거합니다.

Virtual DOM: React는 Virtual DOM을 사용하여 UI를 표현합니다. 상태나 속성이 변경될 때, React는 새로운 Virtual DOM 트리를 생성합니다.

-> 변화를 어떻게 알아채는 과정
1. React는 이전 Virtual DOM 트리와 새로운 Virtual DOM 트리를 비교하는 과정, 즉 Reconciliation을 수행합니다. 이 과정에서 두 트리의 차이점을 찾아냅니다.
2. React의 Diffing 알고리즘은 두 Virtual DOM 트리의 차이점을 효율적으로 탐지합니다. 이는 최소한의 연산만을 사용하여 실제 DOM에 변경사항을 반영하기 위한 것입니다.
3. 찾아낸 차이점에 따라 실제 DOM은 업데이트됩니다. 이 과정은 최소한의 변화만을 적용하여 성능을 최적화합니다.
4. 상태나 속성의 변경을 React가 감지하게 하는 것은 setState 메서드나 useState 훅의 setter 함수를 통한 상태 업데이트입니다. 이들 메서드나 함수를 사용하면 React는 상태 변경을 인지하고, 위의 과정을 통해 변화를 적절하게 처리합니다.