[TIL] 0104

오늘은 시리즈 생성과 작성 페이지의 중복코드를 제거하는 작업을 했다.

중복 코드 제거 작업

• 시리즈 생성과 작성 페이지의 겹치는 form부분 코드를 SeriesForm컴포넌트로 분리
• SeriesForm컴포넌트에서만 쓰이는 컴포넌트를 내부 컴포넌트로 옮김
• SeriesForm컴포넌트에 props를 넘겨준 edit이라는 bool값에 따라 생성 또는 수정 로직 조건부로 실행되도록 함
• WriteSeriesPage와 EditSeriesPage에 SeriesForm컴포넌트를 작성하는데
• EditSeriesPage에서는
  • SeriesForm컴포넌트에 edit속성과 get요청 응답 데이터를 props으로 넘겨줌.
    
    

edit Props에 따라 생성 또는 수정 로직 조건부로 실행되도록 하기

수정할 시 추가되는 로직 또는 생성할 때와 다른 부분들

• 파라미터 값을 받아와 get요청을 해서 받은 데이터로 form 초기값을 설정해줘야함

  UpdateSeriesPage에서 파라미터 값을 받아와 get요청을 하고 파라미터,응답 데이터를 SeriesForm의 props으로 넘겨준다

• 생성 요청과 수정 요청 시의 보내야하는 데이터의 구성이 다르다

  각 데이터 모델을 선언하고 edit props유무에 따라 할당해준다

	    const postRequest = {
              ...values,
              uploadDate: checkedInputs,
              articleCount: Number(values.articleCount),
              price: Number(values.price),
            };
            const putRequest = {
              writeId: values.writeId,
              title: values.title,
              introduceText: values.introduceText,
              introduceSentence: values.introduceSentence,
              uploadDate: checkedInputs,
              uploadTime: values.uploadTime,
            };

            const formData = new FormData();
            formData.append('file', values.thumbnailFile);
            formData.append(
              'request',
              jsonBlob(edit ? putRequest : postRequest),
            );

• validation로직이 하나 더 있다

  작성해놓고 edit props이 있을 때만 실행해준다.

• 비활성화 해야하는 input요소들이 있다

  edit props의 값(bool)을 해당 input들의 disabled속성에 할당한다

부모와 상관없이 전체 너비를 유지하는 방법

SeriesForm에서 이미지를 업로드 하는 부분만 브라우저 전체 너비로 설정하고 싶었다
(다른 부분들은 양옆 여백이 있고 가운데 정렬)
Wrapper에서 ImageUpload컴포넌트만 포함시키지 않는 방법도 있었는데
그러러면 page에서가 아닌, SeriesForm에서 Wrapper를 적용해야 해서 코드가 깔끔하지 못했고,
Wrapper컴포넌트의 사용 목적(전체 콘텐츠를 감싸서 공통 레이아웃을 적용해주기 위함)랑 멀어지는 것 같았다.
서치를 해보니 부모와 상관없이 전체 너비를 유지하는 방법이 있어서 적용했다.

const StyledImageUpload = styled(ImageUpload)`
  width: 100vw;
  margin-left: calc(-50vw + 50%);
`;

출처