상위 컴포넌트 A , 하위 컴포넌트 B가 있다고 할 때,
B 컴포넌트의 이벤트 동작으로 상위 컴포넌트의 A의 state를 변경해야 하는 상황.
그럼 보통
1. A 컴포넌트 --> B 컴포넌트로 콜백함수를 props 전송
2. B 컴포넌트에서 onClick 이벤트가 발동하면 this.props.callback 함수가 실행됨.
3. B 컴포넌트에서 onClick 이벤트가 발동되었을 때, this.props.callback를 감싸는 함수가 화살표함수
이거잖아.
여기서 화살표함수를 써줘야 하는 이유가
콜백함수가 호출될 때 this값이 참조하는 실행컨텍스트를 A컴포넌트로 해줘야 하기 때문이고.
그래서 결과적으로 B 컴포넌트의 이벤트 동작으로 A컴포넌트의 State 값이 변경되는 것.
이라고 이해했는데
내가 제대로 이해한거 맞을까??
러슬람 러들러들~
B컴포넌트에서 화살표썻으니까 B컴포넌트의 컨텍스트가 불리지않을까요.
callback내부에 들어가는 context를 처리하기위해 A->B props내려보낼때도 A의 context를 고정시켜서 보내줘야겠죠.
A ->B로 props 내려 보낼 때 context를 고정시켜서 보내주지 않아도 저 코드가 작동하고, 그렇게 되는 이유가 "화살표함수를 사용하면 상위스코프의 this를 상속받기 때문" 인건지를 질문한건데
직접짜보셔요. 궁금하시면 console.log(this)찍어보셔도 되는부분. 제가 님 질문을 이해하고 있기로는 render()내부에서의 화살표함수는 Render()가 상위 스코프고 Render()의 this는 B컴포넌트니 B컴포넌트로 해석된다라고 생각했어요