제이쿼리 data() 메소드 알아보기

! 읽기 전에 참고하세요

현재의 jQuery 버전에서는 data() 메소드의 사용 방법이 바뀌어 아래와 같이 사용하지 않습니다. data() 메소드의 기능이 이전의 data 속성을 읽는 것에서 data()를 사용하여 데이터를 저장할 수 있는 기능으로 바뀌었죠. 이에 대하여는 다음에 포스팅 하겠습니다.
< 2019-01-10 >



--- 기존 글 계속읽기 ---
제이쿼리 메소드인 data()를 설명하기 이전에 잠깐 태그에 속성에 대하여 이야기 해보겠습니다.

태그에는 지정 가능한 속성값들이 존재합니다. 예를들어 a 태그에 href라는 속성을 지정하고 그 값으로 원하는 링크를 설정하는 것이 가능합니다. 그 외에 css 또는 스크립트를 사용하기 위해서는 id 또는 class를 사용할 수도 있습니다. 하지만 사용자의 필요에 의하여 설정을 하기도 하는데 이를 커스텀 속성이라 부를 수 있겠죠. 이런 속성은 사용자의 필요에 의하여 별도로 정의하는데 제이쿼리의 내장된 속성과의 구분이 되지 않으면 혼란을 줄 수 있어 주의해아합니다. 이런 이유로 data를 속성 앞에 접두어로 사용하는 것을 권고하며 이런 방식으로 설정하기 위해서 jQuery에는 data() 메소드가 존재합니다.

@ 언제 사용되는가...
많이 사용되는 경우를 예로 들자면 게시판에 작성한 글에 대하여 고유 넘버를 지정할 수 있을 것입니다. 이 경우 넘버는 숫자이므로 아래처럼 속성을 사용하여 지정하죠.

이런 데이터의 경우 아래의 별도 속성을 이용하는 것이 훨씬 더 편리하고 알아보기도 쉽습니다. 하지만 무분별한 속성 사용을 막기위해 data-제목 형태로 사용자 속성을 정의해서 사용하도록 권장합니다. 즉 아래와 같이 사용할 수 있죠.

위와 같이 사용된 경우 data-no 등의 값을 읽기 위해서 data() 메소드를 사용합니다. 간단한 사용방법, 문법은 아래와  같으며 더 자세히 알아보기 위해 예제를 참고하세요.

$(선택요소).data(데이터속성에 사용된 이름)

! data() 메소드 사용 예제보기

앞서 언급한 것 처럼 data() 메소드는 data- 형태의 사용자 정의 속성에 사용된 값을 가져와 반환하는 메소드입니다. 아래는 예제와 함께 알아보세요.
위 예제는 data() 메소드에 인자로 no를 사용하여 data-no 속성에 사용된 값을 읽어오는 코드입니다. 이처럼 별도로 속성을 읽기 위해서 사용해야하는 attr() 또는 prop() 등의 메소드를 사용할 필요가 없으므로 더 편리하죠. 위 코드를 실행하면 data-no의 값인 523을 불러와 출력하게 됩니다.

여기까지 data()를 사용하는 방법에 대하여 알아보았습니다.