[TIL] 23.04.27

Minkyu Shin·2023년 4월 28일

TIL

목록 보기

16/44

오늘의 나는 무엇을 배웠을까?

1. useState

useState는 React의 Hooks 중 하나로써, useState 함수를 사용하면 함수형 컴포넌트에서 상태를 관리할 수 있게 된다.
상태를 관리해 주면 사용자 인터랙션에 따라 컴포넌트에서 보여줘야 하는 내용을 바꿔줄 수 있다.

import { useState } from "react";

를 통해 리액트 패키지에서 useState 함수를 불러올 수 있다.

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

useState 를 사용할 때는 상태의 초깃값을 파라미터로 넣어 호출한다. 함수를 호출하면 현재 상태, Setter 함수를 요소로 가진 배열을 반환한다. 따라서, 위와 같이 배열 구조 분해 할당을 통하여 요소를 추출할 수 있다.
이 때, 콜백을 사용하여 초깃값을 지정할 수도 있다.

const [state, setState] = useState(() => {
  // ~계산
  return initialState;
});

콜백으로 초깃값을 지정해 주게 되면 콜백이 값을 반환할 때까지 React가 렌더링 하지 않고 기다린다. 실행이 오래 걸리는 콜백일 수록 초기 렌더링이 늦어질 수 있다.

2. Setter 함수

Setter 함수는 파라미터로 전달 받은 값을 최신 상태로 설정해 준다.

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

const handleAddClick = () => {
 setState(state + 1);
}

와 같이 Setter 함수에 값을 전달하면 해당하는 값으로 state를 변경해 준다.
이 때 참조형 State(배열/객체)의 경우에는 반드시 새로운 값을 만들어서 전달해야 한다. 일반적으로 spread 구문을 사용한다.

const [state, setState] = useState({ count: 0 });

1. 잘못된 예
const handleAddClick = () => {
  state.count += 1; // 참조형 변수 프로퍼티 수정
  setState(state); // 프로퍼티 값이 바뀌었더라도 state가 참조하는 주솟값이 같음 => state 변경 인식 X
}

2. 올바른 방법
const handleAddClick = () => {
  setState({...state, count: state.count + 1});
}

콜백으로 state를 변경할 수도 있다.

setState((prevState) => {
  // ~계산
  return nextState;
});

이전 state 값을 참조하며 state를 변경하는 경우, 비동기 함수에서는 최신값이 아닌 state 값을 참조하는 문제가 발생한다.
이럴 때, 콜백을 사용하면 파라미터로 올바른 state 값을 가져와서 사용할 수 있다.
항상 그래야하는 것은 아니지만, 이전 state 값으로 새로운 state를 만드는 경우엔 항상 콜백 형태를 사용하는 습관을 들이는 것이 좋을 것 같다.

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

const handleAddClick = async () => {
  await addCount();
  setCount((prevCount) => prevCount + 1);
}

3. 보충학습 정리

오늘 보충학습을 오전에 진행하였다. 신청자가 나 말고 없어서 1:1 과외를 받는 천금 같은 기회를 얻었는데, props 와 state에 대한 개념을 확실히 정립할 수 있는 좋은 기회였다.

3-1. Component

프로그래밍에서 "함수"는 코드를 그룹화 시켜 재사용성을 높이거나, 코드가 너무 많을 때 분리의 목적으로 활용되는 개념이다.
컴포넌트도 함수와 비슷하게 UI들을 그룹화 시켜주는 역할을 한다. UI들을 그룹화 시켜주어 재사용성을 높이고 많은 양의 코드를 분리시켜 유지보수에 용이하게 해준다.