React State[setState를 통해 간접적으로 데이터 상태변화 관리]

React State란?

 

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

(State가 변경되면 컴포넌트는 리랜더링된다. 또한 State는 컴포넌트 안에서 관리된다.)

 

react는 가상돔을 통해 차이가 나는 부분만 반영하는 알고리즘을 사용한다.

이 차이나는 부분을 감지하는 법이 props , key, state 등을 이용한 것이라 할 수 있다.

 

변수로 선언된 데이터는 React 컴포넌트의 상태 관리에 직접적으로 사용되지 않는다.(변수 설명은 아래에)

---

 

바로 아래의 코드를 보자.

클래스의 변수로 todoData를 정의 했다. 안에는 데이터가 들어가 있다.

 

하지만 이 변수 안의 데이터 값에 접근해서 바꾸더라도 컴포넌트가 자동으로 업데이트되지 않는다.

 

handleClick 함수에서 todoData를 변경하려고 하지만, 이 변경사항이 화면에 반영되지 않는다.

React는 state나 props의 변경을 감지하여 컴포넌트를 업데이트하는데, 일반 속성의 변경은 감지하지 못하기 때문이다.

import React, {Component} from 'react'

export default class App extends Component {

 

btnStyle = {

  color:"#fff",

  border: "none",

  padding: "5px 9px",

  borderRadius: "50%",

  cursor:"pointer",

  float:"right"

};

getStyle = () => {

  return {

    padding: "10px",

    borderBottom: "1px #ccc dotted",

    TextDecoration: 'none'

  }

}

todoData = [

  {

    id:"1",

    title:"공부하기",

    completed: true

  },

  {

    id:"2",

    title:"청소하기",

    completed: false

  },

];

handleClick = (id) => {

  let newTodoData = this.todoData.filter(data => data.id !== id)

  console.log('newTodoData', newTodoData)

}

  render() {

    return (

        <div className='container'>

          <div className='todoBlock'>

            <div className="title">

              <h1>할 일 목록</h1>

            </div>

          {this.todoData.map((data) => (

            <div style={this.getStyle()} key={data.id}>

            <input type="checkbox" defaultChecked={false} />

              {data.title}

            <button style={this.btnStyle} onClick={() => this.handleClick(data.id)}>x</button>

           

          </div>

          ))}

          </div>

        </div>

    )

  }

}

 

---

 

두 번째 코드에서 todoData는 state 객체 안에 정의되어 있다. 이 방식을 사용하면, state에 있는 데이터가 변경될 때 React가 컴포넌트를 자동으로 업데이트 한다.

 

handleClick 함수에서 this.setState를 사용하여 todoData를 업데이트

setState 메소드는 새로운 상태를 React에 알리고 컴포넌트의 리렌더링을 트리거합니다.

---

state의 중요성:

• 컴포넌트의 동적 데이터 관리: state는 컴포넌트의 동적 데이터를 저장하고 관리하는 데 사용됩니다.
• 자동 리렌더링: state의 데이터가 변경될 때, React는 해당 컴포넌트를 자동으로 다시 그립니다.
• 읽기 전용: state는 직접 수정되어서는 안 됩니다. 상태를 변경할 때는 항상 this.setState 메소드를 사용해야 합니다.

요약:

첫 번째 코드에서는 todoData가 클래스의 일반 속성으로 사용되어 컴포넌트의 업데이트가 트리거되지 않습니다. 반면, 두 번째 코드에서 todoData는 state의 일부로 정의되어 있어, this.setState를 통해 상태가 변경될 때 컴포넌트가 자동으로 업데이트됩니다. 

export default class App extends Component {

  state = { // 데이터를 정의한 변수를 객체화 시켜서 사용

    todoData: [

      {

        id:"1",

        title:"공부하기",

        completed: true

      },

      {

        id:"2",

        title:"청소하기",

        completed: false

      },

    ],

    value: "",

  }

 

handleClick = (id) => {

  let newTodoData = this.state.todoData.filter(data => data.id !== id)

  console.log('newTodoData', newTodoData)

  this.setState({todoData: newTodoData})   // 상태관리를 해주는 setState

}

  render() {

    return (

        <div className='container'>

          <div className='todoBlock'>

            <div className="title">

              <h1>할 일 목록</h1>

            </div>

          {this.state.todoData.map((data) => (  

            <div style={this.getStyle()} key={data.id}>

            <input type="checkbox" defaultChecked={false} />

              {data.title}

            <button style={this.btnStyle} onClick={() => this.handleClick(data.id)}>x</button>

          </div>

          ))}

          </div>

        </div>

    )

  }

}

 

---

변수 vs 객체

 

변수로 선언된 데이터가 React 컴포넌트의 상태 관리에 직접적으로 사용되지 않는다.

 

이유는 React의 렌더링 메커니즘과 상태 관리 시스템의 특성 때문입니다. React 컴포넌트는 state와 props의 변경을 감지하여 리렌더링을 결정합니다. 이러한 메커니즘은 일반 변수에는 적용되지 않습니다.

---

일반 변수와 React의 상태 관리

1. 상태 변경 감지: React는 state와 props의 변경을 감지하고 이에 반응하여 컴포넌트를 리렌더링합니다. 하지만 일반 변수의 변경은 React에 의해 감지되지 않습니다.
2. 컴포넌트의 라이프사이클: state와 props는 컴포넌트의 라이프사이클과 밀접하게 연결되어 있습니다. 컴포넌트가 업데이트될 때, React는 이 두 상태를 확인하여 렌더링을 결정합니다.
3. 리렌더링 트리거: setState와 같은 메소드를 통해 state를 변경하면, React는 자동으로 컴포넌트를 리렌더링합니다. 그러나 일반 변수를 변경해도 이러한 리렌더링이 자동으로 발생하지 않습니다.
4. 성능 최적화: React는 state와 props의 변경을 효율적으로 관리하여 필요한 경우에만 컴포넌트를 리렌더링합니다. 일반 변수를 사용하면 이러한 성능 최적화가 적용되지 않습니다.