1. React에서 클래스형 컴포넌트를 지양하는 이유
React에서 클래스형 컴포넌트를 사용하지 않는 이유는 다음과 같습니다:
- 복잡한 문법과 생명주기 관리: 클래스형 컴포넌트는 상속 구조를 사용하고, 복잡한 생명주기 메서드를 포함합니다. 이로 인해 컴포넌트의 이해와 유지보수가 어려울 수 있습니다.
- 코드의 가독성과 간결성: 클래스형 컴포넌트는 constructor, render 메서드 등의 추가적인 문법을 요구하며, this 키워드를 사용해야 합니다. 이는 코드의 가독성과 간결성을 저하시킬 수 있습니다.
- 성능 이슈: 클래스형 컴포넌트는 더 많은 메모리를 사용하고, 인스턴스를 생성할 때 추가적인 비용이 발생합니다. 또한, 클래스형 컴포넌트는 바인딩과 메서드 호출에 대한 오버헤드가 있을 수 있습니다.
- 함수형 컴포넌트와 훅의 도입: React 16.8 버전 이후부터 함수형 컴포넌트와 훅(Hook)이 도입되었습니다. 함수형 컴포넌트는 클래스형 컴포넌트와 비교하여 간단하고 명확한 문법을 가지며, 훅을 통해 상태 관리와 생명주기 기능을 활용할 수 있습니다. 이로 인해 개발자들은 함수형 컴포넌트와 훅을 선호하게 되었습니다.
- 더 나은 추상화와 컴포넌트 재사용성: 함수형 컴포넌트는 순수 함수처럼 동작하고, 렌더링 결과를 반환하는 형태로 작성됩니다. 이로 인해 함수형 컴포넌트는 더 나은 추상화를 제공하며, 컴포넌트의 재사용성을 높일 수 있습니다.
따라서, React에서는 클래스형 컴포넌트보다 함수형 컴포넌트와 훅을 주로 사용하고, 함수형 프로그래밍의 개념과 원칙에 따라 개발하는 것을 권장합니다.
2.Redux toolkit이란
Redux Toolkit은 Redux를 사용할 때 개발자들에게 편의성을 제공하고 생산성을 향상시키기 위한 공식적인 도구 세트입니다. Redux Toolkit은 Redux의 핵심 기능을 간소화하고 보일러플레이트 코드를 최소화하여 개발자들이 더 간편하게 상태 관리를 할 수 있도록 도와줍니다.
Redux Toolkit이 제공하는 기능과 도구는 다음과 같습니다:
- configureStore(): Redux store를 설정하는 함수입니다. Redux Toolkit에서 제공하는 configureStore 함수를 사용하면 Redux store를 초기화하고 필요한 미들웨어와 Redux DevTools를 설정할 수 있습니다.
- createAction(): 액션을 생성하는 함수입니다. createAction 함수를 사용하면 액션 생성자 함수를 직접 작성할 필요 없이 간단하게 액션을 생성할 수 있습니다.
- createReducer(): 리듀서를 생성하는 함수입니다. createReducer 함수를 사용하면 보일러플레이트 코드 없이 간단하게 리듀서를 작성할 수 있습니다. createReducer 함수는 immer 라이브러리를 내부적으로 사용하여 불변성을 유지하면서 상태를 업데이트할 수 있습니다.
- createSlice(): 리듀서와 액션들을 함께 정의하는 함수입니다. createSlice 함수를 사용하면 리듀서와 액션들을 한 곳에서 정의하고 Redux Toolkit이 자동으로 액션 생성자 함수와 리듀서를 생성해줍니다.
- createAsyncThunk(): 비동기 작업을 처리하는 액션 생성자 함수를 생성하는 함수입니다. createAsyncThunk 함수를 사용하면 비동기 작업을 처리하는 액션을 간단하게 작성할 수 있습니다. Redux Toolkit은 Promise 기반의 비동기 작업을 처리하기 위해 createAsyncThunk를 제공합니다.
- createSelector(): 메모이제이션된 셀렉터 함수를 생성하는 함수입니다. createSelector 함수를 사용하면 상태의 변화가 없는 경우 이전 결과를 재사용하여 성능을 최적화할 수 있습니다.
Redux Toolkit은 Redux를 사용하는 개발자들에게 더욱 편리한 개발 경험을 제공하고, 보일러플레이트 코드를 최소화하여 코드의 가독성과 유지보수성을 향상시킵니다.
3.React의 생명주기
React 컴포넌트의 생명주기는 컴포넌트가 생성되고 소멸될 때까지의 단계를 의미합니다. React 16.3 버전 이전에는 클래스형 컴포넌트에서 생명주기 메서드를 사용하여 이러한 단계를 제어했지만, 함수형 컴포넌트에서는 React Hook을 사용하여 생명주기와 관련된 작업을 수행합니다.
React 컴포넌트의 주요 생명주기 메서드는 다음과 같습니다:
1. Mounting (생성 단계)
- constructor(): 컴포넌트가 생성될 때 호출되며, 초기 상태(state)를 설정하고 이벤트 핸들러를 바인딩합니다.
- static getDerivedStateFromProps(): props를 기반으로 state를 설정하거나 업데이트합니다. (React 16.3 이후 추가된 메서드)
- render(): 컴포넌트의 UI를 렌더링합니다.
- componentDidMount(): 컴포넌트가 DOM에 삽입된 후 호출되며, 비동기 작업이나 외부 데이터 로딩과 같은 초기화 작업을 수행합니다.
2. Updating (업데이트 단계)
- static getDerivedStateFromProps(): props를 기반으로 state를 업데이트합니다.
- shouldComponentUpdate(): 컴포넌트의 업데이트 여부를 결정합니다. 성능 최적화를 위해 사용될 수 있습니다.
- render(): 컴포넌트의 UI를 업데이트하여 다시 렌더링합니다.
- componentDidUpdate(): 컴포넌트의 업데이트가 DOM에 반영된 후 호출되며, 비동기 작업이나 상태 변경에 따른 추가 작업을 수행합니다.
3. Unmounting (소멸 단계)
- componentWillUnmount(): 컴포넌트가 DOM에서 제거되기 전에 호출되며, 이벤트 핸들러 해제, 타이머 정리 등의 클린업 작업을 수행합니다.
React Hook을 사용하는 함수형 컴포넌트에서는 useEffect Hook을 통해 생명주기와 관련된 작업을 수행합니다. useEffect는 컴포넌트가 생성, 업데이트, 소멸될 때 특정 작업을 수행할 수 있도록 도와줍니다. useEffect를 사용하여 componentDidMount, componentDidUpdate, componentWillUnmount와 같은 동작을 대체할 수 있습니다.
React 17 버전 이후에는 더 세부적인 생명주기 단계로 분리된 리액트 생명주기를 사용할 수 있는 Concurrent Mode와 함께 useTransition Hook도 도입되었습니다. 이를 통해 렌더링 우선
순위를 조절하고 부드러운 사용자 경험을 제공할 수 있습니다.
참고로, 클래스형 컴포넌트와 함수형 컴포넌트의 생명주기는 서로 다르기 때문에, React를 사용할 때에는 해당 버전의 문서와 리액트 훅의 사용법을 참조하여 정확한 생명주기를 이해하고 활용하는 것이 중요합니다.
4.Mobx
MobX는 JavaScript 상태 관리 라이브러리로, React와 함께 사용되는 경우 많이 애용됩니다. MobX는 간단하고 직관적인 API를 제공하여 복잡한 상태 관리를 간소화하고, 애플리케이션의 반응성과 성능을 향상시키는 데 도움을 줍니다.
MobX의 주요 특징은 다음과 같습니다:
- Observable 상태: MobX는 상태를 Observable 객체로 변환하여 관찰 가능하게 만듭니다. 이러한 Observable 상태는 애플리케이션에서 변화가 발생할 때 자동으로 추적되고 업데이트됩니다.
- 자동적인 리액트: MobX는 자동으로 상태 변경을 감지하고, 변경된 상태에 따라 관련된 컴포넌트를 자동으로 업데이트합니다. 이는 React 컴포넌트를 작성할 때 명시적인 업데이트 로직을 작성하지 않아도 되는 장점을 제공합니다.
- 간단한 문법: MobX는 단순하고 직관적인 문법을 제공하여 상태 관리를 쉽게 할 수 있습니다. 상태 변경에 대한 액션을 작성하고, 이를 실행하여 상태를 변경할 수 있습니다.
- 컴퓨티드 값: MobX는 컴퓨티드 값(Computed Value)를 제공하여 상태에 기반한 파생된 값들을 효율적으로 계산하고 캐싱할 수 있습니다. 이는 성능 개선과 코드 가독성을 향상시키는 데 도움을 줍니다.
- 액션과 리액션: MobX는 액션(Action)과 리액션(Reaction)의 개념을 제공하여 상태 변경을 관리하고, 관련된 작업을 수행할 수 있습니다. 액션은 상태를 변경하는 함수를 의미하며, 리액션은 상태 변경에 대한 반응으로 추가 작업을 수행하는 함수를 의미합니다.
MobX는 React 외에도 Angular, Vue 등 다양한 프레임워크와 함께 사용할 수 있으며, React와 함께 사용하는 경우 MobX React와의 통합을 통해 더욱 효율적인 상태 관리를 구현할 수 있습니다.
5.상태관리 라이브러리
React 애플리케이션에서 사용할 수 있는 주요 상태 관리 라이브러리는 다음과 같습니다:
- React Context: React에 기본적으로 내장된 상태 관리 기능입니다. Context를 사용하면 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 수 있습니다. 하지만 복잡한 상태 관리나 전역 상태 관리에는 다소 제한적일 수 있습니다.
- Redux: 가장 인기 있는 상태 관리 라이브러리로, 전역 상태를 관리하는데 사용됩니다. Redux는 단방향 데이터 흐름을 따르며, 상태 변경을 예측 가능한 방식으로 관리합니다. Redux는 액션(Action), 리듀서(Reducer), 스토어(Store) 등의 개념을 사용하여 상태를 업데이트하고, 컴포넌트 간에 상태를 공유합니다. Redux Toolkit과 함께 사용하면 보일러플레이트 코드를 최소화하고 개발 생산성을 향상시킬 수 있습니다.
- MobX: 간단하고 직관적인 API를 제공하는 상태 관리 라이브러리로, React와 함께 사용될 때 주로 선택되는 라이브러리입니다. MobX는 Observable 상태를 사용하여 상태의 변화를 감지하고, 관련된 컴포넌트를 자동으로 업데이트합니다. MobX는 리액트 컴포넌트를 작성할 때 상태 변경에 대한 명시적인 업데이트 로직을 작성하지 않아도 되는 장점을 가지고 있습니다.
- Zustand: 간단하고 가벼운 상태 관리 라이브러리로, Hook 기반으로 동작합니다. Zustand는 React의 내장 상태 Hook(useState)과 유사한 API를 제공하며, 전역 상태를 관리하는데 사용됩니다. Zustand는 Redux와 MobX에 비해 보일러플레이트 코드가 적으며, 간단한 상태 관리에 적합한 선택지입니다.
- Recoil: 페이스북에서 개발한 상태 관리 라이브러리로, React 애플리케이션에서 전역 상태를 효율적으로 관리하기 위해 사용됩니다. Recoil은 React의 특징인 컴포넌트 계층 구조를 활용하여 상태를 관리하며, 선택적인 지연 로딩과 코드 스플리팅을 지원합니다.
이 외에도 MobX-State-Tree, Effector, Valtio 등의 다양한 상태 관리 라이브러리가 있으며, 선택할 때 프로젝트의 규모, 복잡성, 개발자 선호도 등을 고려해야 합니다. 각 라이브러리는 고유한 특징과 사용 방법을 가지고 있으므로, 문서와 예제를 참고하여 적합한 상태 관리 라이브러리를 선택할 수 있습니다.
6.보일러플레이트 코드
보일러플레이트 코드(Boilerplate code)는 어떤 작업을 수행하기 위해 반복적으로 작성되는 일반적이고 표준화된 코드를 말합니다. 이는 특정한 작업이나 패턴을 구현하기 위해 항상 필요한 기본 코드 또는 템플릿으로 생각할 수 있습니다.
보일러플레이트 코드는 주로 프레임워크나 라이브러리의 초기 설정, 구조, 표준 코드 패턴 등을 포함합니다. 예를 들어, React에서 새로운 컴포넌트를 만들 때, 초기 상태 설정, 라이프사이클 메서드의 구현, 이벤트 핸들러의 바인딩 등은 보일러플레이트 코드의 일부입니다.
보일러플레이트 코드는 개발자가 반복적이고 일상적인 작업에 시간을 소비하지 않고 더 쉽게 시작할 수 있도록 도와줍니다. 또한 팀 간의 일관된 코드 작성을 장려하고, 프로젝트의 구조와 표준을 정의하는 데 도움이 됩니다.
보일러플레이트 코드는 일반적으로 템플릿, 스캐폴딩 도구, 코드 생성기 등을 통해 자동으로 생성하거나, 프레임워크와 라이브러리의 문서와 예제에서 참고하여 수동으로 작성할 수 있습니다.