안녕하세요. 이번 포스팅에서는 컴포넌트 생명 주기 (Component Life Cycle)과 관련된 함수들에 대해서 알아보도록 하겠습니다. 리액트 컴포넌트에는 라이프사이클(Life Cycle)이 존재합니다. 리액트 앱을 개발하면서 렌더링 직전에 특정한 작업을 해야 한다던지 컴포넌트 업데이트 전후에 처리해야 할 작업이 있을 수 있습니다. 이때 리액트 컴포넌트 라이프사이클(Life Cycle) 관련 함수들을 이용하면 이를 처리할 수 있습니다. 컴포넌트 라이프 사이클 함수 종류는 아래와 같습니다. 컴포넌트 Life Cycle Life Method 종류 ▼ will 접두사가 붙은 함수는 어떤 작업을 처리하기 직전에 호출되는 함수이고 did 접두사가 붙은 함수는 어떤 작업을 처리한 후에 호출되는 함수입니다. 컴포..

안녕하세요. 이번 포스팅에서는 함수형 컴포넌트(Functional Component) 사용법에 대해서 알아보도록 하겠습니다. 지금까지 Component를 정의하기 위해서는 ES6 기반의 class 문법을 사용하여 정의하였습니다. 컴포넌트(Component)에서 Component Life Cycle API를 사용하는 경우나 state를 사용하는 경우에는 아래와 같이 항상 정의해왔습니다. import React, { Component } from 'react'; class MyComponent extends Component { render(){ return( Hello World!! My Name is {this.props.name} ); }; } export default MyComponent; ▼ 매번..

안녕하세요. 이번 포스팅에서는 리액트(React)를 활용하여 유동적인 데이터를 렌더링하는 방식과 관련된 간단한 예제 App을 만들어보도록 하겠습니다. 1. 고정 데이터 렌더링 먼저 고정 데이터를 렌더링하는 간단한 예제입니다. 예제는 웹페이지에 game List를 보여주는 형태로 어떠한 데이터 변경도 없는 App입니다. import React, { Component } from 'react'; import MyComponent from "./MyComponent"; class App extends Component { render() { return ( ); } } export default App; ▼ 먼저 최상위 컴포넌트(Component)에 해당하는 App Component입니다. MyComponen..

안녕하세요. 이번 포스팅에서는 배열 객체에 내장된 map() 함수를 통하여 반복되는 Component를 렌더링하는 방식에 대해서 알아보겠습니다. 1. map() 함수 기본 사용법 map() 함수는 각 배열의 요소를 돌면서 인자로 전달된 함수를 사용하여 처리 된 새로운 결과를 새로운 배열에 담아 반환하는 함수입니다. 아래 샘플 예제를 통해 사용법을 살펴보겠습니다. const numbers = [1, 2, 3, 4, 5]; const result = numbers.map((num) => num *2); console.log(result); ▼ numbers 배열 객체를 선언하고 [1, 2, 3, 4, 5]로 초기화하였습니다. map() 함수를 통해 배열 요소의 각 값에다가 *2한 결과를 return하고 있습..

안녕하세요. 이번 포스팅에서는 리액트(React)에서 이벤트를 처리하는 방식에 대해서 알아보겠습니다. 사용자가 브라우저에서 특정 DOM 요소와 상호작용하는 것을 이벤트라고 부릅니다. 예를 들어 버튼을 Click 하는 onClick 이벤트라든지 입력 요소의 값이 변경되는 onChange 이벤트와 같이 사용자의 특정 행동에 대해 핸들러를 통해 특정 이벤트에 대해 처리를 할 수 있습니다. 리액트(React)에서는 이벤트 처리와 관련해서 몇 가지 주의사항이 있습니다. ■ 이벤트 이름은 CamelCase 형식으로 작성합니다. ■ 이벤트 핸들러는 자바 스크립트 코드가 아닌 함수 구현체에 해당하는 값을 전달합니다. ■ DOM 요소에만 이벤트를 지정할 수 있습니다. {console.log("Click")}}> Clic..

