리액트 useReducer

useReducer는 hook

---

 2024년 새해. 진지하게 리액트 공부를 시작했다.

 

 Hook은 낚아채다는 뜻이다.

 프로그래밍에서는 어떤 시점에 일어나는 순간을 인지하고 프로그래머가 그 지점에 원하는 기능을 구현하는 정도로 이해해도 될듯하다.

 

 리액트에서 Hook 으로 불리는 카테고리 안에는 많은 기능들이 존재하는데, 이번 포스팅은 useReducer 다.

 리덕스와 거의 비슷한 기능이지만 리덕스를 본격적으로 공부하기 전에 연습하고 기억해두려고 한다.

 

페이지 상단에 임포트하고

import React,{useReducer} from "react";

 

사용할 펑션을 구현한다.

리액트는 변수와, 그 변수를 컨트롤하는 함수 패턴. useState도 동일.

function reducer(state, action){
//action.type 값에 따라 다른 작업 수행
switch (action.type){
case 'INCREMENT':
return {value:state.value + 1};
case 'DECREMENT':
return {value:state.value - 1};
default:
//아무것도 없음
return state;
}
}

 

증가와 감소 버튼을 클릭할 때마다 숫자 카운팅이 반영되는 간단한 페이지.

const Counter = () => {
const [state, dispatch] = useReducer(reducer,{value:0});

return(<div>
<p>
현재 카운터 값은 <b>{state.value}</b>입니다.
</p>
<button className={"rounded p-4 m-2 text-xl w-32 text-white bg-blue-500"}
onClick={()=>dispatch({type:'INCREMENT'})}>(+1 증가)</button>
<button className={"rounded p-4 m-2 text-xl w-32 text-white bg-blue-500"}
onClick={()=>dispatch({type:'DECREMENT'})}>(-1 감소)</button>
</div>)
}


export default Counter;

 

결과는 아래와 같다.

실행결과 이미지

 CSS는 tailwind라는 라이브러리인데.

설치 및 적용 방법은

리액트 프로젝트 내 터미널에서

 

npm install -D tailwindcss 실행

그 후, npx tailwindcss init 터미널 입력 및 실행

프로젝트 내에 tailwind.config.js 파일이 생성된다. Content 항목에  "./src/**/*. {js, jsx, ts, tsx}"를 적어주고 저장

/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{js,jsx,ts,tsx}"],
theme: {
extend: {},
},
plugins: [],
};

 

그다음 프로젝트 내 index.css안의 내용을 다 지우고 아래 내용으로 대체한다.

@tailwind base;
@tailwind components;
@tailwind utilities;