FrontEnd

[React] React.js 강좌 5. 이벤트 처리, Bind

React 이벤트 처리 1. 기본 문법 React에서 이벤트를 처리하는 방식은 DOM 엘리먼트에서 이벤트를 처리하는 방식과 거의 비슷하지만 아래와 같은 문법의 차이가 있습니다. React의 이벤트는 소문자대신 CamelCase를 사용해서 표기합니다. JSX를 사용해서 문자열이 아닌 함수로 이벤트 핸들러를 전달합니다. HTML Activate Lasers React Activate Lasers 2. action, onsubmit 또한 React에서는 false를 반환해도 기본 동작(form에서의 action 호출과 같은)을 방지할 수 없는데, 방지하려면 preventDefault를 명시적으로 호출해주어야 합니다. HTML Submit React function Form() { function handleS..

[React] React.js 강좌 4. 생명주기 이벤트

React 생명주기 이벤트 리엑트에서 사용되는 클래스에서도 일반 객체 지향에서 쓰이는 클래스와 동일하게 Life Cycle이 존재합니다. 많은 컴포넌트가 사용되는 애플리케이션은 리소스나 메모리를 많이 차지하기 때문에 이런 리소스나 메모리를 관리하기 위해 컴포넌트가 삭제될 때 사용중이던 리소스를 반환해주는 것이 중요합니다. 리엑트에서는 클래스가 DOM에 렌더링 될 때, 혹은 삭제 될 때 등과 같은 생명주기 이벤트가 존재합니다. 예를 들어 현재 시간을 표시해주는 기능을 구현한다고 합니다. function Clock(props) { return ( Hello, world! It is {props.date.toLocaleTimeString()}. ); } function tick() { ReactDOM.rend..

[React] React.js 강좌 3. Fragments

React Fragments React에서 컴포넌트가 여러 엘리먼트를 반환하도록 사용하는 것이 일반적인데, Fragment는 DOM에 의미 없는 div를 사용하지 않고 여러 하위 노드들을 그룹화해서 사용할 수 있습니다! render() { return ( ); } 예를 들어 Table과 테이블 아래의 Column을 세팅해주는 컴포넌트가 있다고 가정합니다. class Table extends React.Component { render() { return ( ); } } class Columns extends React.Component { render() { return ( Hello World ); } } 이때 Table의 출력결과는 아래와 같이 나옵니다. Hello World 결과를 보면 tr 아래에..

[React] React.js 강좌 2. 클래스형 Props & State 정리

클래스형 Props & State 정리 1. 개념 React에서 자주 사용되는 Props와 State의 개념과 차이점입니다. Props란, 컴포넌트가 가지고 있는 프로퍼티로 자식 컴포넌트가 부모 컴포넌트로부터 값을 받고 싶을 때, props를 통해 받아올 수 있습니다. 일반 객체 지향에서 특정 function의 인자(parameter)로 생각하면 좋습니다. 위는 객체 데이터를 표시하거나 변경 사항등을 알리기 위해 사용되며 읽기전용이므로 값을 수정할 수 없다는 특징을 가지고 있습니다. State는 private한 속성을 지니며 컴포넌트에 의해 완전히 제어되고 있다는 특징을 가지고 있습니다. 즉, 컴포넌트 내부에서만 사용할 수 있는 속성인 것이고, Local State라고도 부릅니다. 2. 기초 세 단계의 ..

[React] React.js 강좌 1. 기초 개념 정리

React.js 기초 개념 정리 1. 리엑트란? 웹페이지에 인터랙션이 자주 발생하고, 동적인 UI를 기존의 Javascript만으로 표현하면 개발과 수정이 일어날때마다 DOM을 직접 수정해야하기 때문에 코드가 난잡해지는 문제가 발생하곤 합니다. 처리해야할 이벤트도 다양해지고, 관리해야할 상태 값이나 DOM의 구조도 다양해지게 된다면 이에 따라 처리해야하는 업데이트 규칙도 복잡해지기 마련입니다. 리엑트는 이러한 문제점을 개선하기 위해 아래와 같은 방법을 사용합니다! View에서 어떠한 상태가 바뀌었을 때 그 상태에 따라 DOM을 어떻게 업데이트 할지를 정하는 것이 아니라, 아예 View를 다 날려버리고 새로 보여주면 코드가 난잡해지는 것을 방지할 수 있지 않을까, 하는 아이디어에서 리엑트가 탄생했습니다. ..

[ECMAScript] Javascript ES6 기초 문법 정리

ES6 기초 문법 정리 1. Class class Car { constructor(name) { this.brand = name; } present() { return 'I have a ' + this.brand; } } const mycar = new Car("Ford"); mycar.present(); Brand라는 변수에 대해서는 따로 정의하지 않아도 적용이 된다.Class의 constructor 생성자로 파라미터를 받고 클래스를 초기화 시키는 구조. 따라서 brand를 호출하면 생성자로 초기화 했던 Ford라는 string이 출력이 된다. class Car { constructor(name) { this.brand = name; } present() { return 'I have a ' + thi..