자바스크립트 Immer를 사용하여 사진 갤러리 애플리케이션 만들기

27 Sep 2023

immer

Immer

개요

이번 블로그 포스트에서는 자바스크립트 Immer 라이브러리를 사용하여 사진 갤러리 애플리케이션을 만드는 방법을 알아보겠습니다. Immer는 불변성 관리를 간편하게 도와주는 라이브러리로, 복잡한 상태 관리를 단순화하고 변경 사항을 추적하는 기능을 제공합니다.

Immer 소개

Immer는 자바스크립트의 불변성을 관리하기 위한 라이브러리입니다. Immer를 사용하면 상태를 직접 수정하지 않고도 불변성을 유지할 수 있습니다. 이를 통해 코드의 가독성을 향상시키고 버그를 줄일 수 있습니다.

사진 갤러리 애플리케이션 만들기

프로젝트 설정 먼저 프로젝트를 생성하고 필요한 의존성을 설치합니다.
```
npm init -y
npm install immer
```
상태 관리 상태 관리를 위한 Immer를 사용하기 위해, 프로젝트에서 Immer를 import합니다.
```
import produce from 'immer';
```
초기 상태 생성
```
const initialState = {
  photos: []
};
```
액션 정의 ```javascript const ADD_PHOTO = ‘ADD_PHOTO’;

function addPhoto(photo) { return { type: ADD_PHOTO, payload: photo }; }

5. 리듀서 작성
```javascript
function reducer(state = initialState, action) {
  switch (action.type) {
    case ADD_PHOTO:
      return produce(state, draftState => {
        draftState.photos.push(action.payload);
      });
    default:
      return state;
  }
}

애플리케이션 구현 ```javascript import React, { useState } from ‘react’; import { useDispatch, useSelector } from ‘react-redux’; import { addPhoto } from ‘./actions’;

function App() { const [photoUrl, setPhotoUrl] = useState(‘’); const photos = useSelector(state => state.photos); const dispatch = useDispatch();

const handleSubmit = (event) => { event.preventDefault(); dispatch(addPhoto(photoUrl)); setPhotoUrl(‘’); }

return ( <div> <h1>사진 갤러리</h1> <form onSubmit={handleSubmit}> <input type=”text” value={photoUrl} onChange={(event) => setPhotoUrl(event.target.value)} /> </form> <ul> {photos.map((photo, index) => ( <li key={index}> <img src={photo} alt=”사진” /> </li> ))} </ul> </div> ); }

export default App;

7. 애플리케이션 실행
```javascript
npm start

결론

Immer를 사용하여 사진 갤러리 애플리케이션을 만들어 보았습니다. Immer는 불변성 관리를 간단하게 처리해주어 복잡한 상태 관리를 단순화하는데 도움을 줍니다. Immer를 사용하여 더 효과적인 자바스크립트 개발을 진행해보세요.

#Immer #자바스크립트