일기[TIL] - 68

오늘은 디자인을 받아서 여러가지 추가된 기능에 대해서 작성하고 있었습니다.

zustand store 배열안에 객체 변경하기

기존의 객체를 변경한 다음에 배열에 추가하고 다시 작성하는 식으로 구현하였습니다.
input form을 여러개 만들어서 즉시 수정할 수 있게 만들어야 했습니다.

그래서 객체를 사용하던걸 배열로 바꾼다음에 배열을 map으로 돌려서 length만큼 input form이 나오게 작성하였습니다.

스토어 값 변경의 경우 아래처럼 작성하여 값을 변경할 수 있게 작성하였습니다.

setProjectName: (arg, index) =>
        set((item) => ({
            projects: [
                ...item.projects.map((project, idx) => {
                    if (idx === index) {
                        return { ...project, name: arg };
                    } else {
                        return { ...project };
                    }
                }),
            ],
        })),

zustand를 사용하여 구현이 되어있어서 기존의 방식이랑 다르게 변경해야되서 좀 많이 고민했던거 같습니다.

위의 방식처럼 작성하여 배열안에 객체를 변경하는 방식으로 하였습니다.