[박다인] sprint6

[canofmato]

요구사항

기본

• 상품 등록 페이지 주소는 “/additem” 입니다.
• 페이지 주소가 “/additem” 일때 상단네비게이션바의 '중고마켓' 버튼의 색상은 “3692FF”입니다.
• 상품 이미지는 최대 한개 업로드가 가능합니다.
• 각 input의 placeholder 값을 정확히 입력해주세요.
• 이미지를 제외하고 input 에 모든 값을 입력하면 ‘등록' 버튼이 활성화 됩니다.
• API를 통한 상품 등록은 추후 미션에서 적용합니다.

심화

• 이미지 안의 X 버튼을 누르면 이미지가 삭제됩니다.
• 추가된 태그 안의 X 버튼을 누르면 해당 태그는 삭제됩니다.

주요 변경사항

• 상품 등록 input 작성 시 "등록" 버튼 활성화
• input price태그에서 -webkit-appearance:none 적용

스크린샷

멘토에게

• api주소 환경변수 설정을 하려고했는데 제가 sprint5를 CRA로 진행을 해 VITE_BASE_URL을 사용하지 못해 REACT_APP_BASE_URL로 했는데 실행시켰을 때 api 연동이 안되어 결국 환경변수를 설정을 못했는데 CRA일 때는 어떻게 설정하나요?
• 추후 전체 리팩토링 예정입니다.

[addiescode-sj]

수고하셨습니다!

주요 리뷰 포인트

• 상태 객체 묶음 작게 분리해서 리렌더링 횟수 줄이기
• 인라인 함수 복잡도 줄이기, 코드 중복 제거하기
• 에러 상태 개선하기

[addiescode-sj]

React의 Batch 업데이트 특성을 생각해서 이렇게 처리하신건가요? 굳굳!! 👍

[addiescode-sj]

인라인으로 이렇게 작성해주는것보다는 핸들러를 따로 만들어주어 리턴문을 최대한 깔끔히 작성해주는게 좋아요. 그리고 해당 코드블락이 중복되는것같은데 공통 함수로 추출해서 중복을 제거해줄까요?

const validateImageUpload = () => {
  if (newItem.images) {
    setImageAlert(`*이미지 등록은 최대 1개까지 가능합니다.`);
    return;
  }
}

[addiescode-sj]

form state를 다루고있네요!
상태 객체가 너무 큰 묶음으로 관리되다보면 불필요한 리렌더링이 자주 발생될거예요.

아래와 같이 관련된 상태끼리 묶어서 분리해볼까요?

const [formData, setFormData] = useState({
  name: "",
  description: "",
  price: "",
});
const [tags, setTags] = useState([]);
const [tagInput, setTagInput] = useState("");
const [images, setImages] = useState(null);

[addiescode-sj]

에러 상태또한, 아래와 같이 이미지 에러에 관련된 상태 메시지를 공유하지않고 필드마다 각각 다른 에러 상태를 가질수있게끔 개선해보면 좋을것같아요.

const [errors, setErrors] = useState({
  image: "",
  name: "",
  description: "",
  price: "",
  tags: ""
});

[addiescode-sj]

여기 fragment가 필요없습니다 :)

[addiescode-sj]

질문에 대한 답변

멘토에게

• api주소 환경변수 설정을 하려고했는데 제가 sprint5를 CRA로 진행을 해 VITE_BASE_URL을 사용하지 못해 REACT_APP_BASE_URL로 했는데 실행시켰을 때 api 연동이 안되어 결국 환경변수를 설정을 못했는데 CRA일 때는 어떻게 설정하나요?
• 추후 전체 리팩토링 예정입니다.

CRA로 진행하셨으면 .env파일 만들고 환경변수 설정 시 앞에 REACT_APP_ 붙여주시는게 맞습니다!
아래 아티클 참고해보세요 :)

참고