하나씩 알아가기

틀린 부분이 있을 경우, 지적해 주시면 감사하겠습니다. 태그를 사용하여 사용자로부터 정보를 입력받아 서버에 요청할 수 있습니다. HTML의 폼 엘리먼트는 그 자체가 내부 상태를 가집니다. 리액트에서는 이를 그대로 사용하기 보다 JavaScript 함수로 폼의 제출을 처리하고 사용자가 폼에 입력한 데이터에 접근하도록 합니다. Name: HTML 폼을 이용하려면 태그의 name이라는 속성에 담아야 제출할 수 있습니다. 하지만 이렇게 리액트 앱을 구현하는 경우 HTML 폼을 이용하는 경우는 많지 않다고 생각됩니다(왜냐하면 리액트는 CSR방식의 렌더링을 지향하기 때문에 하단 포스팅 참고). clearwater92.tistory.com/30 서버사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR) 틀린 부분..

틀린 부분이 있을 경우, 지적해 주시면 감사하겠습니다. 이번에는 자바스크립트에서의 new가 어떤 역할을 하는 지, this의 new 바인딩이 어떻게 이루어지는지에 대해 알아보겠습니다. 「new 연산자는 사용자 정의 객체 타입 또는 내장 객체 타입의 인스턴스를 생성한다」 자바스크립트에서도 자바 처럼 new 키워드가 존재합니다. 그러나 인스턴스를 생성하는 전통적인 의미의 new와는 의미가 다릅니다. 「new 키워드는 일반 함수 호출 도중에 가로채어 원래 수행할 작업 외에 객체 생성이라는 잔업을 더 부과하는 지시자고 new로 호출되는 대상은 생성자가 아닌 그냥 일반 함수일 뿐이다」 먼저 생성자(constructor) 부터 다릅니다. 자바스크립트에서 생성자는 앞에 new 연산자가 있을 때 호출되는 일반 함수에 ..

틀린 부분이 있을 경우, 지적해 주시면 감사하겠습니다. ES6에 추가된 화살표 함수는 function 키워드 대신 =>(fat arrow) 연산자를 써서 표현합니다. 화살표 함수의 가장 큰 특징은 this의 바인딩 방법입니다. 화살표 함수의 렉시컬 스코프를 살펴봅시다 function foo(){ //화살표 함수를 반환한다 return (a) => { console.log(this.a); } } var obj1 = { a:2 } var obj2 = { a:3 } var bar = foo.call(obj1); bar.call(obj2); foo()의 리턴문에서 생성된 화살표 함수는 foo() 호출 당시의 렉시컬 스코프로 this를 포착합니다. foo()는 obj1에 this가 바인딩 되므로 bar의 this..

틀린 부분이 있을 경우, 지적해 주시면 감사하겠습니다. 명시적 바인딩(explicit binding) 함수 레퍼런스 프로퍼티를 객체에 넣지 않고 어떤 객체를 this 바인딩에 이용하겠다는 의지를 코드에 명확히 밝힐 방도는 없을까? call(), apply() 메소드에 대해 알아보겠습니다. 두 메소드는 this에 바인딩 할 객체를 첫째 인자로 받아 함수 호출 시 이 객체를 this로 세팅합니다. this를 지정한 객체로 직접 바인딩 하므로 이를 '명시적 바인딩(explicit binding)이라고 합니다. function foo() { console.log(this.a); } var obj = { a: 2 } foo.call(obj); foo.call()에서 명시적으로 바인딩하여 함수를 호출하므로 this..