자바스크립트 - DOM 객체(2), 그리고 callback 함수

 

HTML element 다중 접근

지금까지는 특정한 방법을 통해 하나의 element에 접근하는 방법을 익혔다.

그런데 하나의 element 에만 접근하는 것이 아니라, 한번에 여러개의 element 에 접근하는 방법도 존재한다.(다중 element 접근)

- 하나의 element 에만 접근하는 함수와 여러개의 element 에 접근하는 함수의 차이는 getElement, getElements 와 같이 s 를 붙여 여러개의 대상을 명시하느냐, s 없이 단일 대상을 명시하느냐 로 구분할 수 있다.

* document.getElementsByName() : 이름 속성을 기준으로 다중 접근

* document.getElementsByClassName() : 클래스 이름 속성을 기준으로 다중 접근

* document.getElementsByTagName() : 태그 이름을 기준으로 다중 접근

 

test.js 를 다음과 같이 작성하면 콘솔에서 name 속성을 기준으로 접근한 input 태그에 대한 정보를 출력하는 것을 확인해 볼 수 있을 것이다.

var var2 = document.getElementsByName("userid");
console.log(var2);

여기서 input 입력칸에 아무 글자나 적어넣은 후, value 속성값을 확인해보면 해당 속성값에 작성해둔 값이 들어가 있는 것 또한 확인해 볼 수 있다.

 

* 이번엔 진짜로 여러개 존재하는 element 에 동시에 접근해보자.

코드를 아래와 같이 작성한다.

var var3 = document.getElementsByTagName("input");
// 위와 같이 여러개 존재하는 input 태그에 접근하면 
// 각 태그에 해당하는 배열이 변수에 담기게 된다.
console.log(var3);

위와 같이 작성한 후 콘솔을 확인해보면 input 태그에 대한 배열이 출력되고 있는 것을 확인할 수 있다.

그렇다면 input 태그들 중 id 값을 받는 태그에 작성된 내용을 출력시키는 기능을 구현해보자.

- test.js

// id 값에 어떤 값을 입력하고, 제출 버튼을 클릭하면
// 브라우저에서 입력한 값을 출력하는 기능을 구현해보자.
function getInputValue(){
    // id 값을 받는 input 태그는 첫번째 요소로 있기 때문에 인덱스를 0 으로 잡아준 후 value 값을 받아온다.
    var inputValue = document.getElementsByTagName("input")[0].value; 
    // alert() -> 경고창을 표시하는 메소드 를 활용하여 입력한 값을 출력시킨다.
    alert(inputValue);
}

- index.html

<input type="submit" onclick="getInputValue()">

 

다음과 같이 작성해준 후, id 값을 입력 받는 칸에 아무값이나 입력해서 제출 버튼을 클릭해보면 경고창을 통해 입력한 값이 출력되는 것을 확인할 수 있다.

CallBack 함수

자바스크립트 에서는 여러가지 함수를 순차적으로 실행할 때 중간에 실행이 오래 걸리는 함수가 있다면, 일단 빨리 처리할 수 있는 함수부터 먼저 처리한 후, 나중에 오래 걸리는 함수를 실행시키는 특징이 있다.

이러한 특징으로 인해 함수를 순차적으로 호출해도 함수의 실행순서가 보장되지 않게 되며, 이러한 경우를 비동기 처리(Asynchronous) 라고 한다.

 

Web 에서는 여러가지 자원이 동일한 시간대로 오고가지 않는다.

이런 상황에서 모든 과정이 순차적으로 수행될 경우 굉장히 오랜시간이 걸리게 되는 등 프로세스가 비효율적으로 수행되게 된다.

그렇기 때문에 Web 에서의 자바스크립트 실행은 대부분 비동기식으로 처리된다고 봐도 무방하다.

 

그럼에도 불구하고 반드시 실행순서가 보장되어야 하는 경우가 있다.

이런 경우에 사용할 수 있는 것이 바로 callback 함수이다.

callback 함수는 필요한 타이밍에 불러서 수행시킬 수 있는 함수이다.

 

callback 함수는 나중에 실행시킬 함수를 먼저 실행시키는 함수의 인자로 받아와서, 먼저 실행시키는 함수 안에서 실행시킴으로서 함수의 순차적인 실행 순서를 보장한다.

 

한번 예를 들어보자.

- test.js

function a(){
    console.log("2초가 걸리는 a 함수");
}

function b(){
    console.log("a 다음에 실행되어야 하는 b 함수");
}

setTimeout(a, 2000);
b();

 

 

실행 결과는 다음과 같다.

a 다음에 실행되어야 하는 b 함수
2초가 걸리는 a 함수

-> b 함수가 먼저 실행되어 버린다.

 

여기서 callback 함수를 구현하려면 다음과 같이 코드를 작성해 줄 수 있다.

- test.js

function a(callback){
    //setTimeout 에 a 함수 내용을 작성해줌과 동시에, a 함수의 모든 프로세스가 끝나면
    // 인자로 넘어온 callback 함수를 실행시킨다.
    setTimeout(function(){
        console.log("2초가 걸리는 a 함수");
        callback(); // callback 함수 실행
    }, 2000)
}

function b(){
    console.log("a 다음에 실행되어야 하는 b 함수");
}

a(b);

 

이 코드를 실행하면 아래와 같은 결과를 얻게 된다.

2초가 걸리는 a 함수
a 다음에 실행되어야 하는 b 함수

-> a 함수부터 순차적으로 실행 되었다.

 

결과를 보면 동기식 처리(순차 처리) 가 잘 수행되었음을 확인할 수 있다.

 

그런데 이렇게 작성할 경우 또 다른 문제에 봉착하게 된다.

 

callback 지옥

1. 5초 걸리는 a 함수

2. 4초 걸리는 b 함수

3. 3초 걸리는 c 함수

4. 2초 걸리는 d 함수

위 4개의 함수가 순차적으로 실행되어야 한다면 어떻게 해야할 까?

 

물론 위에서 작성했던 방식으로 콜백 함수를 만들어서 모든 함수들을 순차 실행시키는 게 가능하기야 하겠지만 코드가 굉장히 복잡해진다.

이를 해결하기 위한 방법으로 ES6 에서 도입된 것이 Promise Async 인데, 이에 대해서는 다음으로 미루도록 하자.

 

 

 

참고 : https://edu.goorm.io/learn/lecture/19879/%ED%94%84%EB%A0%88%EC%9E%84%EC%9B%8C%ED%81%AC%EB%A5%BC-%EC%9C%84%ED%95%9C-javascript-es6

프레임워크를 위한 JavaScript ES6 - 구름EDU