리액트에서 많이쓰이고 중요한 개념인 State(상태)에 대해 알아보자

1. State(상태)란?

리액트에서 상태란 컴포넌트 내부에서 변할수 있는 값 이다 예를들어 어떤 홈페이지에서 로그인이 되어있어야 접근할 수 있는 페이지가 있다고 해보자 그렇다면 로그인이 되어 있는 상태와 되어있지 않은 상태로 구분할 수 있겠다 코드로 살펴보자

import react, {useState} from 'react'

function Component() {
  const [isLogIn, setIslogIn] = useState(false);
  
  return (
    {
      isLogin ? <div>로그인이 되어야 볼수있는 페이지</div> : <div>로그인이 필요합니다 !</div>
    }
  )
}

간단하게 예를들어 isLogIn이(상태) true면 '로그인이 되어야 볼수있는 페이지' 가 화면에나오고 false면 '로그인이 필요합니다 !' 가 화면에 나올 것 이다(예를 들기위한 코드라 극단적으로 압축했다)

이처럼 컴포넌트 내부에서 변할수 있는 값이 State(상태)라고 할 수 있겠다 그리고 상태는 React State로 다뤄야 한다

2. useState / 사용법

useState는 리액트가 제공하는 React Hook 중에 하나다(React Hook 이란? https://ko.reactjs.org/docs/hooks-intro.html)

useState는 상태를 다룰수 있는 특별한 함수인데 어떻게 사용하는지 알아보자

• React로 부터 import문을 사용해 useState를 불러와야 한다

import react, { useState } from 'react'

• 이후 useState를 컴포넌트 안에서 호출한다

import react, { useState } from 'react'

function Example() {
  // isChecked 라는 state 변수를 선언한다([]안에 작성해야 한다)
  // 일반적인 변수는 함수가 끝나면 사라지지만 state변수는 React에 의해 사라지지 않는다
  const [isChecked, setIsChecked] = useState(false);
}

• useState를 호출하면 배열을 반환하는데, 배열의 0번째 요소(isChecked)는 현재 state 변수이고, 1번째 요소(setIsChecked)는 이 변수를 갱신할 수 있는 함수이다 useState의 인자로 넘겨주는 값은 초기값 이다. 정리하자면

isChecked : state(상태)를 저장하는 변수
setIsChecked : state(상태) isChecked를 변경하는 함수
useState : React Hook
false : State(상태) 초기값

• state 변수에 저장된 값을 사용하려면 JSX엘리먼트 안에 직접 불러서 사용하면 된다 위에 예시는 state(상태)값이 boolen 이기때문에 true or false 여부에 따라 다른 결과가 보이도록 삼항연산자를 사용할 수 있겠다

<div>{isChecked ? "Checked !" : "unChecked"}</div>

3. state(상태) 갱신하기

• state(상태)를 갱신하려면 상태변경 함수인 setIsChecked를 호출 해야한다

체크박스를 예시로 알아보자

import react, { useState } from 'react'

function Example() {
  const [isChecked, setIsChecked] = useState(false);
 
  const checkHandler = (e) => {
    setIsChecked(e.target.checked);
  }
  
  return (
    <div>
      <input type="checkbox" checked={isChecked} onChange={checkHandler} />
      <span>{isChecked ? "Checked !" : "unChecked"}</span>
    </div>
  )
}

• 이 예시의 경우 input 태그의 JSX 엘리먼트 값 변경에 따라서 상태(isChecked)가 변해야 한다 즉, 브라우저에서 체크박스가 체크되면 코드상에 상태(isChecked)가 변경되야 한다는 뜻 이다
  -> 사용자가 체크박스 값을 변경하면 input 태그의 onChange 이벤트가 checkHandler 함수를 호출하고 이 함수가 상태변경 함수인 setIsChecked 를 호출한다 그렇게 되면 결과에 따라 상태(isChecked)가 갱신되며, React는 갱신된 상태(isChecked)를 Example 컴포넌트에 넘겨 해당 컴포넌트를 다시 렌더링 한다.

  4. state(상태) 를 강제로 변경하면 안됨

  반드시 상태변경 함수를 사용해야 한다 이 내용은 React와 개발자 간의 정해진 규칙 이기 때문에 꼭 지켜야한다, 강제로 변경을 시도하면 상태가 갱신되지 않거나 리렌더링이 되지 않는다.