질문
•
React에서 효율적인 상태 관리를 위해 컴포넌트 계층이 깊어질 때 발생하는 Prop Drilling 문제를 설명하고, 이를 해결하기 위한 방법들(Context API, useReducer, 상태 관리 라이브러리 등)과 각각의 장단점을 설명하세요.
질문의도
•
Prop Drilling 문제를 이해하고, 이를 해결하기 위한 다양한 상태 관리 전략(Context API, useReducer, Redux 등)을 알고 있는지를 평가합니다. 각 방법의 장단점을 비교하여 설명하고, 실무에서 상황에 맞는 적절한 상태 관리 방법을 선택할 수 있는 능력을 확인합니다.
Props의 개념
•
React에서 useState는 컴포넌트 내부에서 상태를 관리할 수 있도록 도와주는 Hook입니다. 예를 들어, 다음과 같이 사용할 수 있습니다.
const [isLoading, setIsLoading] = useState(false);
JavaScript
복사
•
이 코드는 isLoading이라는 상태를 컴포넌트 내에서 관리하며, 이 값을 하위 컴포넌트에 props로 전달할 수 있습니다. 하지만 하위 컴포넌트에 전달해야 할 props가 1~2개일 경우에는 큰 문제가 없지만, 10~20개가 된다면 상황은 달라집니다. 여러 계층을 거쳐야 하므로 관리가 복잡해질 수 있습니다.
Prop Drilling 문제
•
정의: Prop Drilling은 상위 컴포넌트에서 하위 컴포넌트로 데이터(Props)를 전달하는 과정에서 많은 중간 컴포넌트를 거쳐야 하는 상황을 말합니다.
•
문제점: 여러 계층을 거쳐야 하므로 코드가 복잡해지고, 필요한 데이터를 찾기 어려워지며, 불필요한 렌더링이 발생할 수 있습니다.
Prop Drilling 해결 방법
•
Context API
◦
설명: 전역 상태를 관리할 수 있는 방법으로, 여러 컴포넌트에서 쉽게 데이터를 공유할 수 있게 해줍니다.
◦
장점: Prop Drilling을 방지하고, 깊은 컴포넌트에서도 쉽게 데이터에 접근할 수 있습니다.
◦
단점: 상태 변경 시 모든 구독 컴포넌트가 리렌더링되므로 성능에 영향을 줄 수 있습니다.
•
useReducer
◦
설명: 상태 관리를 위한 훅으로, 복잡한 상태 로직을 쉽게 관리할 수 있도록 돕습니다.
◦
장점: 여러 상태를 함께 관리할 수 있으며, 코드가 더 깔끔해집니다.
◦
단점: 초기 설정이 복잡할 수 있습니다.
•
Redux
◦
설명: 전역 상태 관리를 위한 라이브러리로, 상태를 중앙 집중식으로 관리합니다.
◦
장점: 상태 변화가 명확하게 정의되어 있어 디버깅이 용이하고, 여러 컴포넌트에서 쉽게 상태를 공유할 수 있습니다.
◦
단점: 설정과 학습 곡선이 높아 작은 프로젝트에서는 과도한 솔루션이 될 수 있습니다.
경험
Redux의 도입
•
이 문제를 해결하기 위해 Redux를 사용하기로 결정했습니다. Redux는 전역 상태 관리를 위한 라이브러리로, 복잡한 상태를 효율적으로 관리할 수 있게 해줍니다.
Redux란?
•
Redux는 전역 상태를 관리하는 도구로, 여러 컴포넌트에서 상태를 쉽게 공유할 수 있도록 합니다. 프로젝트에서 처음 Redux를 도입했을 때는 reducer와 action 등을 설정하는 것이 복잡하게 느껴졌습니다. 하지만 Redux Toolkit의 Slice 기능을 통해 복잡한 설정을 간소화할 수 있었습니다.
Slice의 개념
•
Slice는 Redux의 reducer와 action을 함께 정의할 수 있는 기능으로, 상태 관리를 더 쉽게 해줍니다. 예를 들어, 다음과 같이 Slice를 정의할 수 있습니다.
export type summaryEvent = {
eventId: number
eventMainImage: string
eventTitle: string
eventLocation: string
}
type HomeSliceStateType = {
hashtagId: number[]
summaryEvents: summaryEvent[]
isLoading: boolean
}
const initialState: HomeSliceStateType = {
hashtagId: [1, 2, 3, 4, 5, 6, 7, 8],
summaryEvents: [],
isLoading: true
}
export const homeSlice = createSlice({
name: 'Home',
initialState: initialState,
reducers: {
addSummaryEvent(state, action: PayloadAction<summaryEvent>) {
state.summaryEvents.push(action.payload)
},
setLoading(state, action: PayloadAction<boolean>) {
state.isLoading = action.payload
},
deleteAll(state) {
state.summaryEvents = []
state.isLoading = true
state.hashtagId = [1, 2, 3, 4, 5, 6, 7, 8]
}
}
})
TypeScript
복사
•
위 코드는 실제 모임 프로젝트에서 사용된 homeSlice의 예시입니다. 이렇게 Slice를 사용하면 상태 초기화 및 액션 정의가 간편해집니다.
Redux의 장점
1.
코드의 간결성: 반복된 코드의 양을 줄일 수 있습니다.
2.
상태 공유 용이: 상위 또는 전혀 다른 컴포넌트에서도 상태를 쉽게 공유할 수 있습니다.
Redux의 단점
1.
잘못된 데이터 전송 가능성: 전역 상태 관리의 특성상, 다른 개발자가 잘못된 데이터를 전달할 수 있습니다. 하지만 TypeScript를 사용하면 어느 정도 방어가 가능합니다.
2.
학습 곡선: 비동기 처리 및 Redux의 구조를 이해하는 데 시간이 걸릴 수 있어, 초보자에게는 어려울 수 있습니다.