'언어' 카테고리의 글 목록 (2 Page)

Ref

Ref(reference) ?

HTML에서 id를 이용해서 DOM에 이름을 다는 것처럼 리액트 프로젝트 내부에서 DOM에 이름을 다는 개념입니다.

Ref를 사용하는 이유 ?

ref는 DOM을 직접 건드려야 하는경우 사용합니다.

id를 사용할 수는 있지만, 같은 컴포넌트를 여러번 사용할 경우 유일해야하는 id가 중복이 발생 할 수 있습니다.

State로는 대체 불가능 한가?

아래와 같은 경우는 state만으로 해결이 불가능 합니다.

1) 특정 <input>태그에 포커스를 주는 경우

2) 스크롤 박스를 조작하는 경우

3) <Canvas>태그에 그림을 그리는 경우

리액트에서 id는 사용 불가?

다른 라이브러리나 프레임워크를 사용할 경우 id를 꼭 사용해야만 하는 경우라면 중복 방지를 위해 뒤에 추가 텍스트를 붙여서 사용합니다.

예) button01, button02

Ref 사용 방법

props를 설정하는 방법과 유사하며 , ref 값으로 콜백 함수를 전달합니다.

<input ref="{(ref)=> {this.input.ref}}" />

Ref사용 예제(Scroll)

Ref를 이용해서 자식 컴포넌트인 ScrollBox의 스크롤을 아래, 위로 이동하는 예제입니다.

ScrollBox컴포넌트에서 <div>태그에 ref를 넘겨줍니다.

ScrollBox.js

import React, { Component } from 'react';

class ScrollBox extends Component {
    scrollToChange =(param) =>{
        const{scrollHeight, clientHeight} = this.box;
        if(param==='d'){
            this.box.scrollTop = scrollHeight - clientHeight;
        }else{
            this.box.scrollTop = 0;
        }
    }

    render() {
        const style={
            border : '1px solid black'
            , height : '300px'
            , width : '300px'
            , overflow : 'auto'
            , position : 'relative'
        };
        const innerStyle ={
            width : '100%'
            ,height : '500px'
            ,background : 'linear-gradient(white, black)'
        }

        return (
            <div
                style = {style}
                ref={(ref)=>{this.box=ref}}>
                <div style = {innerStyle}/>
            </div>
        );
    }
}

export default ScrollBox;

ScrollBox에서 box를 넘겨받은 후 ScrollBox에서 정의한 함수 scrollToChange() 함수를 사용할 수 있습니다.

App.js

import React, { Component } from 'react';
import './App.css';
import ScrollBox from './component/ScrollBox';

class App extends Component {
  state = {
    upDown : 'd'
    ,value : 'To Bottom'
  }
  updownChange =() =>{
    if(this.state.upDown === 'd'){
      this.setState({
        upDown:'u'
        ,value : 'To Top'
      }); 
    }else{
      this.setState({
        upDown:'d'
        ,value : 'To Bottom'
      }); 
    }
    
  };
  render() {
    return (
      <div>
        <ScrollBox ref={(ref)=>this.ScrollBox=ref}/>
        <button 
          onClick={
            ()=>{
              this.ScrollBox.scrollToChange(this.state.upDown);
              this.updownChange();
            } 
          }
        >
          {this.state.value}
        </button>
      </div>
    );
  }
}

export default App;

동작 결과

참고 : 리액트를 다루는 기술(저:VELOPERT)

저작자표시 비영리

'언어 > ReactJS' 카테고리의 다른 글

[React] 라이프 사이클 함수 (0)	2019.05.07
[React] 컴포넌트 반복 (0)	2019.05.05
[React] 이벤트 핸들링 (2)	2019.04.25
[React] State (0)	2019.04.12
[React] Props (1)	2019.04.11

힙 정렬(Heap Sort)

힙(Heap) ?

최대값, 최소값을 찾아내는 연산을 빠르게 하기위해 고안된 완전트리를 기본으로 한 자료구조

힙정렬

힙 정렬은 분할정복 알고리즘으로 최대 힙 트리나 최소 힙 트리를 구성해 정렬 하는 방법 입니다.

어떠한 방법?

예제는 배열을 이용해서 트리구조를 구성했습니다.

배열을 이용한 트리구조에서 주의할 점은 균형 잡히지 않은 노드의 경우 실제로 없는 노드를 위해 배열 공간을 확보해야 하기 때문에 균형잡힌 노드에 한해서 사용 가능합니다.

아래와 같은 이진트리가 있을 때

A노드부터 1번부터 12번까지 숫자를 매기면 아래 그림과 같습니다.

이 때 i노드의 부모번호는 i/2

i노드의 왼쪽 자식노드는 2i 오른쪽 자식노드는 2i+1을 만족합니다.

예) 5번 노드의 부모노드 번호는 5/2=2(버림)

