배경

메시지 디테일 페이지를 만들고 난 이후에 문제가 생겼다. 메시지를 수정할 때 생기는 구역을 눌렀을 때 원치 않는 클릭 이벤트가 발생하는 것이다. 메시지 수정이 거의 불가능할 정도의 큰 버그여서 해결해보기로 했다.

해결 과정

메세지의 내용이 들어가 있는 부분을 누르면 디테일 페이지로 넘어가게 구현됀다. 하지만 그 부분을 래핑하고 있는 Link 컴포넌트가 <a> 태그를 기반으로 만들어져 있기 때문에 원치 않는 곳에서 클릭 이벤트가 발생하는 것이었다.

문제의 코드는 다음과 같다.

[Message.js 문제코드]

// 생략
<Link className="message-body" to={"/detail/"+message._id}>
        {isUpdate ?
            <div>
                <div className="box-update" aria-label="update">
                    <textarea className="cotent-box" 
                        rows="5" 
                        placeholder="내용을 입력해주세요."
                        onChange={changeContentHandler}
                    >
                </textarea>
                </div>
                <div className="update-button-wrapper">
                    <button className="btn-primary mr-2" onClick={deactivateUpdate}>취소</button>
                    <button className="btn-primary" onClick={clickUpdateHandler}>수정</button>
                </div>
            </div>
            :
            <p>
                {content}
            </p>
        }
</Link> {/* Message Body */}
// 생략

원래 원하는 이벤트 발생 조건은 위의 박스가 클릭 됐을 때이다. 하지만 위처럼 update 구역까지 <Link> 컴포넌트로 감싸다 보니 아래의 사진 속 박스에서도 클릭이 돼버린다.

문제는 간단하게 풀린다.

[해결 코드]

<Link className="message-body" to={"/detail/"+message._id}>
        {isUpdate ?
         	{/************ 해결 방법 ***************/}
            <div onClick={(e)=>e.preventDefault();}>
                <div className="box-update" aria-label="update">
                    <textarea className="cotent-box" 
                        rows="5" 
                        placeholder="내용을 입력해주세요."
                        onChange={changeContentHandler}
                    >
                </textarea>
                </div>
                <div className="update-button-wrapper">
                    <button className="btn-primary mr-2" onClick={deactivateUpdate}>취소</button>
                    <button className="btn-primary" onClick={clickUpdateHandler}>수정</button>
                </div>
            </div>
            :
            <p>
                {content}
            </p>
        }
</Link> {/* Message Body */}

업데이트 구역에 해당하는 가장 상위 엘리먼트의 클릭 이벤트 핸들러에서 e.preventDefault(); 명령을 실행해주는 것이다. 이 명령은 기본적으로 브라우저에서 설정되어 있는 이벤트의 발생을 막아버리는 것이다. react-router 라이브러리의 <Link> 컴포넌트가 <a> 태그를 기반으로 하기 때문에 위 명령으로 이 문제를 해결할 수 있었다.

그리고 가장 상위 엘리먼트에 이벤트 핸들러를 할당한 이유는, 자식 엘리먼트에게서 이벤트가 전파되어오기 때문이다. 클릭된 자식 엘리먼트에서 이벤트가 전파되어 <Link>까지 전달이 되면 비로소 해당 이벤트가 발생된다. 하지만 전달되기 바로 이전에 이벤트 발생을 막아버리기 때문에 더 이상 문제가 없게 된다. 만약 내가 <textarea>에 e.preventDefault() 명령을 수행했다면 메시지 타이핑은 가능하지만 최종적으로 전송 버튼을 누를 수가 없었을 것이다.

알게 된 것

• e.preventDefault()의 쓰임새
• 이벤트 propagation의 존재