<div id="readability-page-1" class="page"><div>
<p>React에서는 반응형 데이터를위해 <code>setState</code>를 이용한다. 그런데 클래스 인스턴스로 데이터를 관리하고싶은 경우 인스턴스 자체의 변경점이 지정되며, 인스턴스내의 데이터를 변경 하고싶은경우 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax">spread</a>방식을 이용하기때문에 불편하다.<br>React에서 proxy기반의 상태(반응형)관리 해주는 <a href="https://github.com/pmndrs/valtio">Valtio</a>라는 라이브러리를 발견했다. 해당 방법을 이용하면 쉽게 클래스 인스턴스를 관리 할 수 있다. Vue3에서 reactive (or ref)와 비슷한 느낌인것 같다.<br>그러면 아래와같이 직관적으로 반응형 데이터를 만들어줄 수 있고 변경또한 객체에 메시지를 전달하여 해결할 수 있다.</p>
<h2>예제코드</h2>
<pre><code>import React, {useEffect, useState} from "react";
import {proxy, useSnapshot} from 'valtio'

class User {
    public id = 1
    public name = "호돌맨"

    public changeName(name: string) {
        this.name = name
    }
}

const user = proxy&lt;User&gt;(new User())

export default function () {

    useSnapshot(user)

    return (
        &lt;div className="App"&gt;
            &lt;p&gt;{user.id}&lt;/p&gt;
            &lt;p&gt;{user.name}&lt;/p&gt;
            &lt;button onClick={() =&gt; user.changeName("호돌순")}&gt;이름변경&lt;/button&gt;
        &lt;/div&gt;
    );
}</code></pre><h2>useSnapshot</h2>
<p>개발자 입장에서 이게 왜 필요한지 아직 잘 모르겠다. 저런 hook을 걸지 않고 더 쉽게 사용할 수 있는 <a href="https://www.npmjs.com/package/react-state-proxy">react-state-proxy</a>라는 라이브러리도 있다. 다만 별이 3개밖에 없어서..ㅎ</p>
<p>전역적으로도 상태관리를 가져갈 수 있는 등.. 궁금한 점이 많다. 계속 살펴보는중</p>
<h2>관련링크</h2>
<ul>
<li><a href="https://github.com/pmndrs/valtio">https://github.com/pmndrs/valtio</a></li>
</ul>
</div></div>

호돌맨의 블로그

JuHyun Lee

React 반응형 데이터
React에서는 반응형 데이터를위해 setState를 이용한다. 그런데 클래스 인스턴스로 데이터를 관리하고싶은 경우 인스턴스 자체의 변경점이 지정되며, 인스턴스내의 데이터를 변경 하고싶은경우 spread방식을 이용하기때문에 불편하다.
React에서 proxy기반의 상태(반응형)관리 해주는 Valtio라는 라이브러리를 발견했다. 해당 방법을 이용하면 쉽게 클래스 인스턴스를 관리 할 수 있다. Vue3에서 reactive (or ref)와 비슷한 느낌인것 같다.
그러면 아래와같이 직관적으로 반응형 데이터를 만들어줄 수 있고 변경또한 객체에 메시지를 전달하여 해결할 수 있다.
예제코드
import React, {useEffect, useState} from "react";
import {proxy, useSnapshot} from 'valtio'
class User {
    public id = 1
    public name = "호돌맨"
    public changeName(name: string) {
        this.name = name
    }
}
const user = proxy<User>(new User())
export default function () {
    useSnapshot(user)
    return (
        <div className="App">
            <p>{user.id}</p>
            <p>{user.name}</p>
            <button onClick={() => user.changeName("호돌순")}>이름변경</button>
        </div>
    );
}
useSnapshot
개발자 입장에서 이게 왜 필요한지 아직 잘 모르겠다. 저런 hook을 걸지 않고 더 쉽게 사용할 수 있는 react-state-proxy라는 라이브러리도 있다. 다만 별이 3개밖에 없어서..ㅎ
전역적으로도 상태관리를 가져갈 수 있는 등.. 궁금한 점이 많다. 계속 살펴보는중
관련링크
https://github.com/pmndrs/valtio

(React) proxy기반의 반응형데이터 관리

댓글