4번 노드의 왼쪽 자식노드는 4*2=8 오른쪽 자식도느는 4*2+1 = 9

이 개념을 이용하면 배열을 이용해서 트리를 구성할 수 있습니다.

배열을 이용한 힙 정렬 예제

upHeap함수

아래에서 위로 올라가면서 자리를 바꾸는 함수입니다.

void upHeap(int array[], int k){
    int v;
    v = array[k];
    array[0] = MAX;
    while (array[k/2]<=v) // 부모 <= 자식
    {
        array[k] = array[k/2];
        k/=2;
    }
    array[k] = v;
}

downHeap함수

upHeap함수와 반대로 아래로 내려가면서 비교하는 함수입니다.

자식노드 왼쪽과 오른쪽 노드를 비교해서 더 큰 노드를 이용합니다.

void downHeap(int array[], int n, int k){
    int i;
    int v = array[k];
    while(k<=n/2){
        i = k<<1; // 2*k
        if(i<n && array[i]<array[i+1]) i++; //왼쪽, 오른쪽 노드 비교
        if(v>=array[i]) break;
        array[k] = array[i];
        k=i;
    }
    array[k] = v;
}

insert, delete함수

insert는 입력받은 배열을 트리구조로 사용하기 위해 입력하는 함수

delete는 정렬된 데이터를 받아오는 함수 입니다.

void insert(int array[], int *hn, int v){
    array[++(*hn)] = v;
    upHeap(array, *hn);
}

int delete(int array[], int *n){
    int v = array[1];
    array[1] = array[(*n)--];
    downHeap(array, *n, 1);
    return v;
}

힙 정렬 함수

입력받은 배열을 정렬하는 함수입니다.

첫번 째 for문 : 배열을 순차적으로 삽입

두번 째 for문 : 정렬된 데이터를 꺼냄

마지막 for문 : 정렬시에 0번째에는 큰 수를 넣어놓고

1번째 인덱스부터 이용했기 때문에

한칸씩 당겨주는 for문

void heap_sort(int array[], int n){
    int hn = 0;
    int i= 0;
    for(i=1; i<=n; i++)
        insert(array, &hn, array[i]);
    for(i=hn; i>=1; i--){
        array[i] = delete(array, &hn);
    }
    for(int j=0; j<n; j++){
        array[j] = array[j+1];
    }
}

배열 출력 함수

void print_array(int array[], int size){
    for(int i=0; i<size; i++){
        printf("%-4d",array[i]);
    }
    printf("\n");
}

메인 함수

정렬 전 배열과 위의 기준대로 정렬한 결과를 출력합니다.

정렬을 하고나면 배열의 크기가 변하기 때문에

oldSize변수에 초기 크기를 저장해두고 진행했습니다.

void main(){
    int array[] = {11,1,83,202,55,4,119,81,15,47,19,28};
    int oldSize = sizeof(array)/sizeof(int);
    int size = sizeof(array)/sizeof(int);
    printf("########### Sorting before ###########\n");
    print_array(array, size);
    heap_sort(array, size);
    printf("########### Sorting after ###########\n");
    print_array(array, oldSize);
}

실행 결과

참고 : C로 배우는 알고리즘 (이재규)

위키백과(힙 ,힙 정렬)

관련 포스팅

[DataStructure] 기수 정렬(Radix Sort)

[DataStructure] 퀵 정렬(Quick Sort)

[DataStructure] 셸 정렬(Shell Sort)

[DataStructure] 버블 정렬(Bubble Sort)

[DataStructure] 삽입 정렬(Insertion Sort)

[DataStructure] 선택 정렬(Selection Sort)

저작자표시 비영리

'언어 > Data Strcuture' 카테고리의 다른 글

[C] 합병 정렬(Merge Sort) (0)	2019.05.04
[C] 기수 정렬(Radix Sort) (1)	2019.04.30
[C] 퀵 정렬(Quick Sort) (0)	2019.04.24
[C] 셸 정렬(Shell Sort) (2)	2019.04.23
[C] 버블 정렬(Bubble Sort) (0)	2019.04.20

기수 정렬(Radix Sort)

기수정렬?

기수정렬은 자리수별로 비교하여 정렬하는 방법입니다.

비교연산은 하지않고, 정수와 같은 자료의 정렬 속도가 매우 빠릅니다.

복잡도

가장 큰 숫자의 자리수가 d라고할 때 복잡도는 아래와 같습니다.

아래와 같은 배열이 있을 때

가장 큰 숫자의 자리수는 3이므로 정렬을 3번 진행합니다.

각 자리수에 해당하는 큐에 순서대로 데이터를 삽입합니다.

가장먼저 1의자리 정렬입니다.

1의자리를 기준으로 정렬된 데이터를

10의자리 기준으로 정렬합니다.

