setState 메소드는 특별히 컴포넌트의 state 객체를 업데이트하기 위해 설계

state는 React 컴포넌트에서 상태 관리를 위해 사용되는 특별한 객체이며, setState는 이 객체와 직접적으로 연관되어 있습니다.

setState의 동작 방식:

1. State 객체에 접근: setState는 컴포넌트의 현재 state에 접근합니다. 이 메소드는 컴포넌트의 state 속성에 정의된 객체를 대상으로 작동합니다.
2. 상태 변경: setState에 전달된 객체 또는 함수는 현재의 state를 변경합니다. 변경 사항은 기존 state에 병합됩니다. 즉, setState에 제공된 객체의 필드만 업데이트되며, 나머지 부분은 그대로 유지됩니다.
3. 특별한 메소드: setState는 React 클래스 컴포넌트에 내장된 메소드입니다. 이 메소드는 state 객체와 직접적으로 연결되어 있으며, 다른 일반 객체에는 적용되지 않습니다.

---

state와 다른 객체들:

• State 객체: state는 컴포넌트의 상태를 나타내며, setState를 통해 관리됩니다. 이 객체는 컴포넌트의 렌더링과 상호작용에 직접적인 영향을 미칩니다.
• 일반 객체 (예: btnStyle): 이러한 객체들은 state와는 다릅니다. 이들은 단순히 컴포넌트 내에서 사용되는 일반 JavaScript 객체로, setState와는 연관이 없습니다. 
• state1 객체: 커스텀 이름으로 state 객체를 정의하면 React는 이를 정상적인 상태 객체로 인식하지 못합니다. React 컴포넌트의 상태 관리 시스템은 state라는 정확한 이름의 객체를 찾아 작동합니다. 이것은 React의 규약입니다.

import React, {Component} from 'react'

export default class App extends Component {

  state1 = {

   

  }

  state = {

    todoData: [

      {

        id:"1",

        title:"공부하기",

        completed: true

      },

      {

        id:"2",

        title:"청소하기",

        completed: false

      },

    ],

    value: "",

  }

btnStyle = {

  color:"#fff",

  border: "none",

  padding: "5px 9px",

  borderRadius: "50%",

  cursor:"pointer",

  float:"right"

};

 

결론:

따라서, setState가 state 객체를 대상으로 하는 것은, React의 설계에 의해 정해진 것입니다. 이 메커니즘은 컴포넌트의 상태를 안정적으로 관리하고, 상태 변경에 따라 자동으로 컴포넌트를 리렌더링하도록 하는 데 필수적입니다.

 

다른 일반 객체들은 setState와는 관련이 없으며, 이 객체들을 변경하더라도 컴포넌트는 자동으로 리렌더링되지 않습니다.