안녕하세요. 이번 포스팅에서는 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(뷰)에 어떤 모습으로 보일지 어떤 동작을 할지에 대한 부분을 코드로 정의해..

옵저버 패턴 (Observer Pattern) 옵저버 패턴은 개개체의 상태 변화를 관찰하는 관찰자들, 즉 옵저버들의 목록을 객체에 등록하여 상태 변화가 있을 때마다 메서드를 통하여 관찰 대상자가 직접 옵저버들에게 통지하여 상태를 동기화 할 수 있도록 하는 디자인 패턴을 의미합니다. ■ 옵저버 패턴 예제 ▶옵저버 패턴이 적용된 예제를 구현 해보겠습니다. ● Generator : 관찰 대상자를 나타내며, 현재 관찰 대상자에 붙어있는 Observer들을 관리합니다. 뿐만 아니라 현재 관찰 대상자의 상태 정보를 얻기 위한 메서드를 제공하며, 상태 변화시 등록되어 있는 모든 관찰자들에게 상태 변화를 통지해주는 메서드를 제공합니다. ● StringGenerator : Generator를 상속받는 실제 상태 정보를 ..

메멘토 패턴 (Memento Pattern) 메멘토 패턴은 객체의 상태 정보를 저장하고 사용자의 필요에 의하여 원하는 시점의 데이터를 복원 할 수 있는 패턴을 의미합니다. ■메멘토 패턴 예제 구조 ▶ 실제로 메멘토 패턴을 사용하여 객체 정보를 저장하고 복원하는 예제를 살펴 보겠습니다. 예제는 간단히 String형 데이터 하나와 Int형 데이터 하나에 대한 정보로 가지는 Information 객체를 구현하였습니다. ● User : 메멘토 패턴이 적용 된 Information 객체를 실제로 사용하는 사용자입니다. ● Information : 상태를 저장하고 복원 할 데이터를 가지고 있는 클래스입니다. ● Memento : 특정 시점의 Information의 상태정보를 저장하는 클래스입니다. ● CareTak..

데코레이터 패턴 (Decorator Patter) 중심이 되는 객체에 부가적인 기능을 동적으로 추가하고자 할 때 사용하는 패턴입니다. ■ 데코레이턴 패턴 구조 (예제) 예제는 기본 빵 객체를 대상으로 여러가지 재료를 조합하여 동적으로 햄버거를 만드는 예제입니다. ● Hamburger : 장식할 대상이 가져야 할 공통 인터페이스를 정의합니다. ● Bread : 구체적인 장식 할 대상입니다. 다른 장식 대상을 장식 할 수는 없습니다. ● Ingredient : 장식 할 대상을 장식하는 클래스로 또한 Hamburger의 인터페이스를 가지기 때문에 장식 대상이 될 수도 있습니다. 장식 할 대상의 객체를 참조합니다. ●Shrimps_Patty 와 Bulgogi_Patty : Ingredient의 인터페이스를 구현..

방문자 패턴 (Visitor Pattern) 데이터 구조와 연산을 분리하여 데이터 구조의 원소들을 변경하지 않고 새로운 연산을 추가 할 수 있습니다. 새로운 연산을 추가하려면 새로운 방문자를 추가하기만 하면 됩니다. ■ 방문자 패턴 구조 (예제) 오른쪽에는 Composite 패턴으로 구현 된 File과 Directory로 이루어진 데이터 구조가 있습니다. 다만, 방문자를 수용하기 위해 Element 인터페이스를 상속받아서 accept() 메서드를 각각 구현하고 있으며 각 element의 경로를 구하는 연산 부분이 방문자에서 이루어집니다. 왼쪽에는 방문자로 데이터 구조를 방문하면서 필요한 연산을 수행합니다. 각 element에 접근하기 위한 visit메서드를 오버라이딩 및 오버로딩을 하고 있습니다. ■ 소..

컴포지트 패턴 (Composite Pattern) 객체들을 트리 구조로 구성하여 그릇 객체와 내용물 객체를 동일하게 취급할 수 있도록 만들기 위한 패턴입니다. Composite Pattern Structure ● Component : Leaf와 Composite의 상위 클래스로써 이들을 동일하게 취급 할 수 있도록 공통 인터페이스 정의 ● Composite : 그릇을 나타내는 역할을 하고, 또 다른 그릇을 참조하거나 내용물 객체를 참조 할 수 있음 ● Leaf : 내용물 객체로서, 그릇 객체를 포함 할 수 없음 예제 예제는 디렉토리 구조를 구성하는 예제로 디렉토리는 그릇 객체에 해당되며 파일은 내용물 객체에 해당합니다. 예제의 클래스 다이어그램입니다. Entry 객체는 File과 Directory를 동일..

역할 사슬 패턴 (Chain Of Responsibility) 여러 개의 객체 중에서 어떤 것이 요구를 처리할 수 있는지를 사전에 알 수 없을 때 사용됩니다. 즉 요청 처리가 들어오게 되면 그것을 수신하는 객체가 자신이 처리 할 수 없는 경우에는 다음 객체에게 문제를 넘김으로써 최종적으로 요청을 처리 할 수 있는 객체의 의해 처리가 가능하도록 하는 패턴입니다. 구조 (Structure) ● Handler : 요청을 처리하기 위한 수신자들이 가져야 할 인터페이스를 정의 ● ConcreteHandler : Handler 인터페이스 구현, 각자가 요청 종류에 따라 자신이 처리 할 수 있는 부분을 구현 ● Client : 맨 처음 수신자에게 처리를 요구함 예제 예제는 역할 사슬 패턴을 사용하여 1~20까지의 반..