01. React 기본 다지기 - 4

20. React State란?

리액트에서 데이터가 변할 때 화면을 다시 랜더링 해주기 위해서는 React State를 사용해야 한다

React State

React State란 컴포넌트의 랜더링 결과물에 영향을 주는 데이터를 갖고 있는 객체
State가 변경되면 컴포넌트는 리랜더링 됨. 또한 State는 컴포넌트 안에서 관리됨

리액트 State 생성하기

constructor(props){
  super(props);
  // 이름이 expenses인 state 생성
  this.state = {
    expenses: [
      { id: 1, charge: '콜라', amount: 2000 },
      { id: 2, charge: '빵', amount: 1000 },
      { id: 3, charge: '맥북', amount: 20000 },
    ]
  }
}

state 사용하기

// initialExpenses={this.initialExpenses} 대신 state 사용
initialExpenses={this.state.expenses}

state를 이용해서 변경된 상태 업데이트하기

// setState를 이용해 state 업데이트
this.setState({ expenses: newExpense });

21. super(props)란?

constructor 안에 super키워드를 써줘야 밑에 this 키워드를 사용할 수 있음

Constructor

constructor(생성자)를 사용하면 인스턴스화된 객체에서 다른 메서드를 호출하기 전에 수행해야하는 사용자 지정 초기화를 제공
클래스를 new 키워드를 사용해 인스턴스 객체로 생성하면 넘겨받은 인수와 함께 constructor가 먼저 실행됨

예시)

class User {
  constructor(name){
    this.name = name;
  }
}

let user = new User("John");
// 이때 넘겨받은 인수인 John이 this.name에 할당 됨

자바스크립트에서 super

super 키워드는 자식 클래스 내에서 부모 클래스의 생성자를 호출하거나 메소드를 호출할 때 사용됨

예시)

class Car {
  constructor(brand) {
    this.carname = brand;
  }
  present() {
    return 'I have a ' + this.carname;
  }
}

class Model extends Car {
  constructor(brand, mod) {
    super(brand);
    this.model = mod;
  }
  show() {
    return super.present() + ', it is a ' + this.model;
  }
}

let myCar = new Model("Ford", "Mustang");
mycar.show();

super 이후에 this 키워드

생성자에서는 super 키워드 하나만 사용하거나 this 키워드가 사용되기 이전에 호출되어야 함

super 이후에 this 키워드가 나와야 하는 이유

부모 클래스의 생성자를 호출하기 전에 this를 사용해서 부모에 있는 객체에 접근하려고 하면 오류가 발생하기 때문
React에서도 마찬가지로 super가 this보다 먼저 사용되어야 함

React에서 super에 props를 인자로 전달하는 이유

React.component 객체가 생성될 때 props 속성을 초기화하기 위해 부모 컴포넌트에게 props를 전달
그래야 생성자 내부에서도 this.props를 정상적으로 사용할 수 있음

22. State와 Props

Props

• 부모 컴포넌트로 부터 자식 컴포넌트에 데이터를 전달
• 읽기 전용

State

• 해당 컴포넌트 내에서 데이터를 전달
• 변경 가능
• State가 변경되면 화면이 re-render됨