Typescript 클래스의 인스턴스에서 값을 변경하려면 어떻게 해야 합니까?

Typescript 클래스의 인스턴스에서 값을 변경하려면 어떻게 해야 합니까?

과일 수업이 있어요:

export class Fruit {
    constructor(public id: number, public name: string) {}

    public changeName(_name: string): void {
        console.log('changing name')
        this.name = _name
    }
}

그리고 저는 이렇게 구현합니다:

import React from 'react'
import { Fruit } from '../classes/fruit'

const HomePage = () => {
    let fruit = new Fruit(1, 'apple')

    return (
        <div>
            {fruit.name} <----- I am expecting this to update on the DOM when i click the button *********
            <button onClick={() => fruit.changeName('banana')}>
                change the name
            </button>
        </div>
    )
}

export default HomePage

하지만 내가 버튼을 클릭해도 화면의 과일 이름은 바뀌지 않는다. '사과'로 남아있어요. 제가 뭘 잘못하고 있는지 아는 사람 있나요? Typescript가 처음입니다

---

참고 사항:

• 반응 기능 구성 요소는 그렇게 작동하지 않습니다. 시간이 지남에 따라 데이터가 변경되는 경우 후크를 사용하여 상태를 정의해야 합니다.

• 이는 여전히 작동하지 않습니다. 당신의 개체는 변경 가능하기 때문에 React는 필수 업데이트를 "확인"하지 않습니다. 이상적이지는 않지만, 상태 값으로 객체 래퍼를 사용하여 React를 속일 수 있습니다. (JS에서 이는 작동하기 때문입니다.).

• 불변 세터()로 클래스를 작성하는 것을 고려하면 다음과 같은 훌륭한 선언 코드를 작성할 수 있습니다.

export class Fruit {
    constructor(public id: number, public name: string) {}

    public changeName(name: string): Fruit {
        return new Fruit(this.id, name)
    }
}

---

그래서, 이것이 문제입니다. 이건 안 될 거야.

---

우선, 반응 함수 구성 요소의 렌더 함수에 생성된 변수는 해당 렌더 동안에만 존재합니다. 그래서 당신이 할 때:

let fruit = new Fruit(1, 'apple')

그런 다음 구성 요소가 렌더링할 때마다 의 이름을 가진 새 개체를 만듭니다. 렌더링 후 해당 개체에 대한 변경 내용은 다시 렌더링해야 하므로 처음부터 새로 만듭니다.

---

이 문제를 해결하는 방법은 구성 요소 렌더링 간의 값을 유지하는 "상태"를 사용하는 것입니다.

그래서 대신에, 당신이 이것을 가졌다고 가정해보자:

const HomePage = () => {
    let [fruit, setFruit] = useState(new Fruit(1, 'apple'))
    //...
}

하지만 문제는 상태가 그렇게 될 것으로 예상된다는 것입니다. 즉, 상태가 바뀌면 완전히 새로운 개체를 기대하고, 상태의 일부를 바꾸는 것은 금지됩니다.

이것은 당신이 상태를 완전히 대체하지 않는 한 반응이 실제로 어떤 것이 상태에서 변화하는지 알 수 없기 때문이다.

따라서 이러한 문제를 해결하려면 상태를 변경할 때 완전히 새로운 개체를 설정해야 합니다.

이렇게 하면 됩니다:

const HomePage = () => {
    let [fruit, setFruit] = useState(new Fruit(1, 'apple'))

    return (
        <div>
            {fruit.name}
            <button onClick={() => setFruit(new Fruit(fruit.id, 'banana')}>
                change the name
            </button>
        </div>
    )
}

---

하지만 그건 좀 짜증나는 일이야. 따라서 가변 인스턴스를 상태로 설정하지 않는 것이 좋습니다. 이것은 보통 클래스의 인스턴스에 대한 필요성이 거의 없다는 것을 의미합니다. 그리고 일반적으로 객체를 상태로 저장하는 것이 훨씬 더 간단합니다.

// declare state
let [fruit, setFruit] = useState({ id: 1, name: 'apple' })

// set state
setFruit({ ...fruit, name: 'banana' })