티스토리 뷰

웹개발(프론트)/React

Switch 이쁘게 쓰기 enum

수달찌 2021. 3. 19. 23:54

 

여러 가지 버튼을 만들고

각각의 버튼에 따라 다른 효과를 내기 위해,

switch가 필요하게 되었다.

 

그런데 뭔가 switch보다 더 이쁘게 쓰고 싶어

찾아보다가 enum을 알게 되어 포스팅하게 되었다.

 

Switch

일단 enum과 비교할 겸 switch를 한번 짚고 넘어가자!

switch는 지정 변숫값에 따라 여러 결과를 나타낼 수 있는 분기문(상황에 따라 달라지는 문장)이다.

일단 html은 기본값으로 넣고

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script src="./main.js"></script>
</body>
</html>

Js 불러오기 외에는 기본값이다.

let choice = 1;

switch(choice){
  case 0 :
    document.body.style.background = 'tomato';
    break;
    
  case 1 :
    document.body.style.background = 'skyblue';
    break;

  default:
    break;
}

코드를 읽으면 대략 감이 오겠지만,

우리는 영어를 할 줄 아니깐!! 똑똑하니깐!!

여기서 choice 값이 case 옆의 설정값과 일치하면

그 부문이 실행된다.

default는 choice가 case에 일치하는 값이 없을 때,

실행된다.

 

이 코드에서는 choice가 1이니깐

case 1번 구문이 실행되어,

body 색이 파랑파랑 하게 된다.

그~런데 뭔가 이게 좀.. 보다 보면 좀 더 예뻤으면 할 때가 있다.

예로 들어 case가 10개 넘어갈 때라던가...

지금 내상황이 그래요...

그래서 찾은 게

enum

enum은 열거형이란 뜻으로써 정의를 쭈르륵 나열한다는 뜻이다.

그런데... 내가 쓸려했던 enum은

정확히 말하면 enum을 쓴다기보단

object로 enum처럼 쓴다는 것이었다...

 

뭐 어쨌든 중요한 건 코드를 더 이쁘게 할 수 있다는 거라구!!

const choice_enum = {
  tomato : 0,
  skyblue: 1
}

let choice = 1;

switch(choice){
  case choice_enum.tomato :
    document.body.style.background = 'tomato';
    break;
  case choice_enum.skyblue :
    document.body.style.background = 'skyblue';
    break;

  default:
    break;
}

const Foo = () => {
  return <button>FOO</button>;
};

간단하게 말하자면,

key와 value

이름과 값으로 정의한 enum을 통해서

case의 상수를 변수명으로 변경하여 switch의 가독성을 높일 수 있다는 것이다.

좀 성이 안차는데,

아 물론 저렇게 대체시킨 것만으로도 이쁜 건 맞다.

 

React enum

이걸 내가 재밌게 쓴 부분은

react로 넘어가면 switch를 그냥 대체할 수 있다.

import React from 'react';

const Apple = () => {
  return <button>FOO</button>;
};

const Banana = () => {
  return <button>Banana</button>;
};

const Cacao = () => {
  return <button>Cacao</button>;
};

const Enum_choice = {
  apple: <Apple />,
  banana: <Banana />,
  cacao: <Cacao />
};

function App(){

let choice = "apple";

  return(
    <div className="App">
      {Enum_choice[choice]}
    </div>
  ) 
}

export default App;

여기서 choice 변수를 변경하면 그에 따른 component 반환 값이 변한다.

이를 통하여 이쁜 enum을 통해 switch 대체 할 수 있다.

 

너무나 만족스럽다....

끝

저작자표시

'웹개발(프론트) > React' 카테고리의 다른 글

styled component  (0) 2021.03.25
react-router  (0) 2021.03.22
Carousel 만들기 (React-Slick)  (1) 2021.02.24
React 프로젝트 만들기  (0) 2021.02.23
React 아이콘 쓰는 법  (0) 2021.02.18
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
글 보관함