State

꼬디바아 ㅣ 2024. 2. 19. 14:31

728x90

🖥️ State

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

⌨️ props와 state의 차이

props
props는 함수 매개변수처럼 컴포넌트에 전달
state
함수 내에 선언된 변수처럼 컴포넌트 안에서 관리된다.

⌨️ state를 const로 선언하는 이유

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

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

그러나 let을 사용하게 되면 counter = 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에 초기값을 0으로 지정한다는 뜻이다. 코드를 살펴보면 버튼을 클릭 했을 때마다 함수가 실행되고 counter 값이 바뀌면서 자동으로 HTML이 렌더링이 돼 변경되는 것이다.

⌨️ array, object state 변경

function App(){
  
  let [name, setName] = useState( ['kim', 'park', 'lee'] );  
  
  return (
      <button onClick={ ()=>{ setName(['cho', 'park', 'lee']) } }> 수정버튼 </button>
  )
}

위 코드와 같이 배열도 변경할 수 있다. 위 코드를 더 간결하게 작성한다면

function App(){
  
  let [name, setName] = useState( ['kim', 'park', 'lee'] );  
  
  return (
      <button onClick={ ()=>{ 
  			name[0] = 'cho';
    		setNaem(name);
  		} }> 수정버튼 </button>
  )
}

하지만 위 코드와 같이 array, object와 같은 자료를 다룰 때는 원본 데이터를 직접 조작하는 것보다 기존값은 보존해주는 식으로 코드를 짜는게 좋은 관습이다.

function App(){
  
  let [name, setName] = useState( ['kim', 'park', 'lee'] );  
  
  return (
      <button onClick={ ()=>{ 
    		let copy = [...name];
  			name[0] = 'cho';
    		setNaem(copy);
  		} }> 수정버튼 </button>
  )
}

📌 [...name]
spread operator라고 하는 문법이다. array나 object 자료형 왼쪽에 붙일 수 있으며 뜻은 별거 없고 괄호를 볏겨 내는 것이다.