[CS-yum][React] 1회차 (useState, useReducer)

장문용·2023년 10월 14일
1

React

목록 보기
1/5
post-thumbnail

useState

useState는 컴포넌트에 state 변수를 추가할 수 있게 해주는 React 훅이다.

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

🍪 set 함수를 호출하더라도 이미 실행 중인 코드의 현재 state는 변경되지 않는다. → 이것은 React의 동작 방식으로, state가 비동기적으로 업데이트되기 때문이다.

🍪 useState 에서 초기값을 설정은 첫 컴포넌트 렌더링에서만 실행된다.


📢 초기값 설정에 함수 실행을 전달하면 매 렌더링 마다 함수가 실행되는 문제가 있다!

function TodoList() {
  const [todos, setTodos] = useState(createInitialTodos());
  // ...

💡 다음과 같이 초기화 함수의 실행 대신 함수의 참조값을 전달해 첫 렌더링에만 함수가 실행되게 할 수 있다.

function TodoList() {
  const [todos, setTodos] = useState(createInitialTodos);

🍪 객체와 배열을 state로 사용할 때는 불변성을 지켜야 한다. 직접 변이를 하면 React가 변경 사항을 감지하지 못하고 렌더링이 발생하지 않는다.

🍪 useState를 남용하지 않는 것이 중요하다. 렌더링하지 않는 것들을 state로 관리하면 성능 문제가 발생할 수 있다.

🍪 “렌더링 횟수가 너무 많다”는 경고는 렌더링 중에 state를 무조건적으로 변경하고 있는 경우 발생할 수 있다. 이를 방지하기 위해 React에서 적절한 최적화를 수행해야 한다.


React 컴포넌트에서 상태(state)를 업데이트할 때, 직접 값을 전달하는 것과 업데이트 함수로 값을 전달하는 것의 차이가 무엇일까?

💡 값 직접 전달 방식은 비동기적일 수 있으며 React의 최적화를 방해할 수 있다. 업데이트 함수를 사용하는 방식은 이전 상태를 사용하므로 React가 상태 업데이트를 안전하게 처리할 수 있고, 동기적으로 처리된다. 이전 상태에 의존하는 경우에 유용하다.


useReducer

useReducer 는 컴포넌트에 reducer를 추가할 수 있는 React hook

const [state, dispatch] = useReducer(reducer, initialArg, init?)
// init은 함수를 전달하는 경우 사용

🍪 useReducer를 사용하면 state 업데이트 로직을 reducer 함수를 통해 처리할 수 있다. Reducer 함수는 state가 업데이트되는 방식을 지정한다.

🍪 dispatch 함수를 사용하여 state를 업데이트하고 다시 렌더링을 트리거한다. dispatch 함수에 액션 객체를 전달하면 reducer 함수가 이를 기반으로 다음 상태를 계산한다.

🍪 useReduceruseState와 유사한 방식으로 현재 state를 제공하고, 업데이트하는 dispatch 함수를 반환한다.


💡 dispatch 함수

  • state를 다른 값으로 업데이트하고 다시 렌더링을 촉발
  • dispatch 함수에 유일한 인수로 action이라는 객체 전달
  • action: 사용자가 수행한 작업. 보통 type 속성이 있는 객체가 옴
  • 반환값이 없다.

🍪 useReducer를 사용하면 state 업데이트 로직을 컴포넌트 외부의 reducer 함수로 분리할 수 있다. 이것은 코드의 관리와 테스트 용이성을 향상시킨다.

🍪 useReducer를 사용하면 state를 직접 변이하지 않고 새로운 상태를 반환하도록 한다.


출처 https://react-ko.dev/reference/react

profile
FE 개발자

0개의 댓글

Powered by GraphCDN, the GraphQL CDN