(TIL11) React 함수형 컴포넌트_useReducer
1. useReducer란❓
상태관리를 해주는 Hooks 기능 중 하나!!!
useReducer를 이용함으로써 상태값을 변경하는 로직을 다른 곳에서 처리할 수 있습니다!
또한, useReducer는 함수형 컴포넌트에서의 Redux를 어느정도 대신하는 역할을 한다고 합니다.
2. useReducer사용법
상태관리를 해주는 Hooks 기능 중 하나!!!
useReducer를 이용함으로써 상태값을 변경하는 로직을 다른 곳에서 처리할 수 있습니다!
또한, useReducer는 함수형 컴포넌트에서의 Redux를 어느정도 대신하는 역할을 한다고 합니다.
이전 포스팅에서 useState로 썼던 상태값을 useReducer로 써보겠습니다
useState코드: const [hello,setHello] = React.useState('Hello function component')
useReducer코드: const [hello,dispatch] = React.useReducer(reducer,'초기값')
const [변수명,dispatch] = React.useReducer(조건에 따라 변경시킬 내용을 담은 컴포넌트,'초기값')
useReducer 코드를 하나하나 분해해서 보면
변수명: useState와 마찬가지로 상태값 이름
dispatch: 조건을 담을 객체
조건에 따라 변경시킬 내용을 담은 컴포넌트 : 예시에서는 reducer라는 이름으로 지정, 하지만 이는 임의값으로 원하는 이름으로 지정해주면 된다.
초기값: useState와 마찬가지로 초기값을 설정해주는 곳useState에서는 hello에 새로운 값을 집어넣기 위해 setHello를 사용하였지만,
useReducer에서는 dispatch와 reducer컴포넌트를 사용합니다!
이것만 보면 이해가 잘 안될 수 있으니 예시코드를 보여드리겠습니다.
3. useState코드와 useReducer코드 비교해보기
useState와 useReducer 각각을 사용하여 다음의 컴포넌트를 만들어보겠습니다.
1) 초기값 0
2) +1 버튼을 누르면 1씩 증가
3) -1버튼을 누르면 1씩 감소
1) ✔ useState 사용
const Counter = ()=>{
const [number,setNumber] = React.useState(0)
const onUp = ()=>{
setNumber((n)=>n+1)
}
const onDown = ()=>{
setNumber((n)=>n-1)
}
return(
<>
<div>{number}</div>
<button onClick={onUp}>+1</button>
<button onClick={onDown}>-1</button>
</>
)
}
💻 결과물
useState와 useReducer 각각을 사용하여 다음의 컴포넌트를 만들어보겠습니다.
1) 초기값 0
2) +1 버튼을 누르면 1씩 증가
3) -1버튼을 누르면 1씩 감소
const Counter = ()=>{
const [number,setNumber] = React.useState(0)
const onUp = ()=>{
setNumber((n)=>n+1)
}
const onDown = ()=>{
setNumber((n)=>n-1)
}
return(
<>
<div>{number}</div>
<button onClick={onUp}>+1</button>
<button onClick={onDown}>-1</button>
</>
)
}
hooks안 state값에 숫자가 담긴 것을 확인할 수 있습니다.
2) ✔ useReducer 사용
const reducer = (number,action)=>{
switch(action.type){
case "Up":
return number+1
case "Down":
return number-1
default:
return number
}
}
const Counter = () =>{
const [number,dispatch] = useReducer(reducer,0)
const onUp = () =>{
dispatch({type:'Up'})
}
const onDown = () =>{
dispatch({type:'Down'})
}
return (
<>
<div>{number}</div>
<button onClick={onUp}>+1</button>
<button onClick={onDown}>-1</button>
</>
)
}
useReducer에서는 dispatch 객체 안에서 타입을 정해주고,
reducer라는 컴포넌트 안에서 타입에 따라 값에 어떤 변화를 줄 것인지를 switch와 case를 사용하였습니다.
💻 결과물
반면 useReducer를 사용하였더니 Reducer 안에 숫자가 담긴 것을 확인할 수 있습니다.
⭐useState와 두드러지는 차이점은 상태값의 변화를 다른 컴포넌트에서 조종한다는 점입니다!
안녕하세요!😊 국비지원으로 개발쪽 공부를 시작한 학생입니다!
혹시나 제가 잘못된 정보를 제공하고 있다면 댓글 부탁드립니다! 💚
글 읽어주셔서 정말 감사합니다🙇♀️
Author And Source
이 문제에 관하여((TIL11) React 함수형 컴포넌트_useReducer), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@wlgus2134/TIL11-React-함수형-컴포넌트useReducer저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)