리액트에서 .bind(this) 빼 버리기

리액트 컴포넌트에서 .bind(this)를 없애보자.

Photo by JANNIK SELZ on Unsplash
이제 과거의 일…

네가 리액트를 쓴 적이 있다면 아마 .bind(this) 코드를 작성한 적이 있을거야. 그건:

  • 지저분해 보이고, 게다가,
  • 코드량도 늘어나지

다행히도 자바스크립트에 제안된 몇 가지 기능들이 .bind(this)를 과거의 일로 만들 수 있어.

어떻게 .bind(this)를 없애는지를 설명하기 전에, 이게 어디에 사용되는지 짧은 예제 하나를 보여줄게. 우리가 클릭할 때마다 글자가 바뀌는 버튼 하나를 만들고 싶다고 해보자. 이걸 하기 위해서 다음과 같은 컴포넌트 하나가 필요할 거야.

먼저 constructor 에서 컴포넌트 상태의 toggle 스위치를 false로 세팅해.

그리고, toggleButon 함수를 onClick 처리 함수로 추가해서 버튼이 클릭될 때마다 호출이 되게 만들어.

마지막으로, toggleButton 함수를 만들고 불릴 때 마다 toggle 스위치를 껐다 켰다 하도록 해.

좋았어, 이제 실행할 준비가 된 것 같군!


버튼을 눌러보면 아래와 같은 TypeError를 받게 될 거야.

음… 될 것 같았는데…

onClicktoggleButton 함수를 호출할 때 this가 선언되지 않아서 발생하는 문제야.

보통, toggleButtonthis를 묶어서 this가 항상 존재하도록 해서 이 문제를 고쳐. constructor 상에서 thistoggleButton에 묶어보자.

이걸 추가하고 나면 우리의 버튼 컴포넌트는 아래와 같아져.

이제 잘 동작할 거야.

🔪 .bind(this)

이제, 거슬리는 .bind(this)를 없애보자. 그러기 위해선, 자바스크립트의 실험적인 public class field 기능을 사용해야 해. 이 기능은 클래스 상에서 화살표 함수 문법을 쓸 수 있게 해줘.

toggleButton = () => {
this.setState({ toggle: !this.state.toggle });
}

이 기능은 아직 ECMAScript 표준으로 받아들여 지지 않은 실험적인 기능이라서 babel-plugin-transform-class-properties를 써서 babel을 설정해줘야 해.

이제, 어떻게 public class field를 써서 .bind(this)를 없앨 수 있는지 보자고.

코드줄 22–24를 봐! 정말 예쁘지 않아? 더 이상 .bind(this)가 없다고!

public class fields의 또 다른 좋은 점은 constructor 밖에서 상태를 바로 선언할 수 있어서 우리 컴포넌트를 좀 더 날씬하게 할 수 있어.

짜잔, .bind(this)가 없어지고 컴포넌트가 조금이나마 날씬해졌지? 난 이걸 승리라고 부르고 싶어 🏁! 너는 방금 리액트로 할 수 있는 완전히 새로운 무언가를 배웠으니까 시원한 맥주 🍺나, 초콜릿 🍫 혹은 네가 좋아하는 뭐든 가져와서 자축하도록 해 🎉.

이것에 관한 영상을 만든 Kent C. Dodds에게 고마워. 그가 아니었다면 이 포스트도 없었을 거야. 켄트 화이팅! 🍻

이 포스트를 좋아한다면 👏를 눌러주고 많이 퍼뜨려줘. 내 웹사이트에 방문하고 팔로우 해 줘.

리트윗해주는 것도 많이 도움이 돼.

행운을 빌어! 🍻