Javascript27 JavaScript 바인드 bind()는 javascript function prototye에 내장된 함수중 하나로 사용자가 고정시키고자 하는 인자를 bind() 함수를 호출할 때 인자로 넘겨주고 반환받은 함수를 호출하면서 나머지 가변 인자를 넣어줄 수 있다. // 내장된 bind 함수의 기본적인 polyfill Function .prototype.mybind = function (context) { let fn = this; return function () { fn.call (context) } }; bind()함수의 기본 구현은 아래와 같습니다. let basic = { 'name': 'shyam', 'age': 24 }; function callMe(city) { console.log('Hi! my name is ' + t.. JavaScript 화살표 함수 화살표 함수 표현(arrow function expression)은 기본적인 함수(function) 표현에 비해 구문이 짧고 자신의 this, arguments, super 또는 new.target을 바인딩하지 않습니다. 화살표 함수의 이름은 항상 anonymous(익명)이며 화살표 함수는 메소드 함수가 아닌 곳에 가장 적합합니다. const allItem = ['new', 'use', 'new', 'use']; // ES5 Style var usingItem = allItem.filter(function(use) {return use == 'use'}); usingItem // ['use','use'] // ES6 Style var usingItem = allItem.filter(use => use =.. React 주요 개념 Event 처리 react 엘리먼트에서 이벤트를 처리하는 방법은 DOM 엘리먼트에서 이벤트를 처리하는 방식과 유사하지만 몇 가지 차이점이 있습니다. convention react의 이벤트는 소문자 대신 캐멀 케이스를 사용합니다. JSX를 사용하기 때문에 함수로 이벤트 핸들러를 전달합니다. click preventDefault react에서는 false를 반환해도 기본 동작을 방지할 수 없습니다. 반드시 preventDefault 를 명시적으로 호출해야 합니다. // HTML Style click // React JSX Style function ClickButton () { function handler(e) { e.preventdefault(); alert('click'); } return ( click }; } ES.. React 주요 개념 Lifecycle of Component react에서는 생성, 업데이트, 제거될 때 자동으로 트리거 되는 lifecycle API를 가지고 있습니다. 컴포넌트 생성 시 자주 사용하던 render메소도 역시 react 컴포넌트의 lifecycle 메소드중 하나입니다. 컴포넌트가 생성될때 실행되는 메소드 render() 클래스 React.Component의 하위 class에서 반드시 정의해야 하는 메서드, 이 메서드가 호출되면 this.props, this.state의 값을 이용해 아래 목록 중 1가지를 반환해야 합니다. - React 엘리먼트, 일반적으로 JSX를 사용해서 생성됩니다. - Portal, 별도의 DOM 하위 트리에 자식 엘리먼트를 렌더링 합니다. - Boolean 또는 nulll, 아무것도 렌더링 하지 않습니다. - 배열과 Fra.. React 주요 개념 State State는 props와 유사하지만, 비공개이며 컴포넌트에 의해 제어됩니다. class Clock extends React.Component { render() { return ( Hello, world! It is {this.props.date.toLocaleTimeString()}. ); } } ReactDOM.render( , document.getElementById('root') ); 위 코드를 props에서 state로 변경해 보겠습니다. class Clock extends React.Component { constructor(props) { // 초기 this.state를 지정하게 해주는 클래스 super(props); this.state = {date: new Date()}; } rende.. React 주요 개념 Components and props 컴포넌트는 하나의 조각이라고 생각하시면 됩니다. 그리고 각각의 컴포넌트는 개별적으로 컨트롤이 가능합니다. 개념적으로 컴포넌트는 javascript 함수와 유사하고 "props"라는 임의의 값을 입력받은 후 화면에 react 엘리먼트를 반환합니다. 컴포넌트는 함수 컴포넌트와 클래스 컴포넌트가 있습니다. 이 페이지에서는 두 가지 모두 다뤄보겠습니다. function Welcome(props) { // 함수 컴포넌트 return hello, {props,name}; } class Welcome extends React.Component { // 클래스 컴포넌트 render() { return Hello, {this.props.name}; } } react의 관점에서 볼 때 두가지 유형의 컴포넌트는 동일하지만 .. React 주요 개념 엘리먼트 렌더링 엘리먼트란 React의 가장 작은 단위로 html 태그의 시작 태그와 종료 태그 까지를 엘리먼트라고 합니다.. // 시작 태그 // 종료 태그 // 빈 태그 a tag // 엘리먼트 // 엘리먼트 같은 경우는 빈 요소(empty element)라고 하며 내용이 없는 경우를 말한다. ex) , 브라우저 DOM 엘리먼트와 달리 React 엘리먼트는 일반 객체이며(plain object) 쉽게 생성할 수 있습니다. React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트합니다. DOM에 엘리먼트 렌더링 보편적으로 react 엘리먼트를 랜더링 할 때 ReactDOM으로 관리하며 이것을 루트 DOM 노드라고 합니다.. React로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM 노드가 있습니다. .. React 주요 개념 JSX JSX는 자바스크립트(JavaScript) 문법의 확장판입니다. JSX는 react에서의 요소(Element)를 제공합니다. JSX 문법을 react에서 사용하게 된 배경에는 react.createElement()가 가지고 있는 문제점을 개선하기 위함입니다. 하단 예시를 참고해 주세요. JSX // JSX Style 홈 마이페이지 로그아웃 React.createElement() // React.createElement() Style React.createElement( "header", {id: "intro"}, React.createElement( "ul", {className: "nav"}, React.createElement( "li", "홈" ), React.createElement( "li", .. JavaScript 타입별 정리 Undefined 전역 undefined 속성은 undefined 원시타입을 나타내며 전역 스코프 변수입니다. 값을 할당하지 않은 변수는 undefiend 자료형이되며 메서드와 변수 선언도 변수값이 지정되어 있지 않은 경우 호출시 undefiend를 반환합니다. 함수는 값을 명시적으로 반환하지 않으면 undefined를 반환합니다. var x; if (x === undefined) { // true } var x; if (typeof x === 'undefined') { // true } // y를 선언한 적 없음 if (typeof y === 'undefined') { // 오류 없이 true로 평가 } if(y === undefined) { // ReferenceError } 이전 1 2 3 다음
