[REACT] 유용한 라이브러리 모음

ShortId

랜덤한 id를 자동으로 생성해준다.

npm i shortid

// 사용시
id: shortId.generate()

Faker

데이터를 자동으로 생성해준다.

npm i @faker-js/faker

 

npm i @faker-js/faker

npm i @faker-js/faker

https://www.npmjs.com/package/@faker-js/faker?activeTab=code 

@faker-js/faker

Immer

불변성을 지키면서 데이터를 수정하는 부분에서 쓰이는 라이브러리로, 리덕스 reducer 부분에서 쓰면 불변성때문에 복잡했던 코드를 매우 심플하게 변경할 수 있다.

hook 버전은 useImmer가 있다.

npm i immer

사용방법은 아래와 같다.

import produce from "immer";

const reducer = (state = initialState, action) => {
    // 1. return produce()로 switch문을 감싸준다.
    return produce(state, (draft)=>{
        switch (action.type) {
        case ADD_POST_REQUEST:
                // 2. 기존에 있던 return문을 제거하고 ...state로 되어있는 것들은 지운다. 변경되는 값 앞에 'draft'를 추가해준다. 그럼 알아서 불변성으로 변경해준다.
                draft.addPostLoading = true;
                draft.addPostDone = false;
                draft.addPostError = null;
                break;
                
        case ADD_POST_SUCCESS:
                // ✨3. 배열을 복사하며 불변성을 지켰던 것들이 알아서 지켜지니 unshift()만 사용해도 된다.
                draft.mainPosts.unshift(dummyPost(action.data));
                draft.addPostLoading = false;
                draft.addPostDone = true;
                break;
        
        default:
                break;
    }
    })
};

 

SWR