마지막으로 10의자리 기준으로 정렬된 데이터를

100의자리 기준으로 정렬합니다.

정렬한 데이터를 큐에서 전부 꺼내주면 정렬이 완료됩니다.

큐를 이용한 기수 정렬 예제

많은 예제들을 찾아봤는데, 0~9 총 10개의 큐를 만들어서 진행하는 예제가 많았습니다.

굳이 10개의 큐가 필요할까? 라는 생각을 하게 되었고, 큐 하나만 이용해서 정렬을 진행해 봤습니다.

Queue put(),get()함수

Queue관련 내용은 생략하겠습니다.

Queue관련 내용은 아래 포스팅 참고바랍니다.

[Data Strcuture] 큐(Queue)

#include <stdio.h>
#define MAX 20
// QUEUE

int queue[MAX];
int front, rear = 0;

int put(int k){
    if((rear+1) % MAX == front){
        printf("QUEUE OVER FLOW!\n\n");
        return -1;
    }else{
        queue[rear] = k;
        rear = ++rear % MAX;
        return 1;
    }
}

int get(){
    int k;
    if(front == rear){
        printf("QUEUE UNDER FLOW!\n\n");
        return -1;
    }else{
        k = queue[front];
        front = ++front % MAX;
        return k;
    }
}

// ARRAY
void print_array(int array[], int size){
    for(int i=0; i<size; i++){
        printf("%-4d",array[i]);
    }
    printf("\n");
}

기수정렬 함수

가장 큰 숫자를 찾아서 자리수를 구한 뒤

0~9까지 각 자리에 맞는 숫자가 나올때 큐에 삽입하고

반복이 끝나면 큐에서 배열에 담고 큐를 초기화 하는 방법으로 진행 했습니다.

void radix_sort(int array[], int size){
    int max = array[0];
    int digit = 0;
    int factor = 1;
    for(int i=1; i<size; i++){
        if(max<array[i]) max = array[i];
    }
    for(int i=max; i>0;i/=10){
        digit++;
    }

    for(int i =0; i<digit; i++){ 
        for(int j=0; j<10; j++){ // 0~9 
            for(int k=0; k<size; k++){
                if((array[k]/factor)%10==j){
                    put(array[k]);
                }
            }
        }
        factor *=10;
        for(int i=front; i!=rear; i++){
            array[i] =get();
        }
        printf("########### %d ROUND ###########\n",i+1);
        print_array(array,size);
        front=rear=0;
    }
}

배열 출력 함수

void print_array(int array[], int size){
    for(int i=0; i<size; i++){
        printf("%-4d",array[i]);
    }
    printf("\n");
}

실행 함수

void main(){
    int array[] = {11,1,83,202,55,4,119,81,15,47,19,28};
    int size = sizeof(array)/sizeof(int);
    printf("########### Sorting before ###########\n");
    print_array(array, size);
    radix_sort(array, size);
}

실행 결과

참고 : 위키백과(기수 정렬)

관련 포스팅

[DataStructure] 기수 정렬(Radix Sort)

[DataStructure] 퀵 정렬(Quick Sort)

[DataStructure] 셸 정렬(Shell Sort)

[DataStructure] 버블 정렬(Bubble Sort)

[DataStructure] 삽입 정렬(Insertion Sort)

[DataStructure] 선택 정렬(Selection Sort)

저작자표시 비영리

'언어 > Data Strcuture' 카테고리의 다른 글

[C] 합병 정렬(Merge Sort) (0)	2019.05.04
[C] 힙 정렬(Heap Sort) (0)	2019.05.01
[C] 퀵 정렬(Quick Sort) (0)	2019.04.24
[C] 셸 정렬(Shell Sort) (2)	2019.04.23
[C] 버블 정렬(Bubble Sort) (0)	2019.04.20

이벤트 핸들링

이벤트 핸들링 특징과 방법을 정리 했습니다.

자바스크립트나 제이쿼리보다 간편한 느낌이 들었습니다.

리액트 이벤트 핸들링 특징

1. 리액트에서 이벤트의 이름은 카멜 표기법으로 사용

예) onclick → onClick onchange → onChange

카멜 표기법으로 사용 하지않을 경우 아래와 같은 경고가 발생하고 정상적으로 동작하지 않습니다.

    <input type = "text"
            name = "message"
            placeholder = "input message"
            onchange={
                (e) =>{
                //    console.log(e);
                    console.log(e.target.value);
                this.setState({
                    message:e.target.value
                })
                }
            }
            value = {this.state.message}
    />

2. 이벤트에 실행할 코드를 전달하는것이 아닌 함수 형태의 객체를 전달

    <button onClick={
        ()=>{
            this.setState({
                message : ''
            })
        }
    }>

3. DOM 요소에만 이벤트 사용 가능

