컨텍스트, Redux 또는 구성?

이 게시물은 원래 2023년 2월 23일 @ 내 블로그 페이지에 게시되었습니다

저는 최근 기술 회사의 해고로 인해 영향을 받은 개발자 중 한 명이었습니다. 그래서 프론트엔드 포지션에 대한 인터뷰를 React로 시작하게 되었습니다.

한 회사에서 반응으로 고전적인 소품 드릴링 문제를 받았습니다.
그리고 그것을 해결해 달라는 요청을 받았습니다. 일을 단순하게 유지하기 위해 주어진 문제는 다음과 같습니다
이:

export default function App() {
  const [user, setUser] = React.useState(null);

  const handleLogin = () => setUser(userDetails);

  return (
    <div className="App">
      Company Logo
      <div>
        {user ? (
          <Dashboard user={user} />
        ) : (
          <button onClick={handleLogin}>Login</button>
        )}
      </div>
    </div>
  );
}

function Dashboard({ user }) {
  return (
    <div>
      <DashboardNav user={user} />
    </div>
  );
}

function DashboardNav({ user }) {
  return (
    <div>
      <WelcomeUser user={user} />
      <UserRole user={user} />
    </div>
  );
}

function WelcomeUser({ user }) {
  return <div>Welcome {user.name}</div>;
}

function UserRole({ user }) {
  return <div>Role {user.role}</div>;
}

보시다시피 우리는 App 구성 요소의 사용자 속성을
하위 구성 요소 WelcomeUser 및 UserRole. 중간 구성요소인 Dashboard와 DashboardNav는 props만 전달하고 실제로는 사용하지 않습니다.

이것은 반응의 고전적인 소품 드릴링 문제입니다.

흥미롭게도 면접관은 React Context API로 문제를 해결해 달라고 요청했습니다
또는 Redux를 사용하세요.

React 컨텍스트로 해결

컨텍스트 API를 사용하여 이 문제를 해결하면 아래 코드와 같습니다.

const UserContext = React.createContext(undefined);

export default function App() {
  const [user, setUser] = React.useState(null);

  const handleLogin = () => setUser(userDetails);

  return (
    <div className="App">
      Company Logo: Context
      <div>
        {user ? (
          <UserContext.Provider value={user}>
            <Dashboard />
          </UserContext.Provider>
        ) : (
          <button onClick={handleLogin}>Login</button>
        )}
      </div>
    </div>
  );
}

function Dashboard() {
  return (
    <div>
      <DashboardNav />
    </div>
  );
}

function DashboardNav() {
  return (
    <div>
      <WelcomeUser />
      <UserRole />
    </div>
  );
}

function WelcomeUser() {
  const user = React.useContext(UserContext);
  return <div>Welcome {user.name}</div>;
}

function UserRole() {
  const user = React.useContext(UserContext);
  return <div>Role {user.role}</div>;
}

우리는 UserContext를 생성하고 대시보드를 Provider로 래핑하여
원하는 props를 깊게 중첩된 하위 구성 요소에 전달할 수 있습니다. 이 솔루션
작동합니다.

Redux로 해결하기

따라서 클래식 redux 경로를 진행하려면 유사한
사용자를 포함하는 단일 글로벌 저장소로 모든 것을 구조화하고 포장합니다
물체.

우리가
에 redux를 사용하고 있으므로 솔루션 코드에는 수많은 상용구가 포함됩니다. 간단한 문제를 해결합니다.

아래 코드의 요지를 알려드렸을 뿐이지만, 전체 내용을 살펴보고 싶으시다면
코드, 여기 있습니다: redux로 해결하세요.

export default function App() {
  return (
    <Provider store={store}>
      <ReduxConnectedApp />
    </Provider>
  );
}

function ReduxApp({ user, setUser }) {
  const handleLogin = () => setUser(userDetails);

  return (
    <div className="App">
      Company Logo: Redux
      <div>
        {user ? <Dashboard /> : <button onClick={handleLogin}>Login</button>}
      </div>
    </div>
  );
}


