4장 - React의 전역 context를 사용하는 일은 함수형 프로그래밍의 개념과 상반되는 게 아닐까?

[jangsumin]

의문이 드는 점

• React에서 사용하는 함수 컴포넌트는 함수의 일종인데, 함수 컴포넌트에 전달하는 인자(props)가 여러 하위 컴포넌트를 건너 뛰어 전달되는 경우 props drilling이라는 문제가 생겨서 전역 context를 활용하는 해결법을 사용하곤 한다. 그렇다면 함수형 프로그래밍을 고수한다면 전역 context을 읽고 쓰는 일은 암묵적 입력과 출력에 해당되므로 사용하면 안되는 패턴인걸까?

4장을 정리하면서 위 의문이 들었습니다. 같이 고민해보면 좋을 것 같습니다!

[haryan248]

의문을 항상 가져주셔서 스터디를 의미있게 해주시는게 정말 좋은 것 같아요.

아까 말로만 짧게 말씀드렸는데,
전역을 사용한다는 것 자체가 props drilling을 피하기 위해 만들어졌으니까
이를 사용하는 쪽에서는 결국 props drilling으로 받아와서 사용하는 것과 동일하게 쓰는것이라고 생각이 들었습니다.

// context로 받아왔을 때
function MyComponent() {
  // useContext를 사용하여 각 provier 컨텍스트에서 state를 가져온다.
  const { user, setUser } = useContext(UserContext);
  const { theme, setTheme } = useContext(ThemeContext);

  const handleLogin = () => {
    setUser({ name: 'John', age: 30 });
  };

  const handleLogout = () => {
    setUser(null);
  };

  const toggleTheme = () => {
    setTheme(prevTheme => prevTheme === 'light' ? 'dark' : 'light');
  };

  return (
    <div>
      <button onClick={handleLogin}>Login</button>
      <button onClick={handleLogout}>Logout</button>
      <button onClick={toggleTheme}>Toggle theme</button>
      <p>User: {user ? user.name : 'Not logged in'}</p>
      <p>Theme: {theme}</p>
    </div>
  );
}

// props로 받아왔을 때
function MyComponent({ user, setUser, theme, setTheme }) {
  const handleLogin = () => {
    setUser({ name: 'John', age: 30 });
  };

  const handleLogout = () => {
    setUser(null);
  };

  const toggleTheme = () => {
    setTheme(prevTheme => prevTheme === 'light' ? 'dark' : 'light');
  };
  
 
  //...
  생략
}

결국 어디서 가져오냐의 차이만 있을 뿐 사용하는 것 자체는 동일하다고 느껴서
어떻게 setUser나, setTheme 과 같은 액션을 계산으로 더 잘게 쪼개냐의 차이라고 생각했습니다.

참고: https://velog.io/@hoonnn/React-Context-API%EC%99%80-useContext

[jangsumin]

사실, 저도 가벼운 의구심에 시작해서 적어보는 질문들인데 같이 고민해주셔서 제가 오히려 더 도움이 되는 것 같습니다. 감사합니다...!

적어주신 답변을 보고 생각이 드는 건 다음과 같습니다.

• 어차피 함수 컴포넌트는 return문을 가지고 있다 하더라도 fetch 같은 액션을 통해 데이터를 받아오고 그리기 때문에 전체적으로 액션이다.
• 액션에서 최대한 계산과 데이터를 뽑아내기 위해서라면, setUser나 setTheme에 인자로 들어갈 콜백 함수를 최대한 계산으로, 혹은 데이터로 바꾸는 방법이다.
• 결국 상위 컴포넌트로부터 props을 받아야 하는 것과 전역 context로부터 필요한 값(state, setState)을 받는 것은 거의 같다.

이러한 생각에 도달했는데 현준님이 생각하신 것과 동일한가 싶습니다!