React state와 간단하게 알아보는 useState

👾 state란?

 • state는 컴포넌트 내에서 변할 수 있는 값, 즉 상태를 의미한다.

 • React 컴포넌트는 state가 변경되면 새롭게 호출되고, 리렌더링 된다. (UI가 자동으로 업데이트됨)

 • state는 props처럼 App 컴포넌트의 렌더링 결과물에 영향을 주는 데이터를 갖고 있는 객체지만, props는 (함수 매개변수처럼) 컴포넌트에 전달되는 반면 state는 (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리된다. 즉, props는 컴포넌트를 사용하는 외부자를 위한 데이터고, state는 컴포넌트를 만드는 내부자를 위한 데이터이다.

 

---

 

👾 useState

import { useState } from 'react'; // useState 호출

const [state, setState] = useState(initialState);

• state 상태 유지 값

• setState 상태 변경 함수

• initialState 초기값

 

✔️ useState 분해

const [mode, setMode] = useState("init");
console.log(mode); // init
console.log(setMode) // state 값을 갱신하는 function
/* useState는 주로 이 형태로(구조분해할당) 사용한다. 
init은 초기값, mode는 state의 값을 읽고, setMode는 state의 값을 갱신한다. */

----- useState 분해 -----
// useState는 배열을 리턴하고, 
// 0번째 요소는 상태의 값을 읽을 때 쓰는 데이터(현재 state의 변수), 
// 1번째 요소는 상태의 값을 갱신할 때 사용하는 함수이다. 

const _mode = useState("init") // useState의 인자는 state의 초기값
const mode = _mode[0]; // state의 값을 읽음
const setMode = _mode[1]; // state의 값을 바꿈
-------------------------

 

✔️ useState 예제

👩🏻‍💻 example 1

function Checkbox() {
  const [isChecked, setIsChecked] = useState(false);

  const handleChecked = (e) => {
    console.log("clicked");
    setIsChecked(e.target.checked)
  }

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

 

👩🏻‍💻 example 2

function App() {
  const [name, setName] = useState("Mike");

  return (
      <div>
          <h1>state</h1>
          <h2>{name}</h2>
          <button onClick={() => {
              setName(name === "Mike" ? "Elle" : "Mike");
          }}>chnage</button>
      </div>
  )
}

 

👾 상태 끌어올리기(Lifting State Up)

↓ 리액트 공식문서에 예시가 잘 나와있으니 참고하면 좋을 것 같다.

컴포넌트 간 State 공유하기 – React

 단방향 데이터 흐름이라는 원칙에 따라 하위 컴포넌트는 상위 컴포넌트로부터 전달받은 데이터의 형태 혹은 타입이 무엇인지만 알 수 있다. 데이터가 state로부터 왔는지, 하드코딩으로 입력한 내용인지는 알지 못한다. 그래서 하위 컴포넌트에서의 어떤 이벤트로 인해 상위 컴포넌트의 상태가 바뀌는 것은 마치 “역방향 데이터 흐름”과 같이 이상하게 들릴 수 있다. React가 제시하는 해결책은 다음과 같다.

 상위 컴포넌트의 “상태를 변경하는 함수” 그 자체를 하위 컴포넌트로 전달하고, 이 함수를 하위 컴포넌트가 실행한다.

 이것이 상태 끌어올리기이다.

 

✔️ 상태 끌어올리기 방법

  1. state를 공통 부모로 이동

  2. 공통 부모로부터 props를 통해 정보 전달

  3. 이벤트 핸들러를 전달해 자식에서 부모의 state를 변경할 수 있도록 구현

 

 

출처: 리액트 공식문서

 → state를 공통 부모 컴포넌트로 옮기는 것은 두 패널을 조정할 수 있게 한다. true와 false를 사용해 상태를 제어하는 것 대신 활성화된 인덱스를 사용하면 한 번에 하나의 패널만 활성화됨을 보장한다. 그리고 자식 컴포넌트로 이벤트 핸들러를 전달하는 것은 자식 컴포넌트에서 부모의 상태를 변경할 수 있게 한다.

 

 

---

✏️ 공부하며 정리한 내용입니다. 잘못된 정보나 더 공유할 내용이 있으면 댓글로 알려주세요!

읽어주셔서 감사합니다 😊