[React] setState, useState, Fragments

State란?

• React에서 State(상태)는 페이지에 동적인 부분을 담당한다. 컴포넌트가 특정 정보를 '기억'하여 표시하기를 원하는 경우에 쓴다.
• 컴포넌트의 상태를 관리하고 업데이트하는 데 사용되는 setState와 useState가 있다.

setState

• 클래스 컴포넌트에서 사용되고 React에서 제공하는 Component 클래스에 사용되는 메서드이다.

예시

import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  // state를 업데이트한다.
  incrementCount = () => {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.incrementCount}>증가</button>
      </div>
    );
  }
}

export default Counter;

• Component를 import하고 버튼을 클릭하면 incrementCount가 호출되서 setState가 count 상태를 1 증가 시킨다.
• state가 바뀔때마다 render가 실행되기 때문에 속도 느려짐,성능저하 이슈가 있을 수 있다.

• 함수는 render 밖에서 선언한다. 왜냐하면 render될 때마다 함수가 안에 있으면 계속 실행되기 때문이다.

prevState

this.setState((prevState, props) => ({ count: prevState.count + 1 }));

• 이전의 state쓰는 경우에는 prevState를 써서 이전 상태와 프롭스를 받아 새 상태를 반환하는 함수를 사용할 수 있다.

useState

• reactHooks에서 제공하는 함수 컴포넌트에서도 상태를 관리할 수 있는 함수이다.

예시

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
}

• useState를 import한다.
• 구조분해 할당 문법을 사용하여 useState 를 사용 할 때에는 상태의 기본값을 파라미터로 넣어서 호출하면 배열이 반환되는데, 여기서 첫번째 원소는 현재 상태, 두번째 원소는 Setter 함수 이다.
• Setter 함수는 파라미터로 전달 받은 값을 최신 상태로 설정해준다.
• hooks에서는 Counter함수 전체가 재실행된다. -> 속도 저하 이슈

비동기?

• setState와 useState는 비동기적으로 동작한다. React에서 상태 업데이트가 즉시 반영되지 않을 수 있다는 것을 의미한다.
• React는 상태 업데이트들을 일괄 처리하고 내부적으로 최적화 하기 때문이다.
• 이를 동기적으로 처리하기 위해 찾아보니 hooks에서 제공해주는 useEffect라는 것이 있다. 아직 배우지 않았으니 후의 포스팅에 쓸 예정이다.🤗🤗

Fragments

• 리액트를 사용하기 위한 문법인 JSX 를 쓸 때, return 문 안에는 반드시 하나의 최상위 태그가 감싸줘야 한다. 이는 리액트가 하나의 컴포넌트만을 리턴할 수 있기 때문이다.
• div나 다른 태그로 감싸면 elements css 적용시 불편하기 때문에 -> 빈태그인 Fragments를 사용한다.
• 불필요한 부모요소를 추가할 필요가 없게 된다.

예시 1

import React from 'react';

const MyComponent = () => {
  return (
    <React.Fragment>
      <h1>안녕</h1>
      <p>하이</p>
    </React.Fragment>
  );
}

• React.Fragment태그로 감싸주었다.

예시 2

const MyComponent = () => {
  return (
    <>
      <h1>바위</h1>
      <p>바잉</p>
    </>
  );
}

• 빈태그로 감싸주어서 예시 1과 다르게 import를 하지 않았다.
• Fragments를 사용하면 간결하고 코드의 가독성에 도움이 되니 자주 쓸 것 같다.🤡

참조

• https://react.vlpt.us/basic/07-useState.html (벨로퍼트와 함께하는 모던 리액트)
• https://youtu.be/aYwSrzeyUOk?si=wmfMhWn4YrhixeZV (제로초 유튜브)
• https://react.dev/learn (리액트 공식문서)