React - 예산 계산기 앱 만들기 | JSX Key 속성, filter 메소드, React State, super (props), state와 super

JSX Key 속성 이해하기

리액트에서 요소의 리스트를 나열할 때는 key를 넣어줘야 함

키는 리액트에서 변경, 추가 또는 제거된 항목을 식별하는 데 도움이 됨.

요소에 안정적인 id를 부여하려면 배열 내부의 요소에 key를 제공해야 함

 

리액트는 가상 돔을 이용해서 바뀐 부분만 실제 돔에 반영

--> 리스트에서 나열할 때 바뀐 부분을 어떻게 찾을까 ?

 

key를 이용해서 어떠한 부분이 바뀌었는지 인식할 수 있음 !

 

3번을 1,2번 뒤에 추가할 때는 react가 3번만 추가하면 된다고 쉽게알 수 있음	3번을 1,2번 앞에 추가할 때는react가 모든 요소가 새롭게 된 것이라고 인식하고 모든 자식 엘리먼트를 새롭게 그려버림
	이 경우 key를 추가햐서 1,2번을 새롭게 그리는 것이 아닌 3번을 추가 후 1,2번은 자리만 이동해주면 됨 !

 

Key에는 유니크한 값을 넣어줌

but index는 비추천 !

--> index도 0부터 시작해서 유니크한 값을 가지지만 만약 리스트가 추가되거나 제거되면 해당 리스트들의 key값도 바뀌게 됨

 

 

Array.prototype.filter()

버튼 클릭 시 상호작용하기

 

클릭 이벤트 발생 시 함수 호출하기

 

지우는 함수에서 할 일은 아래 initialExpense 배열에서 지우기로 클릭된 id와 같은 id를 가지고 있는 객체를 배열에서 지워주는 것 !

 

Array 인스턴스의 filter() 메서드는 주어진 배열의 일부에 대한 얕은 복사본을 생성하고, 주어진 배열에서 제공된 함수에 의해 구현된 테스트를 통과한 요소로만 필터링 합니다.

const words = ['spray', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter((word) => word.length > 6);
// word는 배열의 각 요소를 나타냅니다.
// word.length > 6 조건은 각 단어의 길이가 6보다 큰지를 검사합니다.

// filter 메서드는 콜백 함수를 매개변수로 받습니다.
// 콜백 함수는 각 요소를 순회하며 조건을 검사합니다.
// word.length > 6 조건을 검사하여 길이가 6자 이상인 단어를 반환합니다.

console.log(result);
// Expected output: Array ["exuberant", "destruction", "present"]

 

React State란 ?

리액트에서 데이터가 변할 때 화면을 다시 렌더링해주기 위해서는 react state를 사용해야 함

--> 컴포넌트의 렌더링 결과물에 영향을 주는 데이터를 갖고 있는 객체

--> state가 변경되면 컴포넌트는 리렌더링(re-rendering)되며 state는 컴포넌트 안에서 관리됨

 

컴포넌트 내에서 기억해야 할 데이터를 state를 이용해서 기억해주면 됨

 

1. 리액트 state 생성

 

- 원래 배열

 

- state 생성

d

 

 

2. state 사용하기

- 원래 버전

 

- state 버전

 

setState

state를 업데이트 해주는 함수

 

 

super(props)란 ?

 

Constructor

Constructor(생성자)를 사용하면 인스턴트화 된 객체에서 다른 메서드를 호출하기 전에 수행해야 하는 사용자 지정 초기화를 제공할 수 있음

클래스를 new를 붙여서 (new User"John") 인스턴스 객체로 생성하면 넘겨받은 인수와 함께 constructor가 먼저 실행됨. 이때 넘겨받은 인수인 John이 this.name에 할당됨

class User {
  constructor(name) {
    this.name = name;
  }
  
  sayHi() {
    alert(this.name);
  }
  
let user = new User("John");
user,sayHi();

 

 

자바스크립트에서 super

1. super 키워드는 자식 틀래스 내에서 부모 클래스의 생성자를 호출할 때 사용

2. 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');
console.log(myCar.show());

 

 

• class Car: Car 클래스를 정의합니다.

• constructor(brand): 생성자 메서드로, brand 매개변수를 받아서 carname 속성에 할당합니다.

• present(): carname 속성을 사용하여 문자열을 반환하는 메서드입니다.

 

 

• class Model extends Car: Model 클래스는 Car 클래스를 상속받습니다.

• constructor(brand, mod): 생성자 메서드로, brand와 mod 매개변수를 받습니다.

• super(brand): 부모 클래스의 생성자를 호출하여 brand 매개변수를 전달합니다.

• this.model = mod: model 속성을 초기화합니다.

• show(): super.present()를 호출하여 부모 클래스의 present 메서드를 실행하고, 추가 정보를 붙여서 문자열을 반환합니다.

 

 

• new Model('Ford', 'Mustang'): Model 클래스의 새로운 인스턴스를 생성합니다.

• myCar.show(): show 메서드를 호출하여 결과를 반환합니다.

• console.log(myCar.show()): 결과를 콘솔에 출력합니다.

 

결과

I have a Ford, it is a Mustang

 

super 이후에 this 키워드

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

 

--> 이유

부모 클래스의 생성자를 호출하기 전에 this.name을 사용하려고 하면 문제가 되기 때문

리액트에서 this.state를 생성자에서 정의할 때 super가 먼저와야 하는 이유도 이와 같음

 

리액트에서 super에 props를 인자로 전달하는 이유

React.Component 객체가 생성될 때 props 속성을 초기화하기 위해 부모 컴포넌트에게 props를 전달

생성자 내부에서도 this.props를 정상적으로 사용할 수 있도록 보장하기 위해서

 

state와 props

props		state
A 부모 컴포넌트 state = {a:"a"} <B컴포넌트 aProps={this.state.a} /> B 자식 컴포넌트 a state 필요 this.props.aProps	- properties의 줄임말 - props는 상속하는 부모 컴포넌트로부터 자녀 컴포넌트에 데이터 등을 전달하는 방법 - props는 읽기 전용(immutable)으로 자녀 컴포넌트 입장에서는 변하지 않음 (변하게 하고자 하면 부모 컴포넌트에서 state를 변경시켜줘야 함)	A 컴포넌트 state = {a ;"a"} - this.state.a - this.state.a - this.state.a	- 부모 컴포넌트에서 자녀 컴포넌트로 데이터를 보내는게 아닌 해당 컴포넌트 내부에서 데이터를 전달하여면 ? state 사용 - state는 변경 가능(mutable) - state이 변하면 re-render됨