code refactoring 01

 

original code.

setPeople function 은 multiple rows의 선택과는 관계없이 선택된 row가 single row인지만 확인한다. 

1. 리덕스에서 받아온 selectedRows의 element 들을 굳이 각자 따로 받아와서 variable을 만들 필요가 없다. 

2. array를 map 으로 loop 해서 받아온 것을 다시 assign하는 과정에서 다시 array 로 assign 하는 과정을 불필요하게 거침. 

function setPeople(result: any) {
      setDropdownList(result.map((people:any) => ({ label : `${people.name}(${people.email})`, value : people.id })));
      const verifyPeopleName = selectedRows.map((row:any) => row.verify);
      const verifyPeopleEmail = selectedRows.map((row:any) => row.verifyEmail);
      const verifyPeopleId = selectedRows.map((row:any) => row.verifyInfo?.userId);
      if (verifyPeopleName && verifyPeopleName.length === 1 && verifyPeopleEmail && verifyPeopleEmail.length === 1 && verifyPeopleId && verifyPeopleId.length === 1) {
         const [verifyPeopleName] = verifyPeopleName;
         const [verifyPeopleEmail] = verifyPeopleEmail;
         const [verifyPeopleId] = verifyPeopleId;
         if (verifyPeopleName && verifyPeopleEmail && verifyPeopleId) {
            setSelectedPeople({ label: `${verifyPeopleName}(${verifyPeopleEmail})`, value: verifyPeopleId });
         }
      }
   }

 

 

refactoring code

결국 multiple row 의 선택이 중요한 것이 아니라 single row 선택이 중요한 것 이기에 조건식 하나로 처리.

function setPeople(result: any) {
      setDropdownList(result.map((people:any) => ({ label : `${people.name}(${people.email})`, value : people.id })));
      if (selectedRows.length === 1) setSelectedPeople(selectedRows.map((row: any) => ({ label: `${row.name}(${row.email})`, value : row.id })));
   }

 

 

summary & questions

- 기존 코드를 이해하지 않고 그냥 복사붙여넣기 하지 말자. 

- prop으로 받아와서 state가 변하지 않을 때의 useState의 불필요. const로 처리가능