React - React 를 사용하기 위해 되짚어보는 JavaScript 기초 (4)

안녕하세요.

Hynn 입니다.

 

4편 시작해보도록 하겠습니다 :)

이번 포스팅에서는 조건문의 기본 사용법을 알아보도록 하겠습니다.

 

1. 조건문 (If) 사용하기

 

조건문은 영어 단어 그대로, If 를 사용하여 작성합니다.

이 If 문은 정말 많이 사용하게 되고, 이를 간결하게 작성하는 switch/case 문도 있습니다.

 

이를 기초적으로 작성해보면 아래와 같이 작성해보도록 하겠습니다.

 

let a = 3

if(a >= 4) {
	console.log("Over 4")
    }else {
    console.log("under 4")
}

가장 기초적인 작성입니다.

첫번째 If문에는 조건을 만족할 때 실행되는 CodeBlock 이 결정되고, 조건을 만족하지 않을 경우 else 구문의 CodeBlock이 실행됩니다.

이를 중첩하여 사용하게 되면 아래와 같이도 작송할 수 있습니다.

 

let a = 3

if(a >= 4) {
	console.log("Over 4")
    }else if(a>=6 {
    console.log("else if")
	} else {
    console.log("else")
    }

 

위와 같은식으로 else if 를 사용하면 if문을 중첩할 수 있습니다.

위에서부터 만족할경우, 만족하지 않을 경우 if 문 추가 검사 형태로 내려가게 됩니다.

이 else if 는 몇번이고 중첩이 가능하고, 모든 조건에 만족하지 않으면 가장 하단의 else 문이 실행됩니다.

하지만 If문이 중첩될수록 코드는 가독성이 좋지 않게 됩니다.

그럴 때 사용하는 것이 바로 "switch" 문입니다.

 

이를 가장 예시가 될 만한 것으로 작성해보도록 하겠습니다.

 

2. Switch / Break / case 사용하기

 

let country = "ko"

switch(country){
	case "ko":
	    console.log("Korea")
    	break;
   
	case "cn":
    	console.log("China")
		break;
//....

	default :
    	console.log("Unkwown")
        break;
}

 

Switch 문법은, 구성만 이해한다면 어렵지 않습니다.

 

먼저 Switch 를 사용하여, 어떠한 변수에 조건을 설정할지를 정합니다. 위의 예시에서는 Country 가 되었네요.

그렇다면 이제 TV에서나 보던, 사건별 케이스를 정리한다. 라는 형태로 case 를 분류해야 합니다.

 

즉, 국가코드형태라면, ko, ch, usa, uk 와 같은 국가코드별로 case 를 생성할 수 있습니다.

그리고 각 케이스에 : 을 사용하여 case 에 일치할 경우 어떠한 코드가 실행될지를 작성합니다.

그리고 난 뒤에 , break 를 사용하여 끝맺음을 해야 합니다. 이렇게 하지 않을 경우, code-blocl scope 가 너무 커지게 되고, 불필요한 코드까지 실행될 수 있습니다.

 

이를 주의해야 합니다.

 

3. 반복문 사용하기

 

반복문은, 말 그대로, 작성자가 반복을 하여 동일한 작업을 직접 입력하는것에 반해, 간단한 코드로 반복을 하도록 처리하는 것을 의미합니다.

이를 사용하면, 간편하게 반복처리를 짧은 코드로 구현할 수 있게 됩니다.

 

기본적인 반복문 사용법입니다.

가장 일반적인 반복문인 for 문을 사용해보도록 하겠습니다.

for(let i = 1; i <= 100; i++){}

이전에 학습한 연산자들을 대입해보면 쉽게 이해할 수 있습니다.

먼저 let i 라고 하여 i의 값을 대입합니다. 여기서는 1이 됩니다. 

 

두번째로 i의 값은 100보다 작거나 같을때의 조건식을 작성합니다. 역시 여기에서도 연산자를 사용했습니다.

마지막으로, i++ 라고 하여, 증감연산자를 코드가 한번 실행되고 나서 증가되도록 처리합니다.

기본적인 반복문 작성방법입니다. 

이렇게 한 뒤 중괄호 내에 반복을 처리할 코드를 작성할 수 있습니다. 

 

즉 위와 같이 작성하면 i가 1부터 시작되어 코드가 실행될때마다 1씩 증가하고, 100보다 작거나 같을때까지 반복하게 되므로, 100번의 반복이 구현됩니다.

 

이를 코드적으로 해석하면 아래와 같이 학습할 수 있습니다.

 

1. 초기식 (let i = 1;)

2. 조건식 ( i<= 100;)

3. 연산 (i++)

 

즉, 초기식으로 반복문이 시작이 되고, 반복문은 연산식을 사용하여, 조건식의 부합하는지를 검사 후 반복이 수행됩니다.

이 기본적인 규칙만 이해한다면 크게 어렵지 않을 것입니다.

 

 

다음 포스팅에서 이어서 뵙도록 하겠습니다.