If문과 switch문을 사용하지 말고 Object Literals 사용하기

const renderSomething = useCallback((something: Something) => {
    const renderer: { [key in SomeType]: ReactElement } = {
      food: <div>Food is here!</div>,
      drive: (
        <TextField
          size={'small'}
          select
          name={'mstHmbRef'}
          value={something.someone}
          onChange={e => onChangeProps(e, something)}
        >
          {Object.entries(Exam.Samples).map(entry => {
            const [key, label] = entry;
            return <MenuItem key={key} value={key}>{label}</MenuItem>;
          })}
        </TextField>
      )
    };

    return (
      <Box display={'flex'} justifyContent={'center'}>
        {renderer[something.somesome]}
      </Box>
    );
  }, [dep1, dep2]);

 

// file name is Exam

import { SomeType } from '~/somewhere';

export const Samples: { [key in SomeType]: string } = {
  'name': 'name blablabla',
  'age': '10 years old',
};


 // -------------------------
 
 export type SomeType =
  'name' | 'age';

 

if 문이나 switch 문으로 코드를 작성 시 실수를 할 수 있다.

개인적인 생각은 if 문을 if-else if -else if - else if .... 이런식으로 반복하는 상황을 제외하고는 굳이 Object Literal 로 작성할 필요는 없다고 생각한다.

 

하지만 switch 문의 경우는 Object Literal로 작성하는 것이 훨씬 나을 것 같다.

 

내가 생각한 이유는 다음과 같다.

1. switch 문을 사용할 경우 위에서 부터 case를 하나씩 훑으며 조건에 맞는 case를 찾는다. 즉, 불필요한 자원 소모!
   하지만 Object Literal은 객체이기 때문에 정확한 객체를 바로 짚어줄 수 있다. 굳이 다른 경우의 수를 찾지 않아도 된다는 뜻이다. (효율의 차이가 얼마나 나겠냐만은 switch 보다 직관 적이라 나은 것 같다.
2. switch문의 경우 break 등을 놓치는 실수가 생길 수 있다. 나 또한 경험해본 적이 있기에 이런 점에서는 Object Literal이 더 좋게 받아들여진다. 

아직 실제로 사용해본 적은 없지만 다른 분이 사용한 코드를 봤다.

전혀 생각지 못한 방법이었다. 요즘 개인적으로 드는 생각은 논리적 사고를 하는 뇌는 내가 가지고 있지 않다는 것이다.. 
흠.. 어쩌겠나.. 이렇게 태어난 것을.. 미적 창의적 뇌가 더 발달한 것을.. ㅋㅋ

 

 

+ 22.12.08
실제로 사용해보았다. 위의 예시와 같이 JSX.Element로 return을 하진 않았지만 훨씬 나은 것 같다. break를 걸어줄 필요도 없고. 조금 더 직관적이라 느껴졌다. 

---

참고한 링크를 보면 더 상세히 알 수 있다.

https://velog.io/@chloeee/%EB%B2%88%EC%97%AD-If-elseswitch%EB%A5%BC-%EC%93%B0%EC%A7%80%EB%A7%90%EA%B3%A0-Object-Literals%EB%A5%BC-%EC%8D%A8%EB%9D%BC