<div> <button> <input>등 DOM요소에만 이벤트를 사용할 수 있습니다.

직접 만든 컴포넌트에는 이벤트 사용이 불가합니다.

아래와 같이 직접 만든 컴포넌트에 이벤트를 작성하더라도 이벤트가 발생하지 않습니다.

  render() {
    return (
      <EventPractice onLoad={
        ()=>{
          console.log("test");
        }
      }/>
    );
  }

이벤트 종류

리액트에서 지원하는 이벤트는 아래 표와 같습니다.

Clipboard	Form	Composition
Mouse	Keyboard	Selection
Focus	Touch	UI
Image	Wheel	Animation
Media	Transition

이벤트 핸들링

1. 함수를 바로 작성하여 핸들링

함수 형태의 객체를 넘기기 때문에 함수형태로 작성해서 이벤트를 핸들링 합니다.

render() {
    return (
        <div>
            <h1>이벤트 연습 - 함수를 랜더링 시 만들어서 핸들링</h1>
            <button onClick={
                ()=>{
                    alert(this.state.message);
                    this.setState({
                        message : ''
                    })
                }
            }>
              초기화
            </button>
            <input type = "text"
                    name = "message"
                    placeholder = "input message"
                    onChange={
                        (e) =>{
                        this.setState({
                            message:e.target.value
                        })
                        }
                    }
                    value = {this.state.message}
            />
        </div>
    );
}

2. 함수를 미리 작성하여 핸들링

미리 만들어 놓은 함수를 전달하여 핸들링도 가능합니다.

생성자 함수에서 만들어 놓은 함수를 바인딩 해줘야 합니다.

    constructor(props){
        super(props);
        this.handleChange = this.handleChange.bind(this);
        this.handleClick = this.handleClick.bind(this);
    }

    handleChange(e){
        let inputMessage = e.target.value;
        console.log("input message : ",inputMessage);
        this.setState({
            message : inputMessage
        })
    }

    handleClick(){
        console.log("message == ",this.state.message);
        this.setState({
            message : ''
        })
    }

사용은 동일 합니다.

    render() {
        return (
            <div>
                <h1>이벤트 연습2 - 만들어논 함수를 전달해서 핸들링</h1>
                <input type = "text"
                    name = "message"
                    placeholder = "input message"
                    onChange={this.handleChange }
                    value = {this.state.message}
                />
                <button onClick={this.handleClick}>
                  초기화
                </button>
            </div>
        );
    }

3. Property Initializer Syntax를 사용한 함수 작성

생성자 함수를 사용하여 바인딩하는방법이 정석이지만,

새로운 함수를 추가할 때마다 생성자 함수를 수정해야하는 번거로움이 있습니다.

바벨의 transform-class-properties 문법을 사용하여 작성하면

생성자 함수를 사용하지 않고 동적으로 바인딩이 가능합니다.

    handleChange = (e) => {
        let inputMessage = e.target.value;
        console.log("input message : ",inputMessage);
        this.setState({
            message : inputMessage
        })
    }

    handleClick = () => {
        console.log("message == ",this.state.message);
        this.setState({
            message : ''
        })
    }

4. 동일한 여러개의 태그 핸들링

동일한 여러개의 태그는 event객체를 활용해서 처리 가능 합니다.

e.target.name은 태그의 name과 같습니다.

아래와 같이 두개의 <input>태그가 있을 때

    render() {
        return (
            <div>
                <h1>input 여러개 핸들링</h1>
                <input type = "text"
                    name = "name"
                    placeholder = "input name"
                    onChange={this.handleChange }
                    value = {this.state.name}
                />
                <input type = "number"
                    name = "age"
                    placeholder = "input message"
                    onChange={this.handleChange }
                    value = {this.state.age}
                />
                <button onClick={this.handleClick}>
                  초기화
                </button>
            </div>
        );
    }

아래의 형태로 사용이 가능합니다.

[]를 쓰게되면 key가 됩니다.

    state = {
        name : ''
        ,age : 0
    }

    handleChange = (e) => {
        console.log("e.target.name = ",e.target.name);
        console.log("e.target.value = ",e.target.value);
        this.setState({
            [e.target.name] : e.target.value
        })
    }

5. onKeyPress 이벤트 핸들링

위의 예제에서 Enter키를 입력하면 초기화 버튼을 클릭하는 이벤트를 작성했습니다.

이벤트 처리를 위한 함수 작성

 handleClick = () => {
     alert("초기화!");
     console.log("name = ",this.state.name, " age = ",this.state.age);
     this.setState({
        name : ''
        ,age : 0
     })
 }

    handleKeyPress = (e) =>{
        if(e.key === 'Enter'){
            this.handleClick();
        }
    }

    <input type = "number"
        name = "age"
        placeholder = "input message"
        onChange={this.handleChange }
        value = {this.state.age}
        onKeyPress = {this.handleKeyPress}
    />

