오늘은 어제 작성했던 Twittler React의 미흡했던 부분을 더 처리했다
CSS를 조금 더 다듬고 이벤트에 대한 부분을 더 수정했다.
이벤트가 계속 내가 원하던 대로 작동하지 않아서 여러 삽질을 하다가 다시 보면 bind를 제대로 하지 않은 경우가 많았다.
공식문서에 따르면
JavaScript에서 클래스 메서드는 기본적으로 바인딩되어 있지 않기 때문에 메소드를 바인딩하지 않고 다른 함수에 전달하게 되면 함수가 실제로 호출될 때 this
는 defined
가 되기 때문에 바인딩에 주의해야 한다.
React공식문서를 보면 리액트에서 this를 바인딩 하는 방법은
constructor내에서 바인딩 하는 방법과 render()안에서 바인딩하는 방법과 화살표 함수를 사용하는 방법이 있다.
2.render()안에서 바인딩하는 방법
화살표함수 방법의 문제점은 LoggingButton이 렌더링될 때마다 다른 콜백이 생성될 수도 있기 때문에 공식문서에서는 constructor내에서 바인딩 하는 것을 추천한다
recast.ly스프린트를 진행하기 위해서 강의를 보니 이번 스프린트는 youtube를 클론코딩(?) 리액트를 통해 유튜브를 비슷하게 따라해 보는 스프린트였다.
아직 twittelr도 완벽하게 이해하지 못했는데 recast.ly를 하려니 막막했지만 시작했고 역시나 너무 어려웠다.
내가 twittler 스프린트를 진행하면서 놓치고 지나갔단 부분들이 발목을 잡았고 오늘 하루는 제대로 코딩을 하기보다는 내가 놓치고 넘어갔던 부분을 다시 한 번 찾아보고 다시 배우는 시간이 더 길었던 것 같다.
페어분이 리액트에 대해 잘 알고 있어서 찾는데에 있어서 시간이 많이 단축됐다 어떻게 그렇게 리액트를 잘하시는지 존경스러울 정도였다.
recast.ly를 만들면서 twittler에서는 써보지 못했던 map함수를 사용해 봤는데,
유튜브API를 이용하기 전이어서 가짜데이터를 이용해서 각 데이터를 map함수를 통해 내가 필요한 정보로 나눌 수 있었다.