3. Zustand & 코드 리팩토링

 

결과 화면

 

 

기존의 코드는 이쪽: https://minjh1126.tistory.com/41

1. React 기본 설정 & State 이해하기

( 기존 코드는 노마드 코더의 react 강의를 참고했습니다.)

 

 

 캡스톤 준비 때문에 한창 바쁜 와중입니다. 순수 React만 써봤는데, 그 때는 작은 프로젝트이다 보니 괜찮았지만 캡스톤 같이 큰 프로젝트에서는 상태 관리가 어려울 거라고 친구가 알려주더라고요. 그래서 이 라이브러리를 사용하기로 했습니다. 친구는 이미 많은 사용해본 것 같지만 저는 이번에 처음 들어본 거라 조금 읽어보고 사용해봤는데... 생각보다 나쁘지 않은 것 같습니다. 찍먹해본 입장에서는 상태를 한 파일에 몰아넣고 필요한 걸 불러서 쓸 수 있다는 게 가장 큰 메리트 같아요. 자동으로 상태를 어떻게 해준다느니는 아직 잘 모르겠네요.

 

 

1. Zustand?

 

 zustand라는 단어가 독일어로 상태라는 뜻을 갖고 있습니다. 그래서 단순하게 상태를 관리해주는 라이브러리입니다. 제가 느낀 장점은 위해서 말한대로 자주 쓰일 법한 상태를 한 파일에서 관리할 수 있다는 점입니다. 이것만으로도 충분한 장점이 될 수 있으리라 생각하지만, 그 이상으로 기능이 많습니다. 또 다른 장점으로는 상태를 선언할 때 set 함수도 함께 선언할 수 있다? 그리고 조금 더 가독성이 좋은 느낌이다? 이건 조금 불확실하지만 일단 설명해보겠습니다.

 

 설치하는 방법은 터미널의 powershell에서

npm i zustand

 

 를 적어주시면 알아서 다운로드 됩니다. 다운로드가 완료되었다면 package.json 파일에 알아서 입력이 되어있을 거예요.

 

 문법 구조를 적어보자면 

 

store.js

import { create } from 'zustand';

const useStore = create(set => ({
    상태: 초기값
    set상태: () => set(() => ({상태: 변환식})
}))

export default useStore;

 

app.js

import useStore from './state';

function App() {
  const { 상태, set상태 } = useStore((state) => state);
  }

 

 

 이런 방식으로 사용됩니다. 우선 zustand에서는 useState로 상태를 선언하던 방법은 create를 사용합니다. set을 사용해 상태를 변경해줍니다. 그리고 app.js에서 상태 파일을 가져와준 후, 파일에서 사용하는 상태와 함수를 선언해줌으로서 사용해줍니다. 생각보다 간단하죠? 

 하지만 역시 주의해야 할 곳이 있는데, 알아채셨나요? 바로 zustand에서는 소괄호 안에 중괄호를 넣어서 ({ 식 }) 형태로 사용합니다. 저도 계속 헷갈려서 중괄호만 썼다가 작동이 안 되고 그랬습니다. 꼭 기억해주세요!

 

 

2. 코드 리팩토링하기

app.js

import useStore from './state';	// state을 저장한 파일 가져오기

function App() {
  const { cnt, setCnt, setZero } = useStore((state) => state);	// 가져온 상태, 함수 선언

  return (
    <div>
      <h3> Clicked {cnt} times</h3>	// 누른 횟수 표시
      <button onClick={setCnt}> Click for + 1 </button>	// 누르면 + 1
      <button onClick={setZero}> Click for 0</button>	// 누르면 0으로 초기화
    </div>
  );
}

export default App;

 

state.js

import { create } from 'zustand';	// zustand 가져오기

const useStore = create(set => ({
    cnt: 0,	// 횟수 초기값 설정
    setCnt: () => set(state => ({ cnt: state.cnt + 1})),	// +1 값으로 설정
    setZero: () => set({cnt: 0})	// 다시 0으로 설정
}))

export default useStore;	// 내보내기

 

 이런 방식으로 사용해 지난번 코드를 리팩토링 했습니다. 차이점이라고는 0으로 값을 설정할 수 있는 버튼을 만들었다는 점이네요. 이렇게 간단한데도 생각보다 시간이 걸려서 작업했습니다. 바로 매개변수를 어디에 넣어야 하는지 모르겠더라고요. 값을 0으로 초기화하는 것이야 그냥 값을 적어주면 되니 그렇다고 치는데, 값을 +1 해야하는 것처럼 기존 값이 필요할 때는 어디다가 넣어줘야 하지? 심지어 매개변수를 받을 수 있는 곳이 두 곳인데? 싶었지만 어찌어찌 잘 해결했습니다. 바로 안쪽에 있는 괄호에 매개변수를 넣고 사용해주면 됩니다. 

 

 

 이렇게 해서 기존에 짰던 코드를 리팩토링 해봤습니다. 코드 라인 수는 조금 늘었지만, 생각보다 간단하게 작업한 것 같아요. 아무래도 간단한 기능만 사용해서 그런 거겠지만... 그리고 리팩토링은 이번 기회에 처음 해봤는데, 역시 처음부터 새로 하는 것보다 훨씬 간편해서 좋았습니다. 아무래도 제가 짠 코드라서 그렇겠지만요. 여하튼 같은 기능을 새로운 방식으로 만든다는 게 정말 새로운 경험이었습니다.