React 형제 태그 선택 관련 질문 드립니다.

Question

아래 A 태그를 누르면 A 태그에 대한 target 정보를 가져올 수 있지만 A 태그 클릭시 형제 태그인 div 태그의 정보를 들고 오고 싶은데 어떻게 해야 할까요?

<div> <a href="#" onClick={this.eventA}>클릭</a> <div>내용</div> </div> <div> <a href="#" onClick={this.eventA}>클릭</a> <div>내용</div> </div>

Answer 1

크게 3가지 방식이 있습니다.

1. 이벤트 객체를 이용하는 방법

   eventA 함수가 호출될 때 자동으로 클릭 이벤트 객체가 파라미터로 전달이 됩니다. 즉 eventA 함수에서 클릭 이벤트가 발생한 엘리먼트에 접근이 가능합니다.

   function eventA (e) { // e는 클릭 이벤트입니다. 뭔지 모르신다면 아래줄에 console.log(e)를 추가해보세요. // console.log(e) const targetEl = e.target // 클릭된 엘리먼트 <a></a> const parentEl = targetEl.parentElement // 클릭된 엘리먼트의 부모 엘리먼트 <div></div> const prevParentEl = parentEl.previousElementSibling // 부모 엘리먼트의 이웃(이전) 엘리먼트 const nextParentEl = parentEl.nextElementSibling // 부모 엘리먼트의 이웃(이후) 엘리먼트 const prevSiblingEl = prevParentEl.children[0] // 이웃(이전) <a></a> 엘리먼트 const nextSiblingEl = nextParentEl.children[0] // 이웃(이후) <a></a> 엘리먼트 }

2. ref를 이용하는 방법

   레거시 api 의 ref 속성을 이용하면 손쉽게 접근이 가능합니다만 선언전 프로그래밍에 방해가 되기 때문에 권장하지 않는다고 합니다.

   https://reactjs-kr.firebaseapp.com/docs/refs-and-the-dom.html#%EB%A0%88%EA%B1%B0%EC%8B%9C-api--%EB%AC%B8%EC%9E%90%EC%97%B4-ref

3. 이벤트 핸들러에 인자 전달하는 방법

   이벤트 핸들러를 호출할 때 이벤트 객체 대신 원하는 인자를 전달하는 방법이 가능합니다. 클릭이 발생했을 때 알기 원하는 값을 전달해주면 되기 때문에 가장 깔끔하고 react 다운 프로그래밍을 할 수 있는 방법입니다.

   https://ko.reactjs.org/docs/handling-events.html