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

안녕하세요. 이번 포스팅에서는 자바스크립트(JavaScript)에서 객체 생성자 함수를 선언하고 객체를 생성하는 방법에 대해서 알아보도록 하겠습니다. 자바스크립트에서 객체를 생성하기 위해서는 먼저 자바스크립트 엔진에 내장된 객체 생성자 함수(Object Constructor Function)를 통해 먼저 선언을 해야 합니다. ▼ 객체 생성자 함수 선언은 function 키워드를 사용하여 나타냅니다. function 함수명(매개변수){} 와 같은 형태로 사용합니다. 함수명은 소문자로 시작해도 무방하지만, 대문자로 시작하는 게 좋습니다. 함수 정의문에는 1개의 속성과 1개의 함수가 등록되어 있습니다. 속성은 this.name = 속성값; 형태로 사용되며 함수는 this.showName = function()..

안녕하세요. 이번 포스팅에서는 함수형 컴포넌트(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; ▼ 매번..

안녕하세요. 이번 포스팅에서는 자바 스크립트(JavaScript)에서 window 객체의 내장 함수들을 이용하여 다양한 형태의 팝업창을 띄우는 방법에 대해서 알아보겠습니다. 브라우저에 내장되어있는 객체를 '브라우저 객체'라고 부릅니다. window 객체는 브라우저의 객체의 최상위 객체로 다양한 함수들을 제공하고 있습니다. 이번 포스팅에서 알아볼 브라우저에 팝업창을 띄우는 기능이 내장된 함수들도 방금 말한 window 객체에 내장되어있는 함수들입니다. 그럼 하나씩 알아보도록 하겠습니다. 1. window.open() 함수 open() 함수를 사용하여 특정 URL 페이지를 띄울 수 있습니다. window.open("URL", "팝업이름", "팝업 옵션"); ▼ 첫 번째 인자로는 팝업창을 열었을 때 연결될 U..

안녕하세요. 이번 포스팅에서는 리액트(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..

안녕하세요. 이번 포스팅에서는 자바스크립트(JavaScript)에서 일정 시간마다 코드를 실행할 수 있는 setInterval과 setTimoutout 함수에 대해서 알아보도록 하겠습니다. 1. setInterval / clearInterval setInterval() 함수는 일정한 시간 간격으로 코드를 반복 실행하는 함수입니다. var 참조변수 = setInterval(function() {코드}, 시간간격(ms) clearInterval(참조변수) ▼ setInterval() 함수로 넘기는 인자 정보는 2개입니다. 첫 번째 인자는 일정한 시간 간격으로 반복 실행하고자 하는 코드정보입니다. 두 번째는 시간 정보로 ms 단위로 설정합니다. 즉 1초 간격으로 코드를 실행하고 싶으면 1000으로 지정하면 됩..

안녕하세요. 이번 포스팅에서는 자바스크립트(JavaScript)에서 문자열 객체인 String 객체에 대해 정리해보겠습니다. 1. 문자열 객체 생성 및 초기화 var 참조변수 = new String(문자열 데이터) var 참조변수 = 문자열 데이터 ▼ 문자열 객체를 선언하는 방식은 두 가지가 있습니다. 첫 번째는 new 연산자를 통해 String 객체를 생성하면서 생성자 정보로 문자열 데이터를 넘기는 방식이 있습니다. 두 번째 방식은 new 연산자를 사용하지 않고 사용하는 방식으로 선언한 참조 변수에 문자열 데이터를 입력하여 객체를 생성하는 방식이 있습니다. 아래는 실제로 두 가지 방식을 사용하여 문자열 객체를 생성한 모습입니다. 2. 문자열 함수 - charAt() 자바스크립트(JavaScript)에서..

안녕하세요. 이번 포스팅에서는 지난 포스팅 배열 객체를 사용하는 방법에 이어서 배열 객체에 내장된 다양한 함수에 대해서 알아보도록 하겠습니다. 자바 스크립트 배열 객체에는 다양한 종류의 내장함수가 있습니다. 각각의 종류와 설명은 아래 표를 참조해주세요. 함수 설명 pop() 배열의 맨 마지막 요소를 반환 및 제거합니다 push(new data) 배열의 맨 마지막 인덱스에 새로운 데이터를 추가합니다 shift() 배열의 맨 앞에있는 요소를 반환 및 제거합니다. unshift(new data) 배열의 맨 앞에 인덱스에 새로운 데이터를 추가합니다. join(연결할 문자) 배열 객체의 요소들을 인자로 넘긴 문자로 연결한 새로운 데이터를 반환합니다. reverse() 배열 객체의 데이터의 순서를 바꾼 새로운 배열..

안녕하세요. 이번 포스팅에서는 자바 스크립트에서 배열 객체를 생성하고 값을 초기화하는 방식에 대해서 알아보겠습니다. 변수는 데이터 한 개를 저장하는 저장소입니다. 데이터가 5개면 변수는 5개가 필요한 셈이죠. 반면에 배열의 경우는 하나의 저장소에 여러 개의 데이터를 저장하는 것이 가능합니다. 자바스크립트에서 배열을 생성하고 값을 초기화하는 다양한 방식에 대해 알아보고 배열의 데이터값에 접근하는 방법에 대해서도 알아보도록 하겠습니다. 1. 배열 생성 방법 #1 var 참조 변수 이름 = new Array(); 참조변수[0] = 값1; 참조변수 [1] = 값2 ... 참조변수[n] = 값n ▼ 첫 번째 방식은 new 키워드를 통해 생성하는 방법입니다. 각 index 배열 요소에 접근하여 값을 초기화하기 위해..

안녕하세요. 이번 포스팅에서는 배열 객체에 내장된 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에 대해 ..

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

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