JavaScript19 javascript에서 Class 사용하기 - 2 Class 정의 JavaScript에서 Class는 사실 함수입니다. 함수를 함수 선언과 함수 표현식으로 정의할 수 있듯이 class 문법도 class 선언과 class 표현식 두가지 방법으로 정의가 가능합니다. JavaScript 엔진은 function 키워드를 만나면 Function 오브젝트를 생성하듯, class 키워드를 만나면 Class 오브젝트를 생성합니다. class는 클래스를 선언하는 키워드이고 Class 오브젝트는 엔진이 class 키워드로 생성한 오브젝트입니다. Class 선언 함수 선언과 달리 클래스 선언은 호이스팅이 일어나지 않기 때문에, 클래스를 사용하기 위해서는 먼저 선언을 해야합니다. 그렇지 않으면 ReferenceError 가 발생합니다. Class 표현식 Class 표현식은 .. javascript에서 Class 사용하기 - 1 소개 javascript는 ES6에서부터 Class 지원을 시작했습니다. 단 javascript의 class는 다른 객체지향 언어에서 사용되는 Class 문법과는 다르게 사용됩니다. javascript에는 Class라는 개념이 없기 때문에 javascript는 prototype을 이용해 상속을 구현합니다. prototype javascript의 Class를 이해하기 위해서는 prototype에 대한 이해가 선행되어야 하기 때문에 prototype에 대해서 알아보도록 합시다. 자바스크립트는 원시 값(primitive, 또는 원시 자료형)을 제외하고는 모두 객체입니다. Object와 Function은 function(즉, 생성자)입니다. object는 객체를 의미합니다. function Card() { } .. React Fragments React를 이용해 컴포넌트를 만들고 JSX로 엘리먼트를 return해줄때 하나의 부모 엘리먼트로 감싸어지지 않으면 에러가 발생하는 경험을 겪은적이 있었다. function FuncName(props) { ... return ; } 이를 해결하기 위해서 원래 구조 계획에 있지 않던 엘리먼트를 생성하여 씌워주었지만 이 문제를 해결해주는 좋은 방법이 React에는 이미 있었다. 바로 이번 글에서 소개할 Fragments라는 문법이다. Fragments Fragments는 DOM에 별도의 노드를 추가하지 않고 여러 자식을 그룹화할 수 있다. class Table extends React.Component { render() { return ( ); } } 위와 같은 코드가 있을때 Columns 컴포넌트에는 만.. 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 주요 개념 엘리먼트 렌더링 엘리먼트란 React의 가장 작은 단위로 html 태그의 시작 태그와 종료 태그 까지를 엘리먼트라고 합니다.. // 시작 태그 // 종료 태그 // 빈 태그 a tag // 엘리먼트 // 엘리먼트 같은 경우는 빈 요소(empty element)라고 하며 내용이 없는 경우를 말한다. ex) , 브라우저 DOM 엘리먼트와 달리 React 엘리먼트는 일반 객체이며(plain object) 쉽게 생성할 수 있습니다. React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트합니다. DOM에 엘리먼트 렌더링 보편적으로 react 엘리먼트를 랜더링 할 때 ReactDOM으로 관리하며 이것을 루트 DOM 노드라고 합니다.. React로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM 노드가 있습니다. .. 이전 1 2 3 다음
