[React] 리액트 State

🤔 State란 ?

👉 state를 언급하기 전, 다음 글에서 공부할 props에 대해 간략하게 알아보자.

• 일반적으로 React에서 모든 데이터 전달 방향은 부모 컴포넌트 → 자식 컴포넌트로 향함.
  그래서 자식 컴포넌트에서 필요한 데이터는 부모 컴포넌트에서 자식 컴포넌트의 props에 담아 전달하게 됨.
• 자식은 받아온 props를 직접 수정할 수 없기 때문에 변경 데이터 저장은 불가능함.
• 반면에 state는 컴포넌트 내부에서 선언하며, 내부에서 값을 변경할 수 있음.
• 공식 문서) 렌더링 결과물에 영향을 주는 정보

👉 State는 말 그대로 상태와 관련된 것.

🤔 State를 사용하는 이유

• 사용하는 쪽과 구현하는 쪽을 철저하게 분리시켜서 양쪽의 편의성을 각자 도모하는 것.
• props와 비교했을 때 화면에 출력되는 내용은 완전히 똑같지만, props 데이터를 사용자에게 노출되는 부분에 직접 적는 것이 아니라 State를 통해 참조하므로 사용자가 알 필요가 없는 데이터를 내부에서 은닉하는 캡슐화 가능.
• 사용법)
  • 컴포넌트 생성자에서 super를 호출하기 전에는 this를 사용할 수 없으므로, State 객체를 사용하고 싶다면 컴포넌트를 생성 시 가장 윗부분에 constructor() 함수를 적어준다.
  • 모든 컴포넌트는 자신의 state를 가지기 때문에, 생성자에 초기화하지 않고 클래스 내 필드로 선언하여 사용하는 것도 가능.

📌 예시 )

class App extends Component {
  constructor(props) {
    super(props);
      this.state={ // 구현
      Subject:{name:'hs',age:'24'}
    }
  }
  render() {
    return (
      	<div className="App">
        <Subject 
        	title={this.state.subject.name} // 사용
    		sub={this.state.subject.age}>
        </Subject>
      </div>
    );
  }
}

📍 setState

• constructor 메서드 이외의 공간에서 state를 변경하기 위해서는 사용하는 메서드. (state 변경 시, 컴포넌트는 리렌더링 됨.)
• setState 함수는 비동기로 작동함. 즉, setState() 함수를 사용해서 state를 업데이트 하더라도 즉시 반영되지 않음.
• 따라서 setState가 state값에 대한 변화를 요청하면, 그 요청 사항은 이벤트 핸들러가 종료된 이후 갱신됨.
• react가 매 setState 호출마다 요구사항을 반영하지 않고 종합하여 한번에 처리하는 이유 ? ) 여러 번의 불필요한 렌더링을 막기 위함.

📌 예시 )

onClick() {
  this.setState({ age: 23 }); // age 값이 초기값 0 에서 23으로 업데이트 되도록 요청.
}

📌 사용사례 )
좋아요 버튼을 눌렀을 때 좋아요 수가 증가되도록 하는 경우

class ClassComponent extends React.Component {
  state = { // 멤버 변수를 사용하여 초기화
    count: 0,
  };

  onClick = () => {
    this.setState({ count: this.state.count + 1 }); 
    // 좋아요 버튼 클릭 시 count가 1씩 증가
  };

  render() {
    return (
      <div>
        {this.state.count} <button onClick={this.onClick}>좋아요</button>
      </div>
    );
  }
}

참고사이트

React State
컴포넌트 State
누구든지 하는 리액트 4편:props와 state
[React] 컴포넌트의 State 란?
비동기로 동작하는 react의 setState에 대하여