한 입 크기로 잘라먹는 리액트조건문이란 특정 조건을 만족할 때 동작하는 프로그래밍의 기본 문법 중 하나입니다. 자바스크립트의 조건문에는 if 문과 switch/case 문이 있습니다.
if 문
if는 영어로 ‘만약’이라는 뜻입니다. 따라서 if 문은 “만약 A라면 B를 하고, 그렇지 않으면 C를 하라”와 같이 조건에 따라 각기 다른 명령을 수행하도록 만들 때 사용합니다.
if 문은 if 키워드 다음의 소괄호
코드를 불러오는 중 입니다 ...()에 조건식을 입력하고, 중괄호{}에서는 해당 조건식이 참일 때 수행할 명령을 입력합니다.다음은 if 문을 사용해 제공한 숫자가 10 이상인지 판단하는 예제입니다.
코드를 불러오는 중 입니다 ...변수 num의 값은 11로 10보다 큽니다. 따라서 조건식을 만족하기 때문에 중괄호에 작성한 명령을 수행합니다. 변수 num의 값을 9로 바꾼다면 어떻게 될까요? 조건식을 만족하지 않기 때문에 중괄호에 작성한 명령을 수행하지 않습니다. 따라서 콘솔에는 아무것도 출력되지 않습니다.
if 문에서는 명령을 여러 줄에 걸쳐 입력해도 얼마든지 수행할 수 있습니다.
코드를 불러오는 중 입니다 ...조건식과 일치하지 않을 때 수행할 코드를 따로 작성하고 싶다면, 다음과 같이 else 키워드를 사용하면 됩니다.
코드를 불러오는 중 입니다 ...다음은 if 문에서 else를 사용하여 거짓일 때 수행할 명령을 추가한 예제입니다
코드를 불러오는 중 입니다 ...변수 num의 값은 9이므로 if 문의 조건식을 만족하지 않습니다. 따라서 조건식을 만족하지 않으면 else 중괄호 내부의 명령을 차례로 실행합니다. 이렇듯 if ~ else 문을 이용하면, 조건이 참인지 거짓인지에 따라 두 가지 각기 다른 동작을 수행하는 코드를 구현할 수 있습니다.
그런데 참과 거짓 말고도 또 다른 조건을 추가하려면 어떻게 프로그래밍해야 할까요? else if 문은 두 개 이상의 조건이 있는 경우에 사용하는 조건문 입니다.
코드를 불러오는 중 입니다 ...if 문의 조건식이 거짓이면, 바로 다음 else if 문에서 조건식을 다시 검사합니다. else if 문의 조건식이 참이면 이 문에 있는 명령을 수행합니다.
예제에서 변수 num의 값은 5이므로, else if 문의 조건식을 만족합니다. 따라서 else if 문의 명
령을 수행하여 num은 5 이상입니다. 를 출력합니다.
조건이 여러 개가 있어도 상관없습니다. else if 문은 여러 개 중첩해 사용할 수 있습니다. 다음은 중첩 else if 문을 사용해, 국가 코드에 따라 한글로 해당 국가의 이름을 출력하는 예입니다.
코드를 불러오는 중 입니다 ...else if 문을 중첩해 사용하면 조건에 맞게 각기 다른 명령을 수행할 수 있습니다.
switch 문
switch 문은 중첩 if 문처럼 비교할 조건이 많을 때 사용하는 조건문입니다. switch 문은 식이나 값을 case 문과 비교해 정확히 일치할 때만 수행합니다.
코드를 불러오는 중 입니다 ...① switch 문은 오른쪽 소괄호에 있는 변수 fruit의 값을 기준으로 이 값이 어떤 case에 해당하는 지 판단합니다. ② 변수 fruit의 값은 apple이므로 이 case 문의 조건과 일치합니다. 따라서 해당 case에 작성한 명 령을 수행합니다. ③ case 문에서 명령을 수행한 다음 break 문을 만나면 switch 문을 종료합니다.
switch 문에서는 break 문을 사용합니다. case 문에서 수행할 명령을 작성하고, break를 입력해 “실행할 명령이 끝났다”라고 알려주어야 합니다. break 문을 작성하지 않아도 오류가 발생하지는 않습니다. 그러나 break를 입력하지 않으면, 조건식과 일치해 실행한 case 문 이후의 명령까지 모두 차례로 수행합니다.
다음은 그 예를 보여주고 있습니다.
코드를 불러오는 중 입니다 ...swtich 문은 조건식과 일치하는 case 문의 명령을 수행한 후에도, 다음에 작성한 명령까지 모두 수행하려는 속성이 있습니다. 따라서 적절하게 break 문을 입력해 원하는 case 문만 수행하도록 해야 합니다.
default 문은 비교하는 식 또는 값이 어떤 case와도 일치하지 않을 때 수행하는 명령입니다. default 문은 선택적으로 사용할 수 있으므로 생략해도 오류가 발생하지 않습니다.
조건이 여러 개인 경우에 switch 문을 사용하면 if 문보다 가독성 있는 코드를 작성할 수 있습니다. 만약 조건이 많음에도 불구하고 if 문과 else if 문을 중첩해서 코드를 작성하면, 다음 예처럼 보기만 해도 복잡해 보이는 코드를 작성해야 합니다.
코드를 불러오는 중 입니다 ...switch 문을 이용하면 간결하면서도 가독성 있는 코드를 작성할 수 있습니다.
코드를 불러오는 중 입니다 ...자바스크립트의 조건문으로 if 문과 switch 문을 알아보았습니다. 상황에 따라 적절히 선택해 사용하면 됩니다. 보통 조건의 개수는 많으나 조건별로 수행할 식이 짧다면 switch 문을 사용하고, 조건은 많지 않으나 조건별로 수행할 식이 길거나 복잡하다면 if 문을 사용합니다.