[Project] Pre-onboarding: Sir.Loin- 체크박스를 통한 카테고리 지정 / 드롭다운 메뉴

Cottonmycotton·2022년 11월 7일
0

Project

목록 보기
9/10
post-thumbnail

🙋🏻‍♀️ 프로젝트 담당 업무

1. 카테고리 지정

  • 체크박스 선택을 통해 해당 상품에 카테고리를 지정할 수 있음
  • '체크박스 지정 해제' 또는 카테고리 X버튼을 통해 카테고리 지정을 해제할 수 있음

1) 카테고리 리스트와 상품명 상수데이터로 관리하기

함수 안에 있으면 리렌더 될때마다 데이터가 불러와지는데, 상수데이터는 변하지 않는 데이터이므로 메모리 누수를 하면서 함수 안에 위치시킬 필요가 없다.

const CATEGORY_LIST = [
  { id: 0, data: '구이용' },
  { id: 1, data: '안심' },
  { id: 2, data: '등심' },
  { id: 3, data: '채끝' },
  { id: 4, data: '특수' },
  { id: 5, data: '양념' },
  { id: 6, data: 'Bone' },
  { id: 7, data: '선물제안' },
  { id: 8, data: '이벤트' },
  { id: 9, data: '요리용' },
  { id: 10, data: '무료배송' },
  { id: 11, data: '세트' },
];

2) 체크박스, 카테고리 선택 및 해제를 통한 상품 기본 정보 노출

  • 자세한 설명은 주석처리
function ProdBasicInfo() {
  
  // 카테고리를 클릭했을 때 값을 바꿔주는 state. 초기값은 빈배열.
  const [checkedList, setCheckedList] = useState([]);
 
  // onChange이벤트를 통해서 checked(Boolean)값, item(value)값을 받아온다.
  const onCheckedElement = (checked, item) => {
    // check되었을때 check된 value값을 빈배열인 checkedList에 업데이트를 해준다
    if (checked) {
      setCheckedList([...checkedList, item]);
    } 
   /* filter함수는 반환값이 true인것만 구성된 새로운 배열을 반환한다.
    클릭된값이 item이고 item이 el랑 다른 경우가 true, 즉 클릭된 요소가 빠진 배열을 반환하는 것임. */
    else if (!checked) {
      setCheckedList(checkedList.filter(el => el !== item));
    }
  };
  
  /*체크박스가 아닌 카테고리 배너의 x를 클릭했을 때 해제되는 기능.
  위에있는 체크박스 해제하는 원리와 동일하게 동작함!*/
  const onRemove = item => {
    setCheckedList(checkedList.filter(el => el !== item));
  };
  
return (
      <S.CategoryContainer>
        <S.SubTitle>카테고리 *</S.SubTitle>
        <S.SelectContainer>
          <S.CheckBox>
  // 상수데이터 카테고리 리스트에 맵을 활용하여 렌더링 함
            {CATEGORY_LIST.map(item => {
              return (
             /* 고유 key값 부여. 
             배열을 렌더링 했을 때 key값을 통해 배열의 어떤 원소에 변화가 있었는지를 알아낸다.*/
                <S.Label key={item.id}>
  /*여기서 Check는 Input태그. type을 체크박스로 지정하고 
  value값은 CATEGORT_LIST의 data값으로 지정*/
                  <S.Check
                    type="checkbox"
                    value={item.data}
// onChange이벤트를 통해 변화를 감지하고 onCheckedElement함수에 check여부와 check된 value값을 전달해준다.
                    onChange={e => {
                      onCheckedElement(e.target.checked, e.target.value);
                    }}
                    // 선택된 상태를 말하는 것. checkeList에 요소가 있으면 true, 없으면 false.
                    checked={checkedList.includes(item.data) ? true : false}
                  />
// 체크박스 리스트에 출력될 data값.
                  <S.Type>{item.data}</S.Type>
                </S.Label>
              );
            })}
          </S.CheckBox>
          <S.SelectedBox>
            /* 카테고리란
           checkedList의 길이가 0이라면 빈배열이란 뜻으로 기본값이 '카테고리를 지정해 주세요' 문구를 출력한다.*/
            {checkedList.length === 0 && (
              <S.AlertMessage>카테고리를 지정해 주세요.</S.AlertMessage>
            )}
            // 선택된 값들을 관리하는 것이므로 checkedList에 map을 활용한다.
            {checkedList.map(item => {
              return (
                <S.SelectedCategory key={item}>
                  <S.Selected>{item}</S.Selected>
                  <S.CancelChecked onClick={() => onRemove(item)}>
                    X
                  </S.CancelChecked>
                </S.SelectedCategory>
              );
            })}
          </S.SelectedBox>
        </S.SelectContainer>
      </S.CategoryContainer>
 );
}

2. 상품명 선택 시 해당 상품 코드 화면에 출력

1) 마찬가지로 상품 리스트는 상수데이터로 관리하기

const PRODUCT_DATA = [
  { id: null, value: '상품을 선택하세요.' },
  { id: '0001', value: '알꼬리 300g' },
  { id: '0002', value: '미니샤토 150g' },
  { id: '0003', value: '안심추리 150g' },
  { id: '0004', value: '안심슬라이스 150g' },
  { id: '0005', value: '립아이' },
  { id: '0006', value: '로스 등심 200g' },
  { id: '0007', value: '꽃등심 200g' },
  { id: '0008', value: '채끝 등심 200g' },
];

2) 드롭다운 메뉴에서 선택되는 상품의 상품코드 가져오기 & 출력

  • 위와 마찬가지로 filter함수를 써서 데이터에 접근한다(자세한 내용은 주석으로 작성)
function ProdBasicInfo() {
  
  // 상품명, 상품코드 출력을 위한 state
  const [selectedDropValue, setSelectedDropValue] =
    useState('상품을 선택하세요.');

const handleDropProduct = e => {
  // e.target.value. 구조분해로 e.target에서 타겟팅 된 요소의 value를 가져옴. 즉, 선택된 요소!
    const { value } = e.target;
  // PRODUCT_DATA는 id(상품코드)와 value(상품명)로 구성된 객체들로 구성된 배열. filter함수를 써서 선택된 상품명과 PRODUCT_DATA 에 있는 상품명이 일치하는 배열을 반환. 인덱스 0과 id를 사용하여 배열 안에 있는 객체에 접근하여 id값을 추출한다. id값이 상품코드. 이 id값을 selectedDropValue에 업데이트.
    setSelectedDropValue(PRODUCT_DATA.filter(el => PRODUCT_DATA.filter(el => el.value === value)[0].id));
  };

return (
<S.ProductNameContainer>
        <S.SubTitle>상품명 *</S.SubTitle>
        <S.ProductBar>
  // select태그와 option태그를 사용하여 드롭다운 메뉴를 만들었다.
          <S.ProductSearch onChange={handleDropProduct}>
            {PRODUCT_DATA.map(el => {
              return (
                <option key={el.id}>
                  {el.value}
                </option>
              );
            })}
          </S.ProductSearch>
        </S.ProductBar>
        <S.ProductCode>
          <S.Code>상품 코드</S.Code>
// 상품코드 출력
          <S.ShowingCode>{selectedDropValue}</S.ShowingCode>
        </S.ProductCode>
      </S.ProductNameContainer>
 );
}
profile
투명인간

0개의 댓글