참고 : 리액트를 다루는 기술(저:VELOPERT)

저작자표시 비영리

'언어 > ReactJS' 카테고리의 다른 글

[React] 컴포넌트 반복 (0)	2019.05.05
[React] Ref (0)	2019.05.02
[React] State (0)	2019.04.12
[React] Props (1)	2019.04.11
[React ]개발 환경 (1)	2019.04.08

퀵 정렬(Quick Sort)

퀵정렬?

퀵 정렬은 빠른 속도와, 간단한 구현방법 때문에

가장 많이 사용하는 정렬 방법으로 알려져 있습니다.

구현방법이 간편하다고 하지만, 개인적으로 이해하는데 시간이 좀 걸렸습니다.

퀵 정렬은 피벗으로 왼쪽에는 작은 값 오른쪽에는 큰값으로 정렬하는 방법입니다.

피벗?

특정 기준은 피벗(pivot)이라고 부릅니다.

복잡도

최악의 경우의 복잡도는 아래와 같지만

(최악의 경우 : 피벗이 가장 작은 수 이거나 가장 큰 수가 계속 선정되는 경우)

평균적인 복잡도는 아래와 같습니다.

어떠한 방법?

피벗을 가장 마지막 인덱스로 설정했습니다.

아래와 같은 배열이 있을 때

피벗 6을 기준으로 왼쪽과 오른쪽 끝에서부터

왼쪽은 6보다 큰 수 오른쪽은 6보다 작은 수를 찾습니다.

양쪽 다 찾은 수가 있다면 자리를 교환 해줍니다.

교환 후 계속해서 진행 한 후

왼쪽과 오른쪽의 수가 같아 지면 종료하고

피벗과 만난지점의 자리를 바꿔줍니다.

자리를 바꾼뒤 확인 해보면

피벗 기준으로 왼쪽에는 작은 수 오른쪽에는 큰수만 오게 됩니다.

각각 나눠진 영역에서 반복해서 같은 방법으로 진행 하면 정렬이 됩니다.

반복은 재귀호출로 진행하게 됩니다.

배열과 재귀호출을 이용한 퀵 정렬 예제

퀵 정렬 함수

if문 : 재귀 호출을 통해 종료를 위한 조건문

첫번째 while : 피벗보다 작은 수 큰 수를 찾기위한 반복문

두번째, 세번째 while : 각각 피벗보다 작은 수, 큰수를 찾는 반복문

첫번째 재귀 호출 : 피벗 기준 왼쪽을 정렬하기 위한 재귀 호출

두번째 재귀 호출 : 피벗 기준 오른쪽을 정렬하기 위한 재귀 호출

void quick_sort(int array[], int size){
    int pivot, temp;
    if(size>1){
        pivot = array[size-1];
        int left = -1;
        int right = size-1;
        while(1){
            while(array[++left]<pivot);
            while(array[--right]>pivot);
            if(left>=right) break;
            temp = array[left];
            array[left] = array[right];
            array[right] = temp;
        }
        temp = array[left];
        array[left] = array[size-1];
        array[size-1] = temp;
        quick_sort(array, left);
        quick_sort(array+left+1, size-left-1);
    }
}

배열 출력 함수

void print_array(int array[], int size){
    for(int i=0; i<size; i++){
        printf("%-4d",array[i]);
    }
    printf("\n");
}

실행 함수

정렬 전 배열과 위의 기준대로 정렬한 결과를 출력합니다.

void main(){
    int array[] = {2,7,1,3,4,0,8,5,9,6};
    int size = sizeof(array)/sizeof(int);
    printf("########### Sorting before ###########\n");
    print_array(array, size);
    quick_sort(array, size);
    printf("########### Sorting after ###########\n");
    print_array(array, size);
}

실행 결과

참고 : C로 배우는 알고리즘 (이재규)

위키백과(퀵 정렬)

관련 포스팅

[DataStructure] 기수 정렬(Radix Sort)

[DataStructure] 퀵 정렬(Quick Sort)

[DataStructure] 셸 정렬(Shell Sort)

[DataStructure] 버블 정렬(Bubble Sort)

[DataStructure] 삽입 정렬(Insertion Sort)

[DataStructure] 선택 정렬(Selection Sort)

저작자표시 비영리

'언어 > Data Strcuture' 카테고리의 다른 글

[C] 힙 정렬(Heap Sort) (0)	2019.05.01
[C] 기수 정렬(Radix Sort) (1)	2019.04.30
[C] 셸 정렬(Shell Sort) (2)	2019.04.23
[C] 버블 정렬(Bubble Sort) (0)	2019.04.20
[C] 삽입 정렬(Insertion Sort) (0)	2019.04.19

셸 정렬(Shell Sort)

셸 정렬?

셸 정렬은 Donald Shell이라는 분이 창안해서 이름이 셸 정렬이 되었다고 합니다.

셸 정렬은 삽입정렬의 단점을 보완하기 위해 등장한 정렬방법입니다.

(단점 예 : 내림차순으로 정렬된 항들을 오름차순으로 정렬하려면 모든 항을 계산 해야 하는 점)

효율 적인 삽입 정렬을 위해 특정 기준으로 사전에 정렬을 수행한 후에 삽입정렬을 수행합니다.

사전에 진행하는 정렬은 특정 기준을 정해서 진행합니다.

어떠한 방법?

저는 길이가 10개인 배열을 2로 나누면서 기준을 잡았습니다.

총 크게 3번 정렬을 진행 했습니다.

10/2 = 5, 5/2 = 2(int형이므로 2.5에서 버림처리), 2/2 =1

아래와 같이 배열에 10개의 인자가 있을 때

1번째 정렬은 5개씩 나눠서 각각 비교해서 정렬 합니다.

각 대응되는 항의 크기를 비교해서 정렬을 하면 아래와 같습니다.

2번째 정렬은 2개 전 항과 비교하며 정렬합니다.

2개의 항씩 정렬하고나면 아래와 같습니다.

마지막으로 3번째 정렬은 전체 항을 삽입 정렬 합니다.

배열을 이용한 셸 정렬 예제

셸 정렬 함수

첫번째 for문 : 5개, 2개, 1개씩 비교를 위한 기준 for문,

두번째 for문 : 기준까지만(5,2,1) 반복하기 위한 for문

세번째 for문 : 위 기준대로 반복하는 for문

while문 : 위 그림들 처럼 비교했을 때 작을경우 삽입하는 동작을 수행

void shell_sort(int array[], int size){
    for(int i=size/2; i>0; i /=2){
        for(int j=0; j<i; j++){
            for(int k=i+j; k<size; k+=i){
                int l = array[k];
                int m = k;
                while(m>i-1 && array[m-i] > l){
                    array[m]=array[m-i];
                    m -= i;
                }
                array[m] = l;
            }
        }
        printf("i=%d || ",i);
        print_array(array,size);   
    }
}

배열 출력 함수

void print_array(int array[], int size){
    for(int i=0; i<size; i++){
        printf("%-4d",array[i]);
    }
    printf("\n");
}

실행 함수

정렬 전 배열과 위의 기준대로 정렬한 결과를 출력합니다.

void main(){
    int array[] = {11,10,33,22,55,9,99,81,15,27};
    int size = sizeof(array)/sizeof(int);
    printf("########### Sorting before ###########\n");
    print_array(array, size);
    printf("######################################\n");
    shell_sort(array, size);
}

실행 결과

참고 : C로 배우는 알고리즘 (이재규)

위키백과(셸 정렬)

관련 포스팅

[DataStructure] 기수 정렬(Radix Sort)

[DataStructure] 퀵 정렬(Quick Sort)

[DataStructure] 셸 정렬(Shell Sort)

[DataStructure] 버블 정렬(Bubble Sort)

[DataStructure] 삽입 정렬(Insertion Sort)

[DataStructure] 선택 정렬(Selection Sort)

저작자표시 비영리

'언어 > Data Strcuture' 카테고리의 다른 글

[C] 기수 정렬(Radix Sort) (1)	2019.04.30
[C] 퀵 정렬(Quick Sort) (0)	2019.04.24
[C] 버블 정렬(Bubble Sort) (0)	2019.04.20
[C] 삽입 정렬(Insertion Sort) (0)	2019.04.19
[C] 선택 정렬(Selection Sort) (0)	2019.04.19

버블 정렬(Bubble Sort)

버블 정렬 ?

버블 정렬은 거품 정렬이라고도 불리는 정렬 입니다.

아래 그림과 같이 인접하는 두 항을

전부 비교해서 정렬하는 방법입니다.

n개의 항이 있다면 n-1번씩 비교 하게 됩니다.

정렬 알고리즘 중에서 가장 비효율적인 방법이라고 합니다.

배열을 이용한 버블 정렬 예제

버블 정렬 함수

이전항(array[j-1]), 다음항(array[j])을 비교해서

이전항이 클 경우 자리를 바꿔주고 그렇지 않으면 패스합니다.

void bubble_sort(int array[], int size){
    int t;
    for(int i=0; i<size-1; i++){
        for(int j=1; j<size; j++){
            if(array[j-1]>array[j]){
                t = array[j-1];
                array[j-1] = array[j];
                array[j] = t;
            }
        }
    }
}

실행 함수

정렬 전과 후 배열 출력

void main(){
    int array[] = {11,10,33,22,55,9};
    int size = sizeof(array)/sizeof(int);
    printf("########### Sorting before ###########\n");
    for(int i=0; i<size; i++){
        printf("%-4d",array[i]);
    }
    bubble_sort(array,size);
    printf("\n########### Sorting after ###########\n");
    for(int i=0; i<size; i++){
        printf("%-4d",array[i]);
    }
}

실행 결과

참고 : C로 배우는 알고리즘 (이재규)

위키백과(버블정렬)

관련포스팅

[DataStructure] 기수 정렬(Radix Sort)

[DataStructure] 퀵 정렬(Quick Sort)

[DataStructure] 셸 정렬(Shell Sort)

[DataStructure] 버블 정렬(Bubble Sort)

[DataStructure] 삽입 정렬(Insertion Sort)

[DataStructure] 선택 정렬(Selection Sort)

저작자표시 비영리

'언어 > Data Strcuture' 카테고리의 다른 글

[C] 퀵 정렬(Quick Sort) (0)	2019.04.24
[C] 셸 정렬(Shell Sort) (2)	2019.04.23
[C] 삽입 정렬(Insertion Sort) (0)	2019.04.19
[C] 선택 정렬(Selection Sort) (0)	2019.04.19
[C] 트리(Tree) (0)	2019.04.07

삽입 정렬(Insertion Sort)

삽입 정렬?

삽입 정렬은 이미정렬된 앞부분의 항들과 비교해서

사이에 작은 수를 삽입하여 정렬하는 방법입니다.

아래 위키백과의 애니메이션을 보면 쉽게 이해할 수 있습니다.

https://ko.wikipedia.org/wiki/%EC%82%BD%EC%9E%85_%EC%A0%95%EB%A0%AC

복잡도

삽입정렬의 복잡도는 아래와 같습니다.

배열을 이용한 삽입 정렬 예제

삽입 정렬 함수

기준항(temp)와 정렬된 앞 요소들의 크기를 비교하고 한칸 씩 뒤로 옮긴 후 기준항을 삽입합니다.

두 번째 항부터 비교를 시작하므로 i는 1부터 시작합니다.

void insertion_sort(int array[], int size){
    int j,temp;
    for(int i=1; i<size; i++){
        j=i;
        temp = array[i];
        while(j>0 && array[j-1]>temp){
            array[j] = array[j-1];
            j--;
        }
        array[j] = temp;
    }
}

실행 함수

정렬 전과 후 배열 출력

void main(){
    int array[] = {11,10,33,22,55,9};
    int size = sizeof(array)/sizeof(int);
    printf("########### Sorting before ###########\n");
    for(int i=0; i<size; i++){
        printf("%-4d",array[i]);
    }
    insertion_sort(array,size);
    printf("\n########### Sorting after ###########\n");
    for(int i=0; i<size; i++){
        printf("%-4d",array[i]);
    }
}

실행 결과

참고 : C로 배우는 알고리즘 (이재규)

위키백과(삽입정렬)

관련 포스팅

[DataStructure] 기수 정렬(Radix Sort)

[DataStructure] 퀵 정렬(Quick Sort)

[DataStructure] 셸 정렬(Shell Sort)

[DataStructure] 버블 정렬(Bubble Sort)

[DataStructure] 삽입 정렬(Insertion Sort)

[DataStructure] 선택 정렬(Selection Sort)

저작자표시 비영리

'언어 > Data Strcuture' 카테고리의 다른 글

[C] 셸 정렬(Shell Sort) (2)	2019.04.23
[C] 버블 정렬(Bubble Sort) (0)	2019.04.20
[C] 선택 정렬(Selection Sort) (0)	2019.04.19
[C] 트리(Tree) (0)	2019.04.07
[C] 큐(Queue) (2)	2019.04.01

선택 정렬(Selection Sort)

선택 정렬?

선택 정렬은 기준 항과 우측항 전체를 다 비교한 후 가장 작은수를 가장 앞으로 이동해서 정렬하는 방법입니다.

아래 위키백과의 애니메이션을 보면 쉽게 이해할 수 있습니다.

https://ko.wikipedia.org/wiki/%EC%84%A0%ED%83%9D_%EC%A0%95%EB%A0%AC

복잡도

선택정렬의 복잡도는 아래와 같습니다.

배열을 이용한 선택 정렬 예제

선택 정렬 함수

최소값(min)과 최소값의 인덱스(minIndex)를 구한 후 기준항(array[i])과 자리 교체

void selection_sort(int array[], int size){
    int min, minIndex;
    for(int i=0; i<size-1; i++){
        int min = array[i];
        int minIndex = i;
        for(int j=i+1; j<size; j++){
            if(min>array[j]){
                min = array[j];
                minIndex = j;
            }
        }
        array[minIndex] = array[i];
        array[i] = min;
    }
}

실행 함수

정렬 전과 후 배열 출력

void main (){
    int array[] = {11,10,33,22,55,9};
    int size = sizeof(array)/sizeof(int);
    printf("########### Sorting before ###########\n");
    for(int i=0; i<size; i++){
        printf("%-4d",array[i]);
    }
    printf("\n########### Sorting after ###########\n");
    selection_sort(array, size);
    for(int i=0; i<size; i++){
        printf("%-4d",array[i]);
    }
}

실행 결과

참고 : C로 배우는 알고리즘 (이재규)

위키백과(선택정렬)

관련 포스팅

[DataStructure] 기수 정렬(Radix Sort)

[DataStructure] 퀵 정렬(Quick Sort)

[DataStructure] 셸 정렬(Shell Sort)

[DataStructure] 버블 정렬(Bubble Sort)

[DataStructure] 삽입 정렬(Insertion Sort)

[DataStructure] 선택 정렬(Selection Sort)

저작자표시 비영리

'언어 > Data Strcuture' 카테고리의 다른 글

[C] 버블 정렬(Bubble Sort) (0)	2019.04.20
[C] 삽입 정렬(Insertion Sort) (0)	2019.04.19
[C] 트리(Tree) (0)	2019.04.07
[C] 큐(Queue) (2)	2019.04.01
[C] 스택(Stack) (1)	2019.03.29

State

State?

유동적인 데이터를 다룰 때 사용하는 요소

State 특징

1) props는 부모 컴포넌트가 설정하기때문에 읽기 전용으로만 사용 가능합니다.

2) 컴포넌트 내부에서 사용하기 위해서는 state를 사용해야 합니다.

State 사용

1. state 값 지정

state 값을 지정하는 방법은 두 가지가 있습니다.

1) constructor 함수를 사용

constructor함수는 생성자함수 라고도 불리며 생성자 안에 state를 지정합니다.

import React, { Component } from 'react';

class StateComponent extends Component {
    constructor(props){
        super(props);
        this.state = {
            number : 100
        }
    }

    render() {
        return (
            <div>
                숫자 : {this.state.number}
            </div>
        );
    }
}

export default StateComponent;

2) transform-class-properties 문법

바벨의 transform-class-properties 문법으로 사용하는 방법입니다. constructor함수보다 간편합니다.

constructor와 동시에 사용하면 constructor가 우선적으로 적용 됩니다.

import React, { Component } from 'react';

class StateComponent extends Component {
    state = {
        name : "HyeUng"
        ,number : 100
    }

    render() {
        return (
            <div>
                숫자 : {this.state.number}
                이름 : {this.state.name}
            </div>
        );
    }
}

export default StateComponent;

2. state 값 업데이트

업데이트는 setState함수로 가능합니다.

아래 형태로 업데이트를 할 수 있습니다.

this.setState({

수정 할 필드 이름 : 값

, .... : ...

});

import React, { Component } from 'react';

class StateComponent extends Component {
    state = {
        name : "HyeUng"
        ,number : 100
    }

    render() {
        return (
            <div>
                숫자 : {this.state.number}
                <br/><br/>
                <button onClick={()=>{
                    this.setState({
                        number : this.state.number - 1
                    })
                }
                }>빼기</button>
            </div>
        );
    
    }
}

export default StateComponent;

실행결과

5번 클릭한 결과입니다.

참고 : 리액트를 다루는 기술(저:VELOPERT)

'언어 > ReactJS' 카테고리의 다른 글

[React] 컴포넌트 반복 (0)	2019.05.05
[React] Ref (0)	2019.05.02
[React] 이벤트 핸들링 (2)	2019.04.25
[React] Props (1)	2019.04.11
[React ]개발 환경 (1)	2019.04.08

꿈꾸는 개발자 박혜웅

언어

[React] Ref

'언어 > ReactJS' 카테고리의 다른 글

[C] 힙 정렬(Heap Sort)

'언어 > Data Strcuture' 카테고리의 다른 글

[C] 기수 정렬(Radix Sort)

'언어 > Data Strcuture' 카테고리의 다른 글

[React] 이벤트 핸들링

'언어 > ReactJS' 카테고리의 다른 글

[C] 퀵 정렬(Quick Sort)

'언어 > Data Strcuture' 카테고리의 다른 글

[C] 셸 정렬(Shell Sort)

'언어 > Data Strcuture' 카테고리의 다른 글

[C] 버블 정렬(Bubble Sort)

'언어 > Data Strcuture' 카테고리의 다른 글

[C] 삽입 정렬(Insertion Sort)

'언어 > Data Strcuture' 카테고리의 다른 글

[C] 선택 정렬(Selection Sort)

'언어 > Data Strcuture' 카테고리의 다른 글

[React] State

'언어 > ReactJS' 카테고리의 다른 글

+ Recent posts

티스토리툴바