✅ Issue: 자바스크립트 onClick() 이벤트 함수 이슈

[jaynamm]

아래와 같이 게시판에서 타이틀을 클릭하면 해당 글로 들어가게 onClick() 이벤트를 사용했다.

변경 전

{questions.map((question) => (    
    <tr>
        <td>{question.id}</td>
        <td onClick={onClickQnaViewHandler(question.id)}>{question.title}</td>
        <td>{question.author}</td>
        <td>{question.createdDate}</td>
    </tr>
))}

하지만 클릭했을 때 들어가는 것이 아니라 QnA 게시판에 들어가자마자 onClick 이벤트가 실행되면서 글 세부 내용으로 페이지가 바로 이동해버렸다.

해당 내용에 대해서 찾아보니 onClick() 이벤트에서는 화살표 함수를 사용하지 않으면 함수가 바로 실행된다고 한다.

공식 문서에 자세한 이벤트 사용법에 대해서 나와있다.

리액트 공식 문서 - 이벤트 처리하기

그래서 다음과 같이 코드를 수정해서 정상적으로 동작하는 것을 확인했다.

변경 후

{questions.map((question) => (    
    <tr>
        <td>{question.id}</td>
        <td onClick={() => {onClickQnaViewHandler(question.id)}}>{question.title}</td>
        <td>{question.author}</td>
        <td>{question.createdDate}</td>
    </tr>
))}

바로 이벤트가 실행되지 않도록 화살표 함수 을 사용해서 클릭했을 때 함수가 실행되도록 만들었다.

[KKYHH]

애로우풩션