🪁react/react 실습

react의 특성1[리액티브 : 특정 값에 의존해 자동으로 반응하는 것]

하얀성 2023. 12. 30. 11:08

html에 정의한 객체 데이터 간단히 출력해보고 변경해서 출력해보기

 

코드 실행

<body>
  <script>
    const state = {
      _data: "Hello world",
    }

    const render = () => document.body.innerHTML = `<p>${state.data}</p>`

    Object.defineProperty(state, "data", {
      get() {
        console.log('get')
        return state._data
      },
      set(value) {
        console.log('set')
        state._data = value
        render();
      }
    })

    render();
  </script>
</body>

 

이 코드에서 state._data와 state.data는 다음과 같은 역할을 합니다:

  1. state._data: 이것은 실제 값을 저장하는 내부 변수입니다. 이 변수는 직접적으로 사용자에게 노출되지 않으며, 오직 state.data를 통해 간접적으로 접근됩니다.
  2. state.data: 이것은 Object.defineProperty를 통해 생성된 접근자 프로퍼티(accessor property)입니다. 이 프로퍼티는 get과 set 메서드를 가지며, 이들은 각각 state._data를 읽거나 수정할 때 사용됩니 
    • get 메서드: 이 메서드는 state.data를 읽을 때 호출됩니다. 예를 들어, render 함수에서 state.data를 참조할 때 이 메서드가 호출되어 state._data의 현재 값을 반환합니다. 이 메서드에서 state.data를 직접 참조하면 무한 재귀가 발생할 수 있기 때문에, 대신 state._data를 사용합니다.
    • set 메서드: 이 메서드는 state.data에 새로운 값을 할당할 때 호출됩니다. 이 메서드 안에서 state.data에 값을 할당하면 무한 재귀가 발생할 수 있으므로, 대신 내부 변수인 state._data를 수정합니다.

간단히 말해서, state.data는 사용자에게 노출되는 프로퍼티이며, state._data는 내부적으로만 사용되는 실제 데이터를 저장하는 변수입니다. 이렇게 구분함으로써, state.data를 통한 접근과 변경에 대해 추가적인 로직(예: 유효성 검사, 사이드 이펙트 처리 등)을 구현할 수 있습니다.

 

get, set은 

get은 속성 값을 읽을 때마다 실행되어 해당 값을 반환

set은 객체의 특정 속성에 새로운 값을 할당할 때 자동으로 호출

 

즉, render 함수가 실행될 때 (혹은 state.data가 어디서든 읽힐 때), Object.defineProperty에 의해 정의된 get 메서드가 호출되는 것입니다. 이러한 접근자 프로퍼티(accessor property)의 특성 때문에, 별도로 get 메서드를 명시적으로 호출할 필요가 없습니다. 객체의 속성에 접근하는 것만으로도 내부적으로 정의된 get 함수가 자동으로 호출됩니다.

 

이와 반대로, set 메서드는 state.data에 새로운 값이 할당될 때만 실행됩니다. 코드에서 state.data에 값을 할당하는 부분이 없으므로, set 메서드는 실행되지 않습니다.

 

set 함수 안에 render()함수를 같이 호출해줌으로써 state.data를 출력할 수 있기 때문에 넣어준것.

리액티브란?

<body>
  <script>
    const state = {
      _data: "Hello world",
    }

    const render = () => document.body.innerHTML = `<p>${state.data}</p>`

    Object.defineProperty(state, "data", {
      get() {
        console.log('get')
        return state._data
      },
      set(value) {
        console.log('set')
        state._data = value
        render();
      }
    })

    render();

    state.data = "안녕"
    state.data = "hello world!"

  </script>
</body>

 

값을 처음 입력했을때는 get만, 값을 바꿀 때마다 set, get이 같이 콘솔에 출력되는 모습을 확인할 수 있다.

이것이 리액티브.

 

앞써서 본 js mvc 패턴 개발 때는 view와 controller 모두를 수정하고 연결해 주어야만 했지만,

이 같은 경우 상태관리만 하는 코드를 통해서 코드를 좀 더 쉽게 작성하고 읽기 쉬운 코드를 만들 수 있다.