useSelector

useSelector란?

useSelector는 리액트의 리덕스 스토어 관련 Hooks중 하나이다. 이 Hook은 스토어의 상태값을 반환해주는 역할을 한다. useSelector를 사용한 함수에서 리덕스 스토어의 상태값이 바뀐 경우 바뀐 스토어의 상태값을 다시 가져와 컴포넌트를 렌더링 시킨다.

useSelector 사용법

	npm install react-redux // 설치
    import {useSelector} from "react-redux"; 정의 

useSelector 형식

	const isDark = useSelector((state) => state.theme.isDarkMode); 
     <div className={!isDark ? "App" : "darkbox"}>
      <Main />
    </div>

useSelector에 매개변수에 state => state.모듈명 형식으로 상태값을 반환할 수 있다.

const dispatch = useDispatch();
 <div onClick={() => {
            dispatch(toggleTheme());
        }}>'
  </div>

여기서 useDispatch()를 사용하여 스토어의 상태를 변경시키기 위한 액션을 호출할 수 있다. 위에서는 toggleTheme()이라는 액션을 호출하였고 스토어의 값이 변경이 되었고

 toggleTheme :(state,action) =>{
            state.isDarkMode = !state.isDarkMode;
            state.themeMode = state.themeMode ==="light" ? "dark" :"light";
        }

isDarkMode가 !state.isDarkMode로 변경되어서 아래 코드에서 isDark가 false값으로 변하며 아래 div의 ClassName이 "darkbox"로 변하게되어 dark모드가 실행된다!

	const isDark = useSelector((state) => state.theme.isDarkMode); 
     <div className={!isDark ? "App" : "darkbox"}>
      <Main />
    </div>

useDispatch + useSelector를 활용한 리덕스 스토어의 장점

리덕스 스토어에 상태값을 관리하기 위해 값을 저장하고 useSelector를 통해 필요한 상태값을 반환하여 적절한 컴포넌트에 사용하여 불필요한 렌더링을 최소화 할 수 있으며, props를 사용할 때의, 복잡함을 단번에 해결할 수 있다.