마탁이의 개발 블로그

blueshw.github.io/2017/07/01/arrow-function/ [ES6, react] 리액트에서 화살표 함수(arrow function)는 선택이 아닌 필수 리액트를 개발하다보면 이런 코드를 본적 있을것입니다. this(아마도 react 클래스 객체)에 속한 어떤 메서드를 다시 this 에 bind 한다라?? 굳이 왜 이런짓을 해야하는지 의문이 들만합니다. 리액트 blueshw.github.io - 위 페이지가 정리 및 이해가 잘되어 참조하여 학습하였다. 1. this - 객체지향 언어에서의 일반적인 this의 의미 : 현재 객체를 지칭 JavaScript의 this : 실행시의 context - 아래의 예에서는 'undefined' 가 콘솔에 출력된다. Hello()가 출력될 때 co..

1. React Event - HTML과 마찬가지로 React는 사용자 이벤트를 기반으로 작업을 수행할 수 있다. - React는 HTML과 동일한 이벤트를 가지고 있다. (e.g : click, change, mouseover 등) 2. Event 추가 - React 이벤트는 camelCase 로 작성된다. (Upper Camel Case : 각 합성어의 첫 글자만 대문자로 표기하는 코딩 룰) - React 이벤트 핸들러는 중괄호 안에 작성된다. // React import React from 'react'; import ReactDOM from 'react-dom'; function shoot() { alert("Great Shot!"); } const myElement = ( Take the sho..

1. 컴포넌트의 수명주기 - React의 컴포넌트에는 세 가지 주요 단게에서 모니터링하고 조작할 수 있는 수명주기가 있다. 마운트 (Mounting) 업데이트 (Updating) 마운트 해제 (UnMounting) 2. 마운트 (Mounting) - 마운트는 컴포넌트를 DOM에 넣는 것을 말한다. - React에는 컴포넌트를 마운트할 때 순서대로 호출되는 4개의 내장 함수가 있다. constructor() getDerivedStateFromProps() render() componentDidMount() - render() : 필수적이고 항상 호출된다. (HTML을 DOM에 출력하는 함수) 다른 함수는 선택사항이고 정의할 경우 호출된다. - constructor() : 컴포넌트가 초기화될 때 다른 것보다..

1. React State - React 구성 요소에는 기본으로 제공되는 state 개체가 있다. - state 객체는 컴포넌트에 속하는 속성 값을 저장하는 곳. - state 객체가 변경될 때, 컴포넌트는 리-렌더링 한다. - 아래와 같이 state 객체를 사용할 수 있다. import React from 'react'; import ReactDOM from 'react-dom'; class Car extends React.Component { constructor(props) { super(props); this.state = { brand: "Ford", model: "Mustang", color: "red", year: 1994, }; } render() { return ( My {this.sta..

1. 컴포넌트 Prop - React Props는 JavaScript의 함수 매개변수와 HTML의 attributes와 같다. - React Prop는 읽기 전용이다. 값을 변경할 수 없다. - 아래의 예제와 같이 사용한다. // Car.js import React from 'react'; import ReactDOM from 'react-dom'; class Car extends React.Component { render(){ return Hi, I am a {this.props.brand} ! } } export default Car; // index.js import React from 'react'; import ReactDOM from 'react-dom'; import Car from './..

1. React 컴포넌트(Components) - 컴포넌트 HTML Element를 반환하는 함수와 같다. - 독립적이고 재사용한 코드이다. - JavaScript 함수와 동일한 목적을 제공하지만 독립된 상태로 작동하고, render()함수를 통해 HTML을 반환한다. 2. 클래스 컴포넌트 요소 만들기 - React 컴포넌트를 생성할 때 컴포넌트 이름은 대문자로 시작해야 한다. - 컴포넌트는 extends React.Component문을 포함하야하며, 이 것은 React.Component에 대한 상속을 생성하고, 컴포넌트에 React.Component의 함수에 대한 액세스 권한을 부여한다. - 컴포넌트에도 render() 함수가 필요하며 이 함수는 HTML을 반환한다. import React from '..

1. React render() 기본 예제 - index.js (src 폴더) import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render(Hallo, document.getElementById('sandy')); - index.html (public 폴더) - 위 코드 2개를 실행 후 결과를 보면 Hallo 가 밑에 추가 되어 있다. 2. React JSX(JavaScript XML) - JSX를 사용하면 React에서 HTML을 더 쉽게 작성하고 추가할 수 있다. - JSX를 사용하면 JavaScript로 HTML 요소를 작성하고 createElement(), appendChild() 및 '/' 없이 DOM에 배치 가능. -..

1. ES6 소개 - ES6는 ECMAScript 6를 나타낸다. - React는 ES6를 사용하며 다음과 같은 몇 가지 기능에 학습해야 한다. 클래스 Arrow Functions 변수 (let, const, var) 2. Class - 클래스는 함수의 한 유형이지만 function 키워드 대신 class를 사용하고 속성은 constructor() 메서드 내부에 할당된다. class Car { // 생성자 constructor(name) { this.brand = name; } // 메서드 print() { return 'I have a ' + this.brand; } } - 상속은 아래와 같이 extends 키워드를 사용한다. class Car { // 생성자 constructor(name) { thi..

www.w3schools.com/react/ - 위 웹사이트에서 예제를 참고하며 실습한다. React Tutorial React Tutorial React is a JavaScript library for building user interfaces. React is used to build single page applications. React allows us to create reusable UI components. Start learning React now » Learning by Examples Our "Show React" tool makes it ea www.w3schools.com ko.reactjs.org/tutorial/tutorial.html - 또한 아래 사이트에서는 이미 Ga..

1. JavaScript - 유형 및 연산자, 표준 내장 객체 및 메소드가 있는 다중 패러당미, 동적 언어. - 구문은 Java 및 C 언어를 기반으로 둠. - JavaScript는 클래스 대신 객체 프로토 타입을 사용하여 객체 지향 프로그래밍을 지원. 함수는 객체이며, 함수는 실행 가능한 코드를 유지하고 다른 객체와 마찬가지로 전달될 수 있다. 2. JavaScript의 Type 수 (Number) 문자열 (String) 부울 (Boolean) 객체 (Object) 함수 (Function) 배열 (Array) 날짜 (Date) 정규식 (RegExp) 널 (Null) 정의되지 않음 (Undefined) 3. 수 (Number) - parseInt() 함수를 사용하여 문자열을 정수로 변환할 수 있다. (p..