리액트

[React] State란?

김애룽 2024. 1. 11. 12:47

 

State란?

State란 리액트에서 이벤트에 의해 변경되는 동적인 값이다. const, let 등으로 선언한 변수와 다르게 State 값이 변경되고 재 렌더링이 필요한 경우에 React가 자동으로 변경된 부분을  재렌더링하여 화면을 바꾼다. props는 부모 컴포넌트가 설정하는 값이며 읽기 전용이지만, State는 하위 컴포넌트도 데이터를 변경할 수 있다. 함수형 컴포넌트는 'useState'라는 React Hook을 사용하여 State를 다룰 수 있다.

 

useState 사용하기

1. 파일 위쪽에 useState를 import 해준다.

import { useState } from "react";

 

2. useState 구문을 사용한다.

  const [state,setState]=useState(초기값);
  • state: 현재 상태 값을 나타내며, 이 값을 컴포넌트에서 읽어서 사용할 수 있다. 예를 들어 {state} 라고 찍어보면 초기값이 나온다.
  • setState: 상태를 업데이트하는 함수이다. 이 함수에 새로운 값을 전달하여 상태를 업데이트 할 수 있으며, 상태가 업데이트되면 컴포넌트는 리렌더링된다. 
  • 보통 상태 업데이트 함수는 이름 앞에 set을 붙여 카멜케이스(camelCase)로 사용한다. 
    • 카멜케이스란? 각 단어의 첫 글자를 대문자로 쓰고, 나머지는 소문자로 쓰는 표기법이며, 단어들의 연결된 모습이 낙타의 등불룩한 형태를 연상시킨다고 해서 '카멜케이스'라고 불린다.
const [name, setName] = useState('Alice');  // 문자열
const [age, setAge] = useState(30);         // 숫자
const [isVisible, setIsVisible] = useState(true); // 불리언
const [user, setUser] = useState({ name: 'Alice', age: 30 });
const [items, setItems] = useState(['Apple', 'Orange', 'Banana']);
  • useState의 초기값은 문자열 숫자 뿐만 아니라 객체, 배열 등 다양한 형식이 들어올 수 있다.

 

예를 들어, 👍 좋아요 버튼을 누르면 숫자가 1씩 증가하는 상태를 만들어본다면 이렇게 쓸 수 있다.

import { useState } from "react";

function App() {
  let [like, setLike] = useState(0);

  return (
    <>
      <button onClick={() => { setLike(like + 1)}}> 👍 </button>
      <p>{like}</p>
    </>
  );

}

 

 

State를 사용할 때 중요한 점

//잘못된 예
const [array, setArray] = useState([]);
array.push('new item'); 

// 올바른 예
setArray([...array, 'new item']); // 새 배열을 생성하여 상태를 업데이트한다.
  • 상태를 직접 수정하지 말고, 항상 'setState' 함수를 사용하여 상태를 업데이트해야 한다. setState를 사용했을 때, state 값이 변경되면 useState가 변경을 감지해, 자식 컴포넌트들까지 리렌더링이 된다. 하지만 직접 state를 수정하게 되면 리렌더링이 되지 않을 수도 있다.
  • 또한 State는 개발자가 정의하게 되는데, 이때 렌더링이나 데이터 흐름에 사용되는 값만 State에 포함시켜야 한다. 왜냐하면 State가 변경될 경우 Component가 다시 렌더링 되기 때문이다. 렌더링과 데이터 흐름에 관계없는 값을 State에 포함시키면 불필요한 경우에 Component가 다시 렌더링되어 성능을 저하시킬 수 있다.

State와 Props

State와 Props는 일반 자바스크립트 객체로, 두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있는데 한 가지 방식에서 차이가 있다. props는 부모 컴포넌트로부터 자식 컴포넌트로 데이터를 전달하는데 사용되며 state는 함수 내에 선언된 변수처럼 컴포넌트 안에서 데이터를 관리한다. 또한 props는 읽기 전용이고 변경할 수 없지만, state는 컴포넌트 내에서 변경 가능하다. 

 

Props로 State 전달하기

import "./App.css";
import { useState } from "react";

function App() {
  const [parentState, setParentState] = useState('안녕!!!!!!!반가워!!!!');

  return (
    <div>
      <h1>부모 컴포넌트</h1>
      <ChildComponent parentState={parentState} />
    </div>
  );
}

function ChildComponent(props) {
  return (
    <div>
      <h2>자식 컴포넌트</h2>
      <p>부모에서 보낸 메시지: {props.parentState}</p>
    </div>
  );
}

export default App;

 

* 결과화면

  • App 컴포넌트는 parentState라는 상태를 가지고 있고, 이 상태를 ChildComponent에 props로 전달하고 있다. ChildComponent는 받은 props를 통해 부모 컴포넌트의 상태값을 확인하고 이를 화면에 표시한다.
  • 이 예제에서는 상태 업데이트 로직이 포함되어 있지 않기 때문에, parentState의 초기값 그대로 ChildComponent에 전달되어 초기값인 '안녕!!!!!!!반가워!!!!' 가 그대로 전달된다.