[React] Custom Hook 으로 전역 State 관리

뭔가의 리스트에서 클릭 한 아이템의 정보를 다른 컴포넌트에 뿌려주고 싶었다.

 

기존의 방식은 단순하지만 아주 무식하게 짰었는데

 

(뿌려줄 컴포넌트) <- (라우터)state -> (컴포넌트)props.setState-> (컴포넌트)props.setState-> (컴포넌트)props.setState(item 선택 컴포넌트)

 

이와 같이 아주 무식하게 props로 하나하나 넘겨줬다. React를 쓰다보면 여러 컴포넌트에서 한 데이터를 공유하고싶은 상황이 아주 많이 존재하는데 문득 저렇게 구현을 하고 오늘 코드를 혼자 리뷰해보니 리액트답게 짠 코드지만 너무 마음에 들지 않았다. 그렇다고 useContext를 사용하기는 싫었고, 훅을 새로 만들어 setter함수를 구현해 store 기능을 하는 훅을 만들어 보기로 했다.

 

import { useState } from 'react'

export const store = {
	state: {},
	setState (value) {
		this.state = value
		this.setters.forEach(setter => setter(this.state))
	},
	setters: []
}

store.setState = store.setState.bind(store)

export function useStore () {
	const [state, set] = useState(store.state)
	if (!store.setters.includes(set)) {
		store.setters.push(set)
	}

	return [state, store.setState]
}

해외 사이트를 참고하여 훅을 생성하였다. 

 

요점부터 설명하자면 return 값이 getter과 setter 두개로 나눠져 있다.

const [selectedData, setSelectedData] = useStore()
 //...

const Component = () => {
//...
  return (
  //...
    <li onClick={()=> {
      setSelectedData(item)
      }
     } />
     //...
  )
}

setter를 사용하는 부분

 

const [selectedData] = useStore()
const { state } = selectedData
    
const Component = () => {
      if (state === '1') {
              return <span>1.</span>
          } else if (state === '2') {
              return <span>2.</span>
          }
}
    

getter를 사용한 부분