Front-end Framework/React (Reactjs)6 6. React의 이벤트 처리 이 글에서는 React에서의 이벤트를 다루는 방법에 대해서 알아보도록 하겠습니다. 본 글의 내용을 이해하기 위해서는 아래와 같은 사전 지식이 필요합니다. 캡처링 및 버블링 Introduction to events Events are actions or occurrences that happen in the system you are programming, which the system tells you about so you can respond to them in some way if desired. For example, if the user selects a button on a webpage, you might want to respond to that a developer.mozilla.org .. 2020. 10. 19. 5. 컴포넌트 라이프사이클 이벤트 전 글에서 전반적인 컴포넌트에 대한 내용과 생성 방법을 살펴보았습니다. 이 글에서는 컴포넌트를 좀 더 세밀하게 제어할 수 있도록 React 컴포넌트의 라이프사이클 이벤트에 대해 알아보도록 하겠습니다. 1. 라이프사이클 이벤트의 분류 컴포넌트는 각 프로세스가 진행되는 시점에 따라 라이프사이클 이벤트로 불리는 특별한 함수가 실행됩니다. 개발자는 이 라이프 사이클 이벤트를 기반으로 컴포넌트의 동작을 제어하고 사용자 정의를 할 수 있습니다. 라이프사이클 이벤트는 크게 세 가지로 분류됩니다. 마운팅(mounting) 이벤트 : 페이지에 컴포넌트를 나타내는 이벤트로, React 엘리먼트(컴포넌트 클래스의 인스턴스)를 DOM 노드에 추가하는 시점에 발생. 1회만 실행. 갱신(updating) 이벤트 : 컴포넌트 정보.. 2020. 10. 19. 4. 컴포넌트 이 글에서는 컴포넌트에 대해 다루어보겠습니다. 컴포넌트와 속성(state, props)에 대한 내용으로 구성됩니다. 1. 컴포넌트 대부분의 UI는 여러 개의 HTML 요소로 이루어져 있습니다. 계층적으로 더 복잡한 구조를 만드는 방법은 엘리먼트를 중첩하는 것입니다. 그런데 엘리먼트를 중첩하다 보면, 곧 입력할 엘리먼트가 굉장히 많다는 문제를 발견하게 될 것입니다. 그래서 React는 컴포넌트 기반 아키텍처를 활용합니다. 컴포넌트 클래스를 이용하면 기능을 느슨하게 결합된 부분으로 분리하여 코드를 재사용할 수 있습니다. 여기서 컴포넌트 클래스는 컴포넌트라고 부르기도 합니다. (웹 컴포넌트와 혼동하지 말아야 합니다) 이 컴포넌트 클래스의 인스턴스인 사용자 정의 엘리먼트를 생성하면, 이식 가능한 클래스(구성할 .. 2020. 10. 19. 3. 리액트의 문법 (+JSX) 이 장에서는 React의 문법과 JSX의 문법에 대해서 알아보도록 하겠습니다. 1. React의 문법 앞의 글에서 보았던 hello world 예제를 다시 보도록 하겠습니다. [App.js] import React, { Component } from 'react'; class App extends Component { render() { return ( Hello,world! ); } } export default App; 위 예제에서 사용한 몇 가지 키워드에 대해 살펴보도록 하겠습니다. (1) import, export 모듈을 불러올 때는 import를 사용하여야 하고, 모듈을 다른 파일로 보내려면(다른 모듈에서 import 하여 사용하도록 하게 하려면) export라고 명시해주어야 합니다. 위 예제에.. 2020. 10. 19. 2. React 개발 설정 이 글에서는 React 개발을 위한 설정을 진행하도록 하겠습니다. hello world의 출력까지 확인해 볼 것이며, 어떤 환경으로 구성되어야 하는지 살펴보겠습니다. 1. Create React App React로 개발하기 위해서는 단순히 React의 문법만 알아서 되는 것이 아니라, 개발환경을 구축해주어야 합니다. 이전 장에서 언급했듯이 우리의 React 프로젝트는 ECMAscript 6 (2015)/ECMAscript 7 (2016)와 JSX를 사용하여 개발됩니다. 그러나 모던 브라우저는 대부분 ES5 기반으로 동작하며 ES6/ES7, JSX를 온전히 지원하지 못합니다. 그러므로 작성한 코드가 브라우저에서 제대로 동작할 수 있도록 ES5로 변환해 주는 트랜스파일러, Babel이 필요하게 됩니다. 또한.. 2020. 10. 19. 1. React? React는 페이스북에서 개발한 자바스크립트 라이브러리입니다. 이 글에서는 React의 개요에 대해 다루겠습니다. React에 대한 내용을 이해하기 위해서는 다음과 같은 사전 지식이 필요합니다. HTML CSS Javascript 함수형 자바스크립트 패러다임 화살표 함수 표현식 (arrow function expression) SPA(Single Page Application) Restful 1. React 란? React는 조합형 인터페이스를 제작하기 위한 오픈소스 라이브러리로서, 페이스북이 개발하고 관리하고 있습니다. 정식 명칭은 React이나 ReactJS라고도 합니다. "React는 UI를 구축하기 위한 선언적이고 효율적이며 유연한 자바스크립트 라이브러리" "지속해서 데이터가 변화하는 대규모 어플.. 2020. 10. 19. 이전 1 다음
