🐱 #5 React.js - State

🧩 state

🏃‍♂️ What is state in React?

React 컴포넌트의 현재 상황에 대한 정보를 나타내기 위해 React에서 사용하는 일반 Javascript 객체이다. state는 함수에 선언된 변수와 마찬가지로 구성 요소에서 관리되지만 차이점은 "정상"변수는 함수가 종료될 때 "사라지는" 반면,state는 React에 의해 보존된다.

🏃‍♂️ 그럼 props와 state의 차이점?

props "속성"의 줄임말이며 state 둘 다 일반 Javascript 객체이다. 둘다 렌더의 출력에 영향을 미치는 정보를 보유하고 있지만 한 가지 방식에서 다르다. 구성요소에 props 전달 되는(함수 매개변수와 유사) 반면 구성 요소 내 state에서 관리 된다.(함수 내에서 선언된 변수와 유사)

🏃‍♂️ State를 const로 선언하는 이유?

const로 선언을 하게되면 변수의 값을 바꿀 수 없다는 사실을 알것이다. 근데 왜 state 값은 계속 바뀌는데 왜 let이 아닌 const로 선언하는가.

state는 일반 변수와 달리 setState 함수를 이용하여 값을 변경한다.(이렇게 함수 내부의 변수가 함수 수명이 끝나더라도, 변수의 참조가 계속 된다면 그 변수의 수명은 계속 된다.)

그러나 let을 사용하게 되면 conuter=100과 같은 변수형식이 할당이 가능해진다.
따라서 이를 방지하고 setState를 사용한 변수 변경만 허락하기 위해 const로 선언한다.

🏃‍♂️ Setstate()

이벤트 핸들러, 서버 응답 또는 소품 변경에 대한 응답으로 상태를 업데이트할 수 있다. 이것은 setState() 메서드를 사용하여 수행된다. setState() 메서드는 구성 요소 상태에 대한 모든 업데이트를 대기열에 넣고 React에 업데이트된 상태로 구성 요소와 그 자식을 다시 렌더링 하도록 지시한다.

항상 setState() 메서드를 사용하여 상태 객체를 변경한다. 구성 요소가 업데이트 되었음을 알리고 render() 메서드를 호출하기 때문이다.

🏃‍♂️ State 사용 예

function App() {
  const [counter, setCounter] = useState(0); //state
  const increase =()=>{
    setCounter(counter+1);
  };

  return (
    <div>
      <div>{counter}</div>
      <button onClick={increase}>클릭!</button>
    </div>
  );
}
  };

위 코드는 쉽게 설명하면 다음과 같다. const [적용, 변경할 내용]이다. 위 코드 내용을 리뷰하면 const [counter, setCounter] = useState(0); 처음에 counter에 state값은 0으로 지정한다. let counter = 0과 같다.

<button onClick={increase}>클릭!</button>을 클릭하면 const increase =()=>{ setCounter(counter+1); }; 함수가 실행되고, <div>{counter}</div> counter가 바뀌는데 counter가 바뀌면서 state를 사용했기 때문에 자동으로 HTML에 랜더링이 돼 UI가 변경되는 것이다.