간혹쓰는 switch 조건문에 대하여

최근에 redux를 배웠는데, Reducer 부분에 잠깐 등장했던 switch 문법에 대해서 다뤄보려고 합니다.
정말 간단한 포스팅입니다.
쉬어가기...

Reducer는 Dispatch에게서 전달받은 Action 객체의 type 값에 따라서 상태를 변경시키는 함수입니다. 
다음은 Reducer에서 switch 구문을 활용한 예시입니다.
아래 보이는 것처럼 Reducer는 Action 객체의 type 값에 따라 분기하는 switch 조건문을 사용하고 있습니다.

const count = 1

// Reducer를 생성할 때에는 초기 상태를 인자로 요구합니다.
const counterReducer = (state = count, action) => {

  // Action 객체의 type 값에 따라 분기하는 switch 조건문입니다.
  switch (action.type) {

    //action === 'INCREASE'일 경우
    case 'INCREASE':
			return state + 1

    // action === 'DECREASE'일 경우
    case 'DECREASE':
			return state - 1

    // action === 'SET_NUMBER'일 경우
    case 'SET_NUMBER':
			return action.payload

    // 해당 되는 경우가 없을 땐 기존 상태를 그대로 리턴
    default:
      return state;
	}
}
// Reducer가 리턴하는 값이 새로운 상태가 됩니다.

 

switch 조건문에 대해 좀더 자세히 알아보겠습니다

 

switch 사용법

 

let 변수 = 2 + 2;

switch (변수) {
 case 3 :
 alert('변수가 3이네요')
 break
 
 case 4 :
 alert('변수가 4네요')
 break
}

 

switch의 ()엔 조건식이 아니라 검사해볼 변수를 넣으면 됩니다

그리고 변수가 3일때 코드를 실행해주세요~ 라고 코드를 짜고 싶으면
case 뒤에 값을 넣고, 저렇게 사용하면 됩니다

그리고 코드실행을 끝내고 싶으면 break라는 걸 추가해주면 됩니다
그럼 switch {}를 통과해줍니다
(참고로, 보통 return문에서는 break를 쓰지 않아도 됩니다)

 

let 변수 = 2 + 5;

switch (변수){
  case 3 :
    alert('변수가 3이네요');
    break
  case 4 :
    alert('변수가 4네요');
    break
    default:
    alert('다 아니네')
}

else 같은 걸 쓰고 싶으면, default: 추가해주면 됩니다.
그러면 case에 해당되는게 하나도 없을때 안에 있는 코드를 실행해줍니다

if로도 모든걸 만들 수 있는데 switch를 쓰는 이유는 
변수값에 따른 조건분기를 만들고 싶을 때 조금 더 간편하게 적을 수 있어서 그렇습니다.
if else보다 괄호가 적으니까요. 그 이유밖에 없슴!

 

그래서 배운 개념으로 만든 간단한 심리테스트 게임

 

<div id='quiz'></div>
<h4>혼자 가야한다면?</h4>
<button>유튜브 각 보면서 혼자 놀이공원가기</button>
<button>많이 먹으려고 혼자서 뷔페가기</button>
<button>자유로운 영혼이 되어 혼자 클럽가기</button>
<script>
    document.querySelector('#quiz').addEventListener('click',function(e){
        switch(e.target.innerHTML){
            case '유튜브 각 보면서 혼자 놀이공원가기':
            alert('대단한 관종이세요');
            break;
            case '많이 먹으려고 혼자서 뷔페가기':
            alert('그래요 먹는것이 남는 거예요');
            break;
            case '자유로운 영혼이 되어 혼자 클럽가기':
            alert('음악은 국가가 허락한 유일한 마약');
            break;
        }
    });
</script>

 

만들어봤습니다

이런식으로 변수 하나의 값에 따라서 각각 다른 기능을 실행하고 싶을 때 쓰면 깔끔해보일수도

 

 

 

 

 

노래 제목이 스위치예요. 그냥 그렇다고요.