React - useState vs useReducer state 관리 Hooks 비교

리액트에서 상태 관리할 수 있는 훅이 useState, useReducer 두가지가 있습니다. 각각의 훅을 언제 사용하면 좋을까요? 프로그래밍에는 맞고 틀림이 없습니다. 아래 내용을 참고하여 상황에 맞게 적절할게 사용하시면 됩니다. useState vs useReducer 비교 useState useReducer 리액트 메인 상태관리 방법 더욱 강력한 상태 관리 방법 개별 및 간단한 상태 관리할 때 사용 각각의 상태나 데이들이 연관되어 있을때 상태 변경이 쉽거나, 업데이트가 몇 개일 때 사용 상태 변경이 복잡할때 useReducer로 처리 가능한 것이 useState로 처리 가능합니다. 정답은 없으니 본인에게 필요한 훅을 잘 사용하시길 바랍니다.

• format_list_bulleted Develop/React
• · 2023. 4. 7.
• textsms

React - 복잡하고 다양한 state 변경에 사용하는 Hooks useReducer

useReducer 리액트 훅 useRedcuer입니다. useState와 같이 useRedcuer는 상태를 업데이트할 때 사용됩니다. useRedcuer 언제 사용하는 것이 좋을까요? 다양한 state를 이용하거나, 복잡할때 다른 state 기반으로 state를 업데이트 할때 useReducer 사용법 const [state, dispatch] = useReducer(reducer, initialArg, init?) reducer 컴포넌트 외부에서 state 관리할 reducer 함수 initialArg state 초기 값입니다. init 초기 상태를 반환하는 함수입니다. 1. 컴포넌트 내에 useReducer 선언 const [state, dispatch] = React.useReducer(reduc..

• format_list_bulleted Develop/React
• · 2023. 4. 6.
• textsms

React - useState를 이용하여 카운터 만들기

리액트 state에 대하여 알아보려고 합니다. 리액트 컴포넌트를 생성하고 난 뒤에는 state 값이 변경되면 다시 렌더링 됩니다. 상태가 변경되면 자동으로 다시 컴포넌트를 렌더링 되기 때문에 상태 변경만 해주면 됩니다. 1. useState 초기화 const [counter, setCounter] = React.useState(0); 먼저 useState 함수를 이용하여서 초기화를 합니다. useState 안에 들어간 0은 초기화할 때 사용하는 값입니다. 2. 각 버튼 클릭 이벤트에서 setCounter를 이용하여 상태 값을 변경합니다. setCounter 파라미터를 callback 함수로 작성하였는데, 이전의 counter를 가지고 와서 1을 더해주는 방식입니다. setCounter(counter =>..

• format_list_bulleted Develop/React
• · 2023. 1. 13.
• textsms