이번 프로젝트의 존재 이유 돌보미 관리.

해당 서비스는 회원가입 시 데이터의 일부분만 입력받은 뒤 차후에 외부의 소통창구를 통해 자세한 경력을 전달 받은 뒤 관리자가 돌보미의 정보를 수정해주어야 한다.

수정해주어야 하는 정보

총 10가지

1. 돌보미 사진
2. 시급
3. 뱃지 3개
4. 육아경험
5. 보육경력
6. 관련 자격증
7. 섬범죄 경력
8. 신용 불량 여부
9. 보건증 여부
10. 승인 상태

이 모든 정보를 한꺼번에 업로드하기 위해 모든 상태를 모든 컴포넌트의 상단인 page에서 관리해야하는데 이러면 props로 모든 상태와 상태변경함수를 내려줘야하기 떄문에 비효율적이라고 생각하였다.

따라서 recoil을 사용해서 상태를 관리하기로 했다.

아래는 본인이 생각한 장단점이다.

장점:

1. 코드가 깔끔해짐(props가 없음, 모든 상태를 선언할 필요가 없음)
2. 추후 컴포넌트 간 상호작용이 생기면 반영할 수 있다.

단점:

1. 수정해야 하는 변수가 추가된다면 자료형을 수정해야 함
2. recoil 프레임워크에 의존하게 됨. (의도치 않은 버그 발생 시 난처할 수도 있음)
3. 하나의 상태를 변경해도 전체 돌보미의 상태를 변경하기 때문에 화면 전체에 리렌더링이 일어남.

돌보미 정보 수정

const handleSubmit = async () => {
    if (uid === undefined || sitter === null) return;
    setHideProgessBar(null);
    if (imageSrc !== null) {
      await uploadImage({
        imageSrc,
        filename: uid,
        path: STORAGE.sitterImage,
        onProgressChange: setUploadProgess,
      });
    }
    await updateUser(
      { user: sitter },
      {
        onSuccess: () => {
          setUploadProgess(100);
          setUpdateSuccess(true);
        },
      }
    );
    setTimeout(() => {
      setHideProgessBar(true);
      setUploadProgess(0);
      setUpdateSuccess(false);
    }, 2000);
  };

돌보미 관리 페이지에서 사용하는 update 함수다.

• 이미지 업로드
• 유저 업데이트
• 2초간 성공 메시지 출력

순서로 진행된다.

update 자체는 어렵지 않지만 상태관리가 상당히 어렵다.

아래 시급 관리에서 시급을 변경할 때 sitter의 시급을 수정한다 하면

해당 텍스트 필드의 onChange 함수는 setSitter를 immutable하게 수정해주어야 한다.

<TextField
          className=" bg-white"
          id="firstLabel"
          variant="outlined"
          type="number"
          value={sitter?.sitterInfo?.hourlyWage ?? 10000}
          onChange={(e) => {
            setSitter({
              ...sitter,
              sitterInfo: {
                ...sitter?.sitterInfo,
                hourlyWage: Number(e.target.value),
              },
            } as IUser);
          }}
        />

단순한 수치나 문자열 수정이 아닌 객체를 추가해야 할 경우(육아 경험, 보육 경력, 자격증)

자료형이 객체 배열로 되어있기 때문에 조금 더 상세하게 상태를 관리해주어야한다.

아래는 육아경험을 추가하는 함수다.

//app/components/sitterDetailPage/childCareExpManagement/addChildCareExpModal.tsx

const handleSubmit = () => {
    if (startDate === null || endDate === null) return;
    if (sitter?.sitterInfo === undefined) return;

		//1. 입력된 상태를 객체로 만들어 준다.
    const newChildCare: IChildCareExp = {
      type,
      place,
      startYear: startDate.getFullYear(),
      startMonth: startDate.getMonth(),
      endYear: endDate.getFullYear(),
      endMonth: endDate.getMonth(),
    };

    let newChildCareList: IChildCareExp[] = [];
    if (sitter?.sitterInfo?.childCareExperience !== undefined)
			//2. 복사본을 만든다.
      newChildCareList = [...(sitter?.sitterInfo?.childCareExperience ?? [])];
			//3. 복사본에 객체를 추가한다.    
			newChildCareList.push(newChildCare);
		//4. 원본을 수정한다.    
    setSitter({
      ...sitter,
      sitterInfo: {
        ...sitter?.sitterInfo,
        childCareExperience: newChildCareList,
      },
    } as IUser);
    onConfirm();
  };

회고

초반에 상태 선언을 줄이고 싶어 recoil를 사용하기로 했지만 이후 상태를 변화하는 과정에서 오히려 코드의 양이 늘어나버렸다. setSitter{.......}

다음 프로젝트를 진행할 때는 상태를 정리하여 customhook으로 만들어 관리하고 주객이 전도되는 상황을 방지하는 것이 좋을 것 같다.