안녕하세요. 이번 포스팅에서는 state 사용하는 방법에 대해 알아보겠습니다. 앞선 포스팅에서 배운 props의 경우는 주체가 되는 컴포넌트(Component)의 부모 컴포넌트(Component)에서 값을 지정하고 주체가 되는 컴포넌트(Component)에서는 해당 값을 읽기 전용으로만 사용할 수 있었습니다. 이번 포스팅에서는 주체가 되는 컴포넌트(Component)에서 직접 값을 변경하고 읽을 수 있는 state에 대해서 알아보겠습니다. 1. state 초기값 설정 import React, { Component } from 'react'; class MyComponent extends Component { constructor(props) { super(props); this.state = { num ..

안녕하세요. 이번 포스팅에서는 props를 사용하는 방법에 대해서 알아보도록 하겠습니다. props는 properties의 약자로 특정 컴포넌트의 속성을 지정할 때 사용됩니다. props는 특정 컴포넌트를 불러와 사용하는 부모 컴포넌트(Component)에서 설정할 수 있습니다. 앞서 포스팅에서는 컴포넌트(Component)를 생성하는 방법에 대해 알아보았는데요. App Component가 MyComponent를 불러와 사용하는 형태로 MyComponent를 생성하였습니다. 이때 App Component가 MyComponent의 부모 컴포넌트(Component)가 되며 App Component에서 MyComponent에 대한 props를 지정할 수 있습니다. 아래 샘플 예제를 시작으로 props에 대해 ..

안녕하세요. 이번 포스팅에서는 리액트 주요 특징에 대해서 알아보도록 하겠습니다. 1. 리액트가 탄생 배경 앱(App)을 구동하게 되면 처음 데이터를 가지고 뷰(View)를 보여주게 됩니다. 그러다가 데이터가 변경되면 그에 맞게끔 뷰(View)도 갱신이 되어야 하지요. 문제는 특정 데이터가 변경되면 그에 맞게끔 뷰(View)를 갱신하는 복잡한 로직을 짜야 합니다. 페이스북에서는 데이터 변경이 있으면 기존의 뷰(View)에서 갱신을 하는 것이 아니라 기존의 뷰(View)를 날려버리고 데이터 변경이 있을 때마다 새로운 뷰(View)를 생성하는 것이 어떨까라는 발상을 하게 됩니다. 문제는 데이터가 변경 될 때마다 새로운 뷰(View)를 생성한다는 것은 성능적으로 문제가 생기게 됩니다. 예를 들어 텍스트를 입력할..

안녕하세요. 이번 포스팅에서는 리액트(React)에서 컴포넌트(Component)를 생성하는 방식에 대해서 알아보겠습니다. 1. MyComponent.js 파일 생성 먼저 컴포넌트(Component)를 만들기 위해서는 컴포넌트 코드를 정의해야 합니다. 컴포넌트 코드를 정의할 파일을 생성해줍니다. ▼ 먼저 프로젝트 경로 상의 src 밑에 상단의 파일 모양의 아이콘을 클릭해 MyComponent.js 파일을 만들어 줍니다. 또는 src 폴더에서 마우스 우클릭을 통해 New File 메뉴를 통해 생성하셔도 됩니다. 2. MyComponent.js 소스 작성 이제 우리가 만든 MyComponent.js에 해당 Component가 View(뷰)에 어떤 모습으로 보일지 어떤 동작을 할지에 대한 부분을 코드로 정의해..

Angluar Routing & Navigation 라우팅과 내비게이션! PA (Single Page Application) 단일 페이지 애플리케이션은 모던 웹의 패러다임 장점 기존의 서버 사이드 렌더링과 비교할때 배포가 간단하며 네이티브 앱과 유사한 사용자 경험을 제공 단점 link tag를 사용하는 전통적인 웹 방식은 새로운 페이지 요청 시마다 정적 리소스가 다운로드되고 전체 페이지를 다시 렌더링하는 방식으로 동작 새로고침이 발생되므로, 변경이 필요없는 부분을 포함하여 전체 페이지를 갱신하는 것으로 비효율적 SPA 웹 애플리케이션에 필요한 모든 정적 리소스를 애플리케이션 최초 기동 시에 한번만 다운로 이후 새로운 페이지 요청시 페이지 갱신에 필요한 데이터만을 전달받아 페이지를 갱신하므로 전체적인 트래..