[React][Codestates]- React State - useState , state Hook

State

Application에서 Sate란 컴포넌트 내에서 변할 수 없는 값이며 상태는 React State로 다뤄야 한다.
[20100810]- React-State and Lifecycle 공식문서를 보고 state와 props에 대해 정리한 글이다. 참고해보자~!

State hook, useState

Hook이란 무엇일까???

공식 홈페이지에 의하면 Hook은 "React feature를 연결할 수 있는 특수한 함수"라고 한다. React를 다루기 위해 특별히? 사용되는 함수라고 생각하면 될까..??

React에서는 useState라는 특별한 함수를 통해 state를 다룬다. useState는 React Hook중의 하나이며 React state를 추가할 수 있게 해주는 Hook이다.

How to use useState

• useState를 사용하려면 import useState를 불러와야 한다. import {useState} from "react"
• useState 사용은 아래와 같다

const [state 저장 변수 , state 갱신 함수] = useState(상태 초기 값);

• 변수로 선언된 state 저장 변수와 state 갱신 함수는 useState의 리턴값을 구조 분해 할당한 변수이다.
• 일반적인 변수와 달리 React에 의해 함수가 끝나도 사라지지 않는다.
• useState를 호출하면 배열을 반환하는데, 배열의 0번째 요소는 현재 state 변수이고, 1번째 요소는 이 변수를 갱신할 수 있는 함수이다.
  useState의 인자로 넘겨주는 값은 state의 초기값이다.
• 아래의 코드는 공식 홈페이지에 있는 예제를 사용하였다.

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

위의 코드에서 count는 state를 저장하는 변수이고, setCount는 count를 변경하는 함수이다. useState의 괄호 안의 0 은 state의 초기값이다.

State 갱신하기

state를 갱신하려면 state를 갱신하는 함수를 호출해야 한다.

아래의 코드로 보면 다음과 같다.

Check Box 값을 변경 --> OnChange 이벤트 핸들러 함수인 handleChecked 호출 --> setChecked 호출 --> isChecked 변수 갱신 --> React는 해로운 isChecked 변수를 CheckboxExample 컴포넌트에 넘겨 해당 컴포넌츠를 다시 렌더링 한다.

const CheckboxExample=()=>{

  {/* state를 저장 할 변수와 state를 갱신 할 함수 */}
  const [isChecked, setIsChecked]=useState(false);

  const handleChecked=(event)=>{
    setIsChecked(event.target.checked)

  };

  return(
    <div className="App">
      <input type="checkbox" checked={isChecked} onChange={handleChecked} />      
      <span>{isChecked ? "Checked!" : "Unchecked"}</span>
    </div>
  )

}

주의사항!!

React state는 꼭 상태 변경 함수 호출로 변경해야 한다.!!
강제로 변경을 시도하면 리 렌더링이 되지 않거나 state가 제대로 변경되지 않는다.

ex ) state.push(1) , state [0]=1; 등..