UI/UX jQuery를 잘 사용하는방법

웹개발에서 jQuery는 화면 UI를 만들때 가장 기초적인 javascript라이브러리다.

많은 개발자들은 jQuery의 event방법을 잘 모르고 javascript와 onclick에 연결하는 수준으로 사용하는것을 흔하게 볼수 있다.

jQuery의 가장 잘쓰기 위해서는 bubbling을 정확히 이해해야 한다. 단순히 버튼이 눌리면 어떤 동작을 해라 하는 식의 코딩으로는 jQuery를 사용할 의미가 없다. 버턴이 눌린것을 해당 element가 처리하는게 아니라 상위 element가 받아서 동작을하게 만들어야 한다.

<div class='parent'>
 <div class='child'>
 <button>OK</button>
 </div>
</div>

위구조에서 button이 눌리는 동작을 만들기 위해서 어떤식의 코딩을 하는가 이다.

  1. $("button").on("click", function() { ... } );
  2. $(".parent").on("click", ".child button", function() { ... } );
  3. $(".child").html("<button>확인</button>");

1번은 버튼에 고정된 코딩방식이고 2번은 parent가 버튼의 이벤트를 받아서 처리하는 방식이다. 화면 처리중에 가변적인 3번코딩이 추가 될경우 1번은 동작하지 않지만 2번은 정상적으로 처리가 된다. .parent의 자식노드중 어떤것이 눌리더라도 메세지를 받아서 해당 출처를 확인하여 함수를 실행하는 방식이 된다.

많은 라이브러리들이 2번방식으로 개발되어 있다. bootstrap 이라던지 그래프라던지 UX desktop등이 버블링 기법으로 코딩을 되어 async 방식으로 개발이 익숙해져야 한다.

함수를 많이 만들지 말고 inline function과 selector를 잘 이해하고 연동하는것이 jQuery의 핵심이다.

위 구조보다도 더 가변적인 고급 방법은 추후 논의하고 기본적으로 하위 이벤트를 받아 처리하는 방식이 익숙해 져야 기본적인 jQuery를 이해하고 있다고 보면 된다.