-
Javascript class의 내부 함수, methodjavascript 2020. 11. 26. 01:36
개인적으로 React를 소소히 튜터링하는 중인데, 튜터링하며 받는 질문에 대한 답변을 공유한다.
초심자 기준이라 완전 초심자용 내용일수도.질문: React Component 안에 함수를 정의했는데 왜 빨간줄이 생길까?
class App extends React.Component { constructor(props) { // 생략 } // 아래 오류 function appFunction() { } render() { return( ); } }
Class 내부 method 선언하기
우리가 만드는 React Component는 보통 Class 000 extends React.Component 형식을 하고 있습니다.
그리고 Class로 선언하였으므로 React Component이기 이전에 이는 Javascript의 Class임을 의미합니다.
mdn class 문서 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes
mdn 문서에서 Javascript Class를 참고하면 Class 내부에서 필요한 특성(property)들과 내부 함수(method)를 어떻게 정의하고 있는지 그 "용법(syntax)"을 볼 수 있습니다.
class 내부 함수는 method라고하는 javascript 문법을 따라 정의할 수 있습니다.
그리고 그 용법은 다음 mdn 문서 를 참고합시다.
method는 본래 어떤 object안에서 정의될 때 다음과 같이 선언되었는데,
const obj = { foo: function() { // ... }, bar: function() { // ... } }
ES2015에서 더 짧은 syntax가 추가되었고, 대부분 그 선언 방식을 쓰고 있다.
const obj = { foo() { // ... }, bar() { // ... } }
class 키워드로 선언된 "어떤 것"도 { } 사이는 object라고 생각하면 편하다.
(정확히 그렇다기 보단, 비유적으로)
그래서 class 내부의 함수(method)는 function이라는 키워드 없이 시작하는 것이다.보통 method 용법으로도 쓰고, 혹은 arrow function의 모양으로도 class 내부 method를 정의합니다. (arrow function_javascript에서 함수를 정의하는 또 다른 방법)
그러나 function 키워드 없는 일반 함수 선언과 arrow function의 syntax를 통한 선언이 완전이 동일하게 작동(process)한다고 생각하면 곤란하다.
여기에는 this를 바인딩하는 로직이 달라서 어렵지만 일단 다르다는 mdn array function 문서 를 참고로 넣는다.Class App extends React.Component { //생략 appFunction(props) { // 생략 } }
'javascript' 카테고리의 다른 글
Chrome Extension 개발 이제 여기에 react를 끼얹은... (0) 2021.02.12 Chrome Extension 개발 해보기 - Getting Started 따라하기 (0) 2021.02.11 [typescript] nodejs 서버 구축하기 - 1 (0) 2020.12.07 Javascript Import에 대하여 - import React from 'react' (0) 2020.11.23 javascript를 쓰지만 내가 잘 몰랐던 것들 (0) 2020.10.20