react에서 onclick 이벤트를 이용한 div요소 컨텐츠 가져오기

문제 상황

구현한 캘린더의 특정 날짜 클릭 시 해당 날짜로 get 요청을 보내고자 보이는 날짜(<div>) 에 onClick 이벤트를 적용하였고, 렌더되는 날짜(숫자)에 해당하는 변수값을 불러와 props로 api 요청 함수에 넘겨주려하였으나, 어느 날짜를 클릭해도 렌더된 것처럼 보이는 날짜가 아닌 초기값으로 지정해둔 1이 나타나는 상황이었다.

응답받은 데이터 배열을 map으로 반복시키며 구현해둔 JSX로직을 적용하도록 구현하였고, date-fns 라이브러리를 이용하여 다음 요소로 넘어가기 전 날짜를 +1 해주도록 하였다. 그러나 적용이 안되는 상황!

아마 onClick 이벤트 블럭 내에서는 변경된 값이 아닌 전역변수로 저장되어있는 변수 즉, 초기값으로 미리 선언, 할당되어 업데이트 되지 않는 값이 불러와지는 것 같다.

해결 방법

변수명을 그대로 사용하지 않고 input 이용 시 e.target.value를 사용하는 것처럼 div 내 작성되는 값을 그대로 불러올 수 없을까? 생각했고 찾아보니 역시나! 있었다.

e.CurrentTarget.textContent

e.CurrentTarget.textContent 를 이용하면 자바스크립트에서 컨텐츠값을 불러오는 것처럼 컨텐츠를 불러올 수 있다 :)

✨ 참고 | StackOverFlow