React - useMemo와 Switch 결합

2382 단어 reactjavascript
useMemo는 종속성이 변경되는 경우에만 실행되는 반응 후크입니다. 스위치 표현식이 키가 될 객체를 반환하여 스위치처럼 작동하도록 만들 수 있습니다.

const Form = () => {
    switch(selectedUser){
        case "Admin" : return AdminForm;
                       break;
        case "User" : return UserForm;
                      break;
    }
}
//*AdminForm and UserForm are functional components

//This code is equivalent to 
const Form = useMemo(()=>{
   return { 
      "Admin" : AdminForm,
      "User" : UserForm,
   }[selectedUser];
},[selectedUser]);

/*
Breaking this down, if selectedUser is "Admin", we would return 
   { 
     "Admin" : AdminForm,
     "User" : UserForm,
   }["Admin"];
which is AdminForm.
*/


여기서 Form은 selectedUser가 변경될 때만 실행되기 때문에 매번 표현식을 평가할 필요가 없습니다. 이 방법을 사용하면 switch가 매번 실행해야 하지만 useMemo는 실행하지 않기 때문에 표현식 평가를 최적화할 수 있습니다.

좋은 웹페이지 즐겨찾기