코드 몽키

sprint를 진행하다보면, 뜻은 이해하지 못한 채, 빈칸 채우기 문제를 푸는 느낌으로 코딩을 하곤 한다. 이러한 자각은 처음엔 하지 못한다. 그러나, 점점 코딩을 할수록, '나는 이걸 알고 하는게 아니다'라는 죄책감이 커져간다.

어쩔땐, () => {} 어쩔땐, 함수명...?

이게 무슨 이야기인지, 코드를 비교하면서 이야기해보자.

Case 1. Ha-1

import React from 'react';

export default function MovieRankListEntry ({movie, handleCardClick}) {
  return (
    // 이벤트 핸들러 함수는 '사용자 정의 컴포넌트'가 아니라, html 태그의 속성으로 정의해야 한다
    <div className='card' onClick={() => handleCardClick(movie)}>
      <div style={{ flex: 3 }}>
        <img
          width='100%'
          height='100%'
          src={movie.small_cover_image}
        />
      </div>
      <div style={{ flex: 7 }}>
        <h3 className='title'>{movie.title}</h3>
        <p className='rating'>Rating:{movie.rating}</p>
        <p className='running-time'>Running Time:{movie.runtime}</p>
        <p>Genres</p>
        <div className='tag-list'> 
            {
              movie.genres.map((genre) => {
                return (<div className='tag' key={genre}>{genre}</div>)
              })
            }         
        </div>
      </div>
    </div>
  );
}

필자는 그래서 콜백함수를 써줄때는 무조건 () => handler()이렇게 하는 줄 알았다.
인자에 값을 전달할때도 이렇게 쓰지 않는가(() => handler(index))

Case 2. im-sprint-react-custom-component

// ClickToEdit.js

 // (...생략)
 
  return (
    <InputBox>
      {isEditMode ? (
        <InputEdit
          type='text'
          value={newValue}
          ref={inputEl}
          onBlur={handleBlur}
          onChange={handleInputChange}
          // TODO : 포커스를 잃으면 Edit가 불가능한 상태로 변경되는 메소드가 실행되어야 합니다.
          // TODO : 변경 사항이 감지되면 저장된 value를 업데이트 되는 메소드가 실행되어야 합니다.
        />
      ) : (
        <span 
        // TODO : 클릭하면 Edit가 가능한 상태로 변경되어야 합니다.
        onClick={handleClick}
        >{newValue}</span>
      )}
    </InputBox>
  );
}

그런데... 여기서는 이벤트 핸들러 함수로 그냥 함수명만 써준다.
그래서 이게 같은 말일지도 모른다는 깨달음을 얻었다.

배운 내용을 떠올려보자.
콜백함수 주의사항

/*함수 자체를 연결하는 옳은 예*/
document.querySelector('#btn').onclick = handleClick; // (o)
document.querySelector('#btn').onclick = () => {handleClick();} // (o)
(...)

이 두 가지 코드가 같은 말이었다
handleClick
() => handleClick()

그랬구나... 끝