inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

처음 만난 리액트(React)

Event의 정의 및 Event 다루기 설명 확인 요청

243

한바름

작성한 질문수 1

0

강의에서 컴퍼넌트 이벤트 콜백에 Bind 해주는 내용이 나옵니다.


함수 내에서 사용하는 this 스코프를 정하기 위해 bind를 하는 거로 알고 있는데요.
괄호로 설명하는건 맞지 않는것 같습니다.

HTML/CSS javascript react

답변 2

0

Inje Lee (소플)

안녕하세요, 소플입니다.

 

말씀해주신대로 bind를 하는 이유는 클래스 컴포넌트에서 정의한 함수 내에서 this를 사용하기 위함입니다.

아무래도 해당 부분에 대한 설명이 조금 부족하게 느껴지셨을 수 있겠네요.

나중에 강의 업데이트 시에 추가로 설명을 조금 보강하도록 하겠습니다.

 

그리고 강의에서 말하는 괄호 없이 사용하려면 바인드 해줘야 한다는 의미는,

아래와 같은 형태로 사용하는 경우를 말씀드린 것입니다.

onClick={this.handleClick}

bind를 하지 않으면 아래와 같은 형태 등으로 사용해야 하기 때문에 저렇게 설명한 것이라고 이해하시면 됩니다.

onClick={this.handleClick.bind(this)}
onClick={() => this.handleClick()}

 

감사합니다.

1

한바름

소플님, 자세하고 빠른 답변 감사합니다.

0

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다.

한바름님, 질문해주신 내용과 관련하여 유사한 질문에 대한 답변 링크를 알려드릴 수 있겠습니다. 해당 질문에서는 JavaScript의 bind 함수 사용법과 이 bind 함수가 이벤트 핸들러 내에서 this의 스코프를 정의하는 방법에 대해 설명하고 있습니다.

직접 드릴 수 있는 답변의 링크는 아래와 같습니다:

이 링크의 답변에서 “setState 함수에 set하고 싶은 값 을 직접 넣거나, 아니면 질문해주신 코드처럼 새로운 값을 리턴하는 함수 를 넣을 수 있습니다.“라는 설명이 있는데, 이는 React 내에서 상태를 관리하는 방법에 관한 설명입니다. bind에 대한 직접적인 언급은 없으나, 이벤트 핸들러와 상태 관리 사이의 연결고리를 알 수 있는 배경 정보를 담고 있습니다.

주어진 이미지를 통해, JavaScript의 bind 메소드와 함수 스코프 설정에 대한 설명을 확인했습니다. bind 메소드는 주로 함수가 특정 객체의 메소드로 작용할 때 그 객체에 함수의 this 값을 올바르게 연결해 주기 위해 사용됩니다. 즉, bind 함수를 사용하여 메소드가 호출될 때 this가 가리킬 객체를 명시적으로 설정할 수 있습니다.

그러나 이미지에서 보여지는 설명이 괄호를 사용한 것이 적절치 않다고 생각하신다면, 이는 강의 내용이나 스크립트 작성의 문맥상 이해가 어렵게 표현되었을 수 있습니다. 이 경우, 강의를 제공한 지식공유자 혹은 강의 Q&A 게시판을 통해 보다 명확한 해설이나 설명을 요청하시는 것이 좋을 것 같습니다.

추가적으로 bind 메소드에 대해 더 자세히 알고 싶으시면, MDN(Mozilla Developer Network)의 Function.prototype.bind() 문서를 참고하실 수 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

강의가 삭제되었다고 합니다

0

106

1

이거 왜 존재하지 않는다고 뜨는건가요

0

133

1

존재하지 않는 수업이라고 떠요

0

182

1

안드로이드 에뮬레이터 오류

0

100

1

교재 구입해서 강의 들으려고 하는데 커리큘럼이 없어졌어요.

0

125

1

prevIsConfiromed 질문

1

141

2

chapter14 잘이해가 되지않습니다..

1

135

2

2025년 3월 리액트버전

1

201

2

npm 설치 오류

1

174

1

chapter_07 콘솔로그 질문드려요~!

1

127

2

안녕하세요 미니블로그 실습 질문드립니다.

1

178

3

에러가 떠요

1

218

3

Chapter6 질문 드립니다

1

209

2

실습 코드 있을까요?

1

205

2

상태가 업데이트될때 컴포넌트 최상단의 console.log 코드가 두번 실행되는 이유가 궁금합니다.

1

233

2

npx create-react-app my-app 명령어 입력이 잘못된 것 같습니다

0

307

3

이름과 코멘트 줄바꿈이 안 됩니다.

0

139

1

버튼이 안 뜹니다

0

303

2

npx create-react-app my-app

1

470

2

jsx 코드 작성해보기에서 index.js 수정 후 에러 뜹니다.

1

375

3

Chapter_05 터미널, 리액트 에러

0

193

2

npx create-react-app my-app 명령어 반응없음

1

432

3

import 코드 에러

1

214

1

백틱

1

121

1