React 레퍼런스에서 생각하기

Thinking in React은 일반적인 React App의 개발 프로세스에 대해 설명하는 공식 React Doc의 기사입니다.

React is, in our opinion, the premier way to build big, fast Web apps with JavaScript. It has scaled very well for us at Facebook and Instagram.

프로세스를 설명하기 위해 간단한 React 앱을 만들 것입니다.

아래 데모:
React App 개발 단계를 상기시켜주는 React App...

0단계: 모의로 시작

가장 먼저 해야 할 일은 앱이 어떻게 보일지에 대한 일종의 정신적 그림을 갖는 것입니다. 바람직하게는 UI의 스케치/모의가 있습니다.

이것이 내가 생각해 낸 것입니다.


둘째, API/데이터 소스의 데이터가 어떤 모습일지 상상해 보십시오. React App 개발과 관련된 단계가 이미 있고 다음 형식으로 되어 있다고 가정합니다.

const data = [
  {
    heading: "Start With A Mock",
    content: "Any input from user. Front-end in its plain form",
  },
  {
    heading: "Break The UI Into A Component Hierarchy",
    content:
      "Draw Boxes.Identify components(Single Responsibility Principle)
.Arrange into hierarchy",
  },
  {
    heading: "Build A Static Version",
    content:
      "Don't use state at all, only use Props.Reuse components.
Top down/Bottom up to you.Pass your data model to 
the top of the hierarchy",
  },
  {
    heading: "Identify The Minimal Representation of UI State",
    content:
      "Keep only the absolute minimal and compute 
everything else on-demand.Is it passed in from a parent via props?
If so, it probably isn't state.
Does it remain unchanged over time? If so, it probably isn’t state.
Can you compute it based on any other state or props in your component? 
If so, it isn’t state",
  },
  {
    heading: "Identify Where Your State Should Live",
    content:
      "Identify every component that renders something 
based on that state.
Find a common owner component(above all other components).
Create a wrapper component above components if necessary",
  },
  {
    heading: "Add Inverse Data Flow",
    content:
      "Pass state changing callbacks from state owner 
to relevant child component",
  },
];

1단계: UI를 구성 요소 계층 구조로 나누기

UI에서 구성 요소를 식별하는 것으로 시작했습니다.

ReferenceTable: 컨테이너

StepNumberBar: 현재 단계 번호 반영

설명: 현재 단계 세부 정보를 표시합니다

.

KeyList: 글머리 기호 목록을 표시합니다

.

NavigationRow: 탐색 버튼을 포함합니다

.

MoveStepButton: 버튼을 표시합니다

.

모의에서 구성 요소를 식별했으므로 이제 구성 요소를 계층 구조로 배열했습니다.

참조표

스텝넘버바

설명

키리스트

탐색 행

MoveStep버튼

2단계: React에서 정적 버전 빌드

이제 위에서 아래로 구성 요소를 구축하기 시작했습니다. 이 프로세스는 많은 디버깅 및 좌절이었습니다. 샘플 데이터로 작업하면 도움이 됩니다. 또한 CSS로 구성 요소를 다듬기 시작하기 전에 뼈대를 꺼내는 데 집중하세요. 그러나 앱이 모양을 갖추기 시작할 수 있도록 가운데 맞춤/정렬 CSS 중 일부를 추가하세요. 이 단계에서는 상태 관리가 전혀 없습니다.

다음과 같은 기본 기능 구성 요소 중 일부는 다음과 같습니다.

function StepNumberBar({ total, current }) {
  return (
    <div className="stepNumberBar">
      {Array(total)
        .fill(null)
        .map((value, index) => (
          <span
            id={index}
            key={index}
            className={current === index ? "active" : "inactive"}
          >
            {index}
          </span>
        ))}
    </div>
  );
}

function KeyList({ content }) {
  var itemsArr = content.split(".");
  return (
    <ul>
      {itemsArr.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

function Explanation({ heading, content }) {
  return (
    <div className="explanation">
      <h2>{heading}</h2>
      <KeyList content={content} />
    </div>
  );
}
function NavigationRow() {
  return (
    <div className="buttons">
      <MoveStepButton direction="prev" />
      <MoveStepButton direction="next" />
    </div>
  );
}

function MoveStepButton({ direction }) {
  return direction === "prev" ? (
    <button>
      PREV
    </button>
  ) : (
    <button>
      NEXT
    </button>
  );
}

function ReferenceTable({ detail }) {
  return (
    <>
      <StepNumberBar total={detail.length} current={currPage} />
      <Explanation
        heading={detail[currPage].heading}
        content={detail[currPage].content}
      />
      <NavigationRow />
    </>
  );
}

3단계: UI 상태의 최소(그러나 완전한) 표현 식별

이제 관련 데이터를 모두 생각해 보면 다음과 같은 결과가 나타납니다.

단계 번호

스텝 디테일

각 데이터 조각에 대해 세 가지 질문을 살펴봅니다.

사용자가 한 단계에서 다른 단계로 이동할 때 단계 번호가 변경됩니다. 그러므로 그것은 아마도 상태일 것이다.

단계 세부 정보는 소품으로 전달되고 시간이 지나도 변경되지 않으므로 상태가 아닐 수 있습니다.

나는 useState 후크로 조작한 단 하나의 상태로 끝났습니다.

  const [currPage, updatePage] = useState(0);

4단계: 주에서 거주해야 하는 위치 확인

단계 번호가 StepNumberBar에 표시되어야 하고 NavigationRow의 버튼에 의해 업데이트되어야 한다는 점을 감안할 때 상태는 상위 구성 요소인 ReferenceTable에 있어야 합니다.

5단계: 역 데이터 흐름 추가

구성 요소는 자신의 상태만 업데이트해야 하므로 상태가 업데이트되어야 할 때마다 실행되는 Update 함수를 ReferenceTable에서 MoveStepButton으로 전달했습니다. onClick 이벤트를 사용하여 상태를 업데이트했습니다. 또한 탐색할 수 있는 몇 가지 멋진 CSS 효과를 추가했습니다.

부분 코드는 다음과 같습니다.

function ReferenceTable({ detail }) {
  const [currPage, updatePage] = useState(0);
  return (
    <>
      <StepNumberBar total={detail.length} current={currPage} />
      <Explanation
        heading={detail[currPage].heading}
        content={detail[currPage].content}
      />
      <NavigationRow updatePage={updatePage} />
    </>
  );
}
function NavigationRow({ updatePage }) {
  return (
    <div className="buttons">
      <MoveStepButton updatePage={updatePage} direction="prev" />
      <MoveStepButton updatePage={updatePage} direction="next" />
    </div>
  );
}

function MoveStepButton({ updatePage, direction }) {
  return direction === "prev" ? (
    <button onClick={() => updatePage((curr) => (curr === 0 ? 5 : curr - 1))}>
      PREV
    </button>
  ) : (
    <button onClick={() => updatePage((curr) => (curr === 5 ? 0 : curr + 1))}>
      NEXT
    </button>
  );
}

완료

언제나처럼 더 많은 CSS + Polishing. 전체 코드는 다음 리포지토리에서 찾을 수 있습니다.

틀리다 / 사고 반응

https://tlylt.github.io/thinking-in-react/에서 확인하세요.

읽어주셔서 감사하고 좋은 하루 되세요.