[React] useState

• 현재 개발 중인 Conti:ed 서비스를 위해 사용된, 그리고 앞으로 사용될 React hook들에 대해 정리해볼까 합니다.
• 이번 글에서는 useState에 대해서 다루고, 이후 계속해서 다른 hook들에 대해서도 작성할 예정입니다.

 

useState

1) 역할

• useState Hook은 Component에서 상태를 선언하고 관리하는 데 사용됩니다.
• Class였던 Component에서 사용하던 this.state와 this.setState를 함수형 컴포넌트에서도 사용할 수 있게 합니다.

2) 동작 방식

• useState는 초기 상태 값을 인자로 받아 배열을 반환합니다.
  1. 첫 번째 요소는 현재 상태 값을 나타내는 변수입니다.
  2. 두 번째 요소는 상태를 갱신할 수 있는 함수입니다.
• 두 번째 요소인 상태 갱신 함수는 새로운 상태 값을 인자로 받아서 Component의 state를 업데이트하고, Component를 다시 rendering합니다.
• 초기 상태 값은 useState가 처음 호출될 때만 사용되며, 이후 상태가 업데이트되면 새로운 상태 값이 저장됩니다.

3) 간단한 예시 몇 가지!

• 버튼 클릭으로 count를 증가시키는 경우

// 초기 상태 값 0을 인자로 받아 배열인 [count, setCount] 반환
// 첫 번째 요소 count는 현재 상태 값
// 두 번째 요소 setCount는 상태 갱신 함수
const [count, setCount] = useState(0);

// 버튼 onClick 시 실행되는 함수
const increment = () => {
  // prevCount에서 1을 더한 상태로 count 갱신
  setCount((prevCount) => prevCount + 1);
};

 

• ToDo List 생성

// 초기 상태 값으로 빈 배열을 인자로 받아 배열인 [todos, setTodos] 반환
// 첫 번째 요소 todos 현재 상태 값
// 두 번째 요소 setTodos 상태 갱신 함수
const [todos, setTodos] = useState<Todo[]>([]);
// 위 useState와 유사하게 동작
const [inputValue, setInputValue] = useState<string>("");

// 각 상태 갱신 함수를 담당하는 함수들
const addTodo = (): void => {
  if (inputValue.trim() !== "") {
    const newTodo: Todo = {
      id: Date.now(),
      text: inputValue,
    };
    setTodos([...todos, newTodo]);
    setInputValue("");
  }
};

const removeTodo = (id: number): void => {
  setTodos(todos.filter((todo) => todo.id !== id));
};

const handleInputChange = (e: ChangeEvent<HTMLInputElement>): void => {
  setInputValue(e.target.value);
};

• useState는 React Component에서 상태를 관리하기 위한 기본 Hook으로, 다양한 사용자 인터랙션에 따른 상태 변화를 쉽게 관리할 수 있게 해줍니다.
• React의 존재 이유라고 할 수 있는 이 useState를 통해서 더 간결하고 유지보수가 쉬운 코드를 작성할 수 있습니다.
• 다음 글에서는 useEffect에 대해서 알아보겠습니다.