작성한 질문수 13

0

안녕하세요! asdqqq님!

현재 상황에서는 두 방식 모두 동일합니다!^^
(내부적으로 굳이 따지자면, 함수가 1개 더 만들어지다보니 메모리 사용량은 더 늘어나긴 하지만,
사용적인 측면에서는 두 방식 모두 동일하므로 어떤 것을 사용하셔도 무관해요!)

하지만, 아래처럼 두 방식이 동일하지 않은 상황도 있으므로 다른 사람이 만든 코드를 리딩하시기 위해서는 이벤트 위임에 관한 개념은 꼭 익혀두세요!

// 리팩토링전 코드
<div>
    <span onClick={() => onClickAlert(el.number)}>{el.number}</span>
    <span onClick={() => onClickAlert(el.title)}>{el.title}</span>
    <span onClick={() => onClickAlert(el.writer)}>{el.writer}</span>
</div>


// 리팩토링후 코드
<div onClick={onClickAlert} > // onClickAlert에서 event.target 사용
    <span>{el.number}</span>
    <span>{el.title}</span>
    <span>{el.writer}</span>
</div>

또한, 컴포넌트 조립 상황에서의 이벤트 위임시 위 두 상황이 달라질 수 있으므로 이것 또한 고려해 볼 수 있을 것 같아요!

추가적인 첨언을 드리자면, onClick 내에서 로직까지 첨부하시는 것은 지양해 주세요!

// 아래처럼 로직까지 들어가는 경우는 로직과 뷰가 분리되지 않기 때문에
// 가독성을 해치고 유지보수성을 떨어뜨립니다!
// 추후, 성능 개선을 위한 메모이제이션코드가 들어가게되면 더 복잡해져요!
<div onClick={() => {
    const aaa = 3;
    alert("안녕하세요");
}}>
    클릭하세요
</div>

마지막으로, 뒷부분에서 HOF를 배우시게 되는데, 이는 앞선 두 방식보다 상당히 편리하므로 이 부분에서 한번의 추가적인 리팩토링이 들어갈 것 같네요!^^