10장 React-Navigation 사용하기 책내용중에서


(정기욱) #1

Page.217 여기서 함수를 컴포넌트 클래스에 바인딩(bind)하기 위해 두꺼운 함수 선언 문법을 사용했음을 주목하자. 리액트 라이프 사이클 메서드는 컴포넌트 인스턴스에 자동으로 바인딩되지만 다른 메서드는 그렇지 않기 때문이다.

해당구문이 잘 이해가 가지 않네요…


리액트 네이티브 2/E 오탈자 모음
(혜림) #2

두꺼운 함수 선언 문법 -> 화살표 함수 말하는 것 같아요!

리액트에서 Class 내부에 함수 정의할 때, 화살표 함수로 정의한게 아니면 bind로 묶어줘야 하는데, 화살표 함수는 context가 새로 만들어지지 않아서 이전 this 이어 받으니 바인딩을 따로 해주지 않아도 되더라구요. (@codejong 제가 이해하고 있는게 맞나요?)
+ 예시를 만들어봤어요. (this 바인드를 하지 않은 것, 바인드를 한 것, 화살표 함수를 쓴 것)

this랑 화살표함수 영상 같이 붙입니다 ㅎㅎ



(코드종) #3

@falhed7418 님, 오탈자를 찾으셨네요~ :+1:

책 원문에서는 Fat Arrow Function이라고 되어 있어요. 이건 Arrow function(화살표 함수)를 말합니다.
책에서 두꺼운 함수가 아니라 두꺼운 화살표 함수라고 했어야 해요.

그럼 왜 저자는 “Fat” Arrow function이라고 했을까요?

이 저자가 두꺼운 함수 선언이라고 한 이유를 추측해보자면, 아마도 커피스크립트를 썼던 경험 때문에 명확히 구분하기 위함이 아닐까 생각합니다. 커피스크립트에서는 ->=>가 다르거든요. :slight_smile:

바인딩과 관련된 내용은 @healim.me 님이 남긴 링크를 항번 살펴보시고 이해 안되시는 부분있으면 다시 말씀해주세요.

@healim.me 님 거의 정확히 이해하고 계신데요. 한가지 정정이 필요한 부분이 있어요. 화살표 함수는 context가 새로 만들어지지 않아서가 아니라 this가 존재하지 않아서 다른 일반 변수처럼 스코프 체인의 순서대로 변수를 찾아서 사용하기 때문에 해당 화살표 함수를 선언한 위치상 상위의 this를 쓴다라고 이해하시면 됩니다.

context와 this는 같은 개념이 아니라 context는 this, 접근가능한 변수(, 등 함수의 실행 할때 마다 따라서 달라지는 것들에 대한 내용을 담고 있는 객체라고 이해하시면 됩니다.

제가 관련해서 봤던 한글로 된 글 중에는 다음 글을 추천합니다.
(사실 이 문서 전체를 꼼꼼히 보지는 못했었어요 :slight_smile: 관련해서 궁금한 점 있으면 수업시간에 얘기해봅시다.)


(정기욱) #4

혹시나 화살표함수를 말하는건가 싶었는데 역시나 예상이 맞았네요 ㅎㅎ링크 달아두신거 참고하겠습니다.
:hugs:


(혜림) #5

안다고 생각하고 넘어갔으면 잘못 알고 넘어갈 뻔 했네요 ㅎㅎ 질문 올려주시고 답 달아주셔서 감사합니다!!


(코드종) #6

그러고 보니 벌써 10장을 보고 계시는군요! :+1: :+1: