TIL0511 Data Structure, state, super, props

Data Structure

Data structure 란?

자료구조란 데이터에 편하게 접근하고 조작하기 위해 데이터를 저장하는 방법을 말한다
자료구조 = 상황과 문맥에 맞게 데이터를 담을 수 있는 적절한 구조 (언어별로 지원하는 양상이 다르다)
상황에 따라 적절한 자료구조가 있는데 그것의 본질과 컨셉을 이해하는 것이 중요하다 물론 상황에 맞는 자료구조를 잘 고르는 것도 중요하다 적절한 자료구조가 전체 시스템에 큰 영향을 끼친다

자료구조는 크게 두가지인 Primitive Data Structure(단순 구조) 와 None-Primitive Data Structure(비단순 구조) 로 나뉘어져 있다 단순 구조에는 프로그래밍에서 사용되는 기본 데이터 타입인 string, boolean 등이 있고 비단순 구조에는 여러 데이터를 목적에 맞게 효과적으로 저장하는 자료구조인 array, list, tuple, dictionary 등이 있다

일반적으로 가장 자주 사용되는 자료 구조로는 array, tuple, set, dictionary, stack & queue, tree 가 있다

Array

array 는 가장 기초적이면서도 가장 자주 사용되는 자료 구조이다 array의 가장 큰 특징은 자료를 순차적으로 저장한다는 것이다
array 는 이미 생성된 리스트도 수정 가능하고 동일한 값을 여러번 삽입할 수도 있다 그리고 array 안에 array가 들어갈 수도 있다 이것을 다중차원 배열(Multi-dimention Array)이라 한다

데이터를 순차적으로 저장하기 때문에 index 로 값에 접근할 수 있다 index 는 0부터 시작하며 -1은 가장 끝에 있는 요소를 가리킨다
array 가 데이터를 순차적으로 저장할 수 밖에 없는 이유는 실제 메모리 상에서 데이터가 순차적으로 저장되기 때문이다

데이터를 순차적으로 저장하는 특성 때문에 중간의 특정 요소를 추가하거나 삭제할 때, array를 resizing 할 때 시간이 오래 걸린다는 단점이 있다
특히 resizing 에 시간이 오래 걸린다 그래서 array 는 사이즈 예측이 잘 안되는 데이터를 다루기에는 적절하지 않다

array 를 사용하기 좋은 경우는 순서가 중요한 데이터를 저장할 때, 다차원 데이터를 다룰 때, 특정 요소를 빠르게 읽어야 할 때, 데이터가 급변하지 않는 경우 등이 있다

Tuple

list 처럼 데이터를 순차적으로 저장할 수 있는 자료구조이다
하지만 한 번 정의되면 수정할 수 없고 소규모 데이터를 저장할 때 와 함수에서 리턴 값을 한 개 이상 리턴 하고 싶을 때 자주 쓰인다

Javascript 에는 tuple 이 list 와 너무 비슷해서 굳이 제공하지 않는다 그냥 array 를 사용해도 된다

tuple 은 간단한 값을 빨리 표현하고 싶을 때 사용한다
하지만 구조가 너무 간단해(괄호 안에 데이터만 담겨있다) 데이터가 무슨 의미인지 명확하지 않다는 단점이 있다 의미를 알려면 문맥을 보고 가정해야 한다
이러한 단점을 극복하기 위해 Named Tuple 이 존재한다

Tuple 이 간단한 만큼 메모리를 list 보다 더 적게 먹는다 그래서 array 를 쓰기에는 간단한 데이터들을 표현할 때 사용하면 좋다 (예를 들어 좌표 데이터)

state

state 는 동적 데이터와 함께 작업하는 object 이다
state 는 class component 와 함께 사용한다
class component 는 render 안에 return 이 있는 구조이다

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>This is class component</h1>
      </div>
    )
  }
}

state 는 object 로 데이터를 담는다
render 안에 넣고 싶으면 {this.state.count} 로 쓴다

class App extends React.Component {
  state = {
    count: 0
  };
  render() {
    return (
      <div>
        <h1>The number : {this.state.count}</h1>
      </div>
    )
  }
}

setState()

minus = () => {
    this.state.count = -1;
  };

위의 코드 처럼 state 값은 직접적으로 변경할 수 없다 그래서 setState() 로 새로운 state 를 생성해야 한다
setState 를 호출 할 때마다 react 는 state 를 업데이트하고 render function 을 다시 실행한다

state = {
    count: 0
  };
  add = () => {
    this.setState({ count : this.state.count + 1});
  };
  minus = () => {
    this.setState({ count : this.state.count - 1});
  };

위 코드는 setState()를 사용했지만 state 에 의존하는 코드로 좋은 예가 아니다
그럴때는 current함수로 외부의 상태에 의존하지 않고 현재 state 를 가져올 수 있다

=>
state = {
    count: 0
  };
  add = () => {
    this.setState(current => ({ count : current.count + 1}));
  };
  minus = () => {
    this.setState(current => ({ count : current.count - 1}));
  };

super

super 는 부모클래스 생성자를 가리킨다 React.Component 를 가리킨다

constructor() {
	super();
    this.state = {
    	click: false
    }
}

초기의 값을 constructor 에서 지정해준다
위 코드처럼 super() 을 선언하지 않으면 constructor 에서 this 를 사용할 수 없다

state props 연습코드

버튼을 클릭하면 색상과 텍스트가 변하는 버튼

class Button extends React.Component {
// constructor 로 초기값을 설정해주고
  constructor() {
      super();
      this.state = {
        click : false
      };
  }
// click 했을 때 state 의 값을 변경시켜 줄 setState 함수를 정의한다
  clickEvent = () => {
    this.setState({ click : !this.state.click})
  }
  render() {
    return (
// 버튼의 state : click 값이 true 이면 'like-btn', false 이면 'unlike-btn' 클래스 추가
      <div
        className={`btn ${this.state.click ? 'like-btn' : 'unlike-btn'}`}
        onClick={this.clickEvent}
      >
// this.state.click 이 true 이면 '좋아요' false 이면 '싫어요' 로 텍스트 교체
        {this.state.click ? '좋아요' : '싫어요'}
      </div>
    );
  }
}