React(96) useContext 로 상태값 관리하기

예전에도 useContext 에 대한 개념을 다룬 적이 있지만 이번에는 실무에 직접 적용해본 경험을 정리해보려고 한다.
예전에 공부할 때는 개념적으로만 알다가 막상 사용해보니 너무x10 편리하고 좋았다.
 
useContext 를 사용하는 이유는 redux 를 사용하는 이유와 같다 → 전역적인 상태값(state) 관리를 위해서이다.
 
여러 컴포넌트를 거치며 props의 drilled down 지옥을 맞본 새발자는 redux를 사용하자니 store 가 비대해질 것 같아 고민이었다.
또한 전역적이라기에는 특정 캠페인 페이지 내에서만 사용이 되는 상태 값이기 때문에 효율적이지 않다는 생각이 들었다.
그래서 useContext 를 사용하기로 결심했다.
 
사이트 내 전역적으로 사용되는 data 의 경우는 redux 를 사용하는 것이 좋고,
특정 여러 컴포넌트에서만 산발적으로 쓰이는 경우는 useContext  로 관리하는 편이 좋을 것 같았다.
하지만 state 값이 변경되면 useContext 를 사용하는 모든 컴포넌트에서 리렌더가 일어나기 때문에 이점은 주의해야 한다.
(새발자의 경우, 변경된 값으로 api 가 호출이 되는 로직이였기 때문에 stale 된 상태가 아니라 더 좋았다)
 
 
 
예전에 공부했던 useContext 의 기록 ↓↓↓

React(28) 리액트 훅 useContext 란

 

---

 

React(96) useContext 로 상태값 관리하기

 
 
UserContext.ts

export interface UserContextType { // 일단 타입선언
  userID: string;
  setUserID: Dispatch<SetStateAction<string>>;
}

export const UserContext = createContext<UserContextType>({
  userID: ‘’,  // 초기값 선언
  setUserID: () => {},
});

 
 
UserList.tsx / UserDetail.tsx

// UserList.tsx (부모)
const UserList = () => {
    const [userID, setUserID] = useState<number | null>(null); // useState 선언해주고
	
    return (
    	<UserContext.Privider value={{ userID, setUserID }}> // value 로 넣어주자
          <UserDetail />
        </UserContext.Provider>
    )
}

// UserDetail (자식)
const UserDetail = () => {

    return (
    	<h1>유저 상세 정보</h1>
       	<UserButton /> // → 손자 요녀석에서 userID 값이 필요하다
    )
}

 
 
UserButton.tsx

export {UserContext} from './UserContext' // 임포트 해오기

const UserButton = () => {
    const userContext = useContext(UserContext); // useContext 소환

    function getUserID (id: number) {
        userContext.setUserID(id);
    }

    return (
	<div>
            <button onClick={() => getUserID(0)}>
                유저 아이디 확인
            </button> 
            <div>유저 아이디 : {userContext.userID} </div> // 저장된 값이 나온다
        </div>
    )
}

export default UserButton;