function Dashboard() {
  return (
    <div>
      <DashboardNav />
    </div>
  );
}

function DashboardNav() {
  return (
    <div>
      <ConnectedWelcomeUser />
      <ConnectedUserRole />
    </div>
  );
}

function WelcomeUser({ user }) {
  return <div>Welcome {user.name}</div>;
}

const mapStateToPropsWelcomeUser = (state) => ({ user: state });
const ConnectedWelcomeUser = connect(mapStateToPropsWelcomeUser)(WelcomeUser);

function UserRole({ user }) {
  return <div>Role {user.role}</div>;
}

const mapStateToPropsUserRole = (state) => ({ user: state });
const ConnectedUserRole = connect(mapStateToPropsUserRole)(UserRole);

글로벌 상태에 액세스해야 하는 구성요소를 연결했습니다
redux에 저장됩니다.

내가 어떻게 해결했는지

리액트 구성에 대해 읽고 문제를 만들어서 해결했습니다
어린이 소품을 활용한 모습은 이렇습니다

export default function AppSolution() {
  const [user, setUser] = React.useState(null);

  const handleLogin = () => setUser(userDetails);

  return (
    <div className="App">
      Company Logo
      <div>
        {user ? (
          <Dashboard>
            <DashboardNav>
              <WelcomeUser user={user} />
              <UserRole user={user} />
            </DashboardNav>
          </Dashboard>
        ) : (
          <button onClick={handleLogin}>Login</button>
        )}
      </div>
    </div>
  );
}

function Dashboard({ children }) {
  return <div>{children}</div>;
}

function DashboardNav({ children }) {
  return <div>{children}</div>;
}

function WelcomeUser({ user }) {
  return <div>Welcome {user.name}</div>;
}

function UserRole({ user }) {
  return <div>Role {user.role}</div>;
}

생각해보면 도입하지 않고도 이 문제를 쉽게 해결할 수 있는 방법이 바로 이 방법입니다
createContext 또는 React-redux와 같은 복잡성. 다음과 같은 혜택도 누리실 수 있습니다

• 앞으로 대시보드 내부에 어떤 상태를 도입하고 조작하면 DashboardNav는 다시 렌더링되지 않습니다.
• 소품필요한 구성품만 공급하여 가시성이 좋습니다. 구성 요소(파일) 간을 탐색할 필요 없이 사용자의 모든 소비자를 찾아보세요.

이 패턴은 새로운 것이 아니며 이미 React 커뮤니티에서 논의된 바 있습니다. 그러한 좋은 연습 중 하나는 "Prop 드릴링"을 피하기 위해 React에서 컴포지션을 사용하는 것입니다

결론

그런데 면접관님께 피드백을 받았더니 이렇게 됐네요

인터뷰 대상자가 문제를 정확하게 이해하지 못했고, 원하는 해결책을 제시하지 못했습니다.

이유는 면접관이 이런 패턴을 인지하지 못했거나 제가 요청하지 않은 방식으로 문제를 해결하기로 했기 때문인 것 같습니다.

그런데 이제 더 많은 독자에게 다가가기를 바라면서 React의 흥미로운 패턴에 대해 더 많이 작성하고 싶은 의욕이 생겼습니다.

이 기사를 공유하여 여러분의 생각을 알려주세요.

---

참고자료

• 코드샌드박스 솔루션
• 컨텍스트를 사용하기 전에 - React Docs
• "Prop 드릴링"을 피하기 위해 React에서 컴포지션 사용
• 블로그 답변: React 렌더링 동작에 대한 (대부분) 완전한 가이드
• 블로그 답변: React Context가 "상태 관리" 도구가 아닌 이유(그리고 Redux를 대체하지 않는 이유)

위 내용은 컨텍스트, Redux 또는 구성?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!