ReactJS 상태 관리: 초보자의 시각

나는 내가 React에서 처음state를 만났던 것을 분명히 기억한다. 그것은 상당히 혼란스러웠다.그렇다면, 만약 내가 한 구성 요소에 맛있는 샌드위치 목록이 있다면, 나는 다른 구성 요소에 이 정보 목록을 가지고 있을 수 없다는 말인가?
내 얼굴에 웃음과 웃음소리가 드러났다.물론입니다. 이 정보를 도구로 전달하기만 하면 됩니다.나는 예전보다 더 곤혹스러워서 도구를 이해하기 위해 최선을 다했다.나의 첫 인상은 무엇입니까?이것은 vanilla JS로 DOM에서 뭔가를 얻는 것보다 더 편리합니까?
내가 계속 건설함에 따라 일은 더욱 의미가 있게 변하기 시작했다.

React 응용 프로그램은 상태를 저장할 수 있습니다. 이것은 정보 블록

입니다.

기타 구성 요소는 아이템으로 이 상태에 접근할 수 있음

부모 모듈은 서브 모듈

로부터 아이템을 받을 수 없습니다.
나는 교과서에서 React에 관한 몇 가지 규칙을 이해하지만, 내가 자신의 기초를 세우기 시작할 때, 나는 항상 비슷한 문제에 부딪힌다.

잠깐만, 이 조립품은 필요한 도구를 받을 수 없어.

이 주는 ThisComponent.js에 통제되어야 합니까, 아니면ThatComponent.js?

바닐라 JS로 돌아가도 될까요?

적어도 리액트는 아무런 동력이 없는 것 같다고 할 수 있다.이런 곤혹은 내가 최초의 몇 개의 초보자 응용 프로그램을 장악할 때까지 한동안 지속되었다.그러나 이 문제는 여전히 수면 위로 떠오를 것이다.
나는 어디에서 나의 상태를 유지해야 합니까?
나는 나의 초보자 경험에서 무엇이 내가 반응 상태를 이해하는 데 도움을 주었는지 설명하고 그것을 어디에 저장할 것인지에 대한 논리적 결정을 내렸다고 생각한다.이것은 고급 상태 관리 시스템을 포함하지 않고 React의 구성 요소에 상태를 간단하게 저장합니다.지금시작합시다!

어떤 구성 요소가 상태를 필요로 하는지 고려하다
대부분의 예시에서, 간단하게 보기 위해서, 나는 업무 목록 크기와 유사한 소형 응용 프로그램을 고려할 것이다.세 개 또는 네 개의 서브어셈블리가 있을 수 있습니다.이런 상황에서 대다수 주를 App.js 내에서 통제하는 것은 아무런 해가 없다.
이것은 보통 응용 프로그램의 핵심으로 다른 구성 요소의 대부분 루트에 저장되고 일부 주요 구성 요소를 나타내기 때문에 상태를 여기에 저장하는 것은 의미가 있다.
하위 구성 요소가 부모 구성 요소로 도구를 전달할 수 없다는 것을 감안하면, 하위 구성 요소에 주요하고 중요한 상태를 설정하는 것은 무의미하다.
여기에는 많은 다른 예가 있지만, 우리는 간단함을 유지한다.

function App() {
  const [veryImportantStuff, setVeryImportantStuff] = useState([An array of important stuff!])

    return (
        <div className="this-is-an-example">
            <h1>This is extremely important!</h1>
            <ThisComponent />
            <ThatComponent />
        </div>
    );
  }

이 예에서 우리는 응용 프로그램 홀딩veryImportantStuff이 하나 있다.가설ThisComponent.js과 ThatComponent.js 모두 접근해야 한다.국가를 이곳에서 통제하는 것은 일리가 있다. 그러면 우리는 두 사람에게 도구를 전달할 수 있다.

function App() {
  const [veryImportantStuff, setVeryImportantStuff] = useState([An array of important stuff!])

    return (
        <div className="this-is-an-example">
            <h1>This is extremely important!</h1>
            <ThisComponent theseAreProps={veryImportantStuff} />
            <ThatComponent theseAreProps={veryImportantStuff} />
        </div>
    );
  }

쿨!그런데 ThatComponent나라만 있으면 어떡하지?만약 다른 구성 요소가 모두 그것을 필요로 하지 않는다는 것을 알고 있다면, 그것을 App.js 에 두는 것은 무의미하다.상태가 ThatComponent에 저장된 경우 App와 ThisComponent는 도구를 통해 이 상태에 접근할 수 없습니다. 왜냐하면 도구를 부모 구성 요소에 전달할 수 없기 때문입니다.
이 예에서 App.js는 렌더링ThatComponent 및 ThisComponent의 객체이기 때문에 모 어셈블리입니다.ThisComponent는 ThatComponent의 부모 구성 요소로 간주되지 않지만 ThatComponent의 상태에 접근할 수 없습니다. ThisComponent가 App에 저장되어 있기 때문입니다.
알아요. 좀 곤혹스러워요?이것은 간단한 개념이지만 본 예에서 응용 프로그램의 상부App.js에 상태를 유지하는 것은 의미가 있다.

이 구성 요소에서 너무 멀리 떨어지지 않도록 하세요.
또 다른 까다로운 예는 당신의 상태가 얼마나 깊어야 하는지를 고려하는 것이다.이 대화는 몇 시간 동안 지속될 수 있고 자신의 상태를 어떻게 포지셔닝하고 싶은지그러나 간단하게 보기 위해서, 하위 구성 요소를 제외한 다른 구성 요소는 상태가 필요하지 않다는 것을 고려해 봅시다.
여기에 우리는 App.js 임하주를 보유하고 있지 않다.

function App() {
    return (
        <div className="this-is-an-example">
            <h1>This is extremely important!</h1>
            <ThisComponent />
            <ThatComponent />
        </div>
    );
  }

여기에는 ThatComponent.js 상태를 유지하고 있습니다ThatComponent.js. 현재 서브어셈블리AChildComponent:

  function ThatComponent() {
    const [veryImportantStuff, setVeryImportantStuff] = useState([An array of important stuff!])

      return (
          <div className="hi-dev-community">
              <h1>We are inside a child component of App.js!</h1>
              <AChildComponent veryImportantStuff={veryImportantStuff} />
          </div>
      );
    }

최초의 부모 구성 요소 App.js 에서 응용 프로그램과 ThisComponent 모두 상태가 필요하지 않다고 상상해 봅시다.그래서 우리는 그것을 ThatComponent에 놓았다.현재 ThatComponent에는 아이가 하나 있다AChildComponent.
마찬가지로 이것은 매우 중요한 정보 목록이다.우리의 첫 번째 예와 유사하게 AChildComponent만 접근 상태가 필요하다면 우리는 그것을 거기에 보존할 것이다. 그러나 이 두 구성 요소 모두 상태ThatComponent와 AChildComponent가 필요하다고 가정하자.그래서 우리는 그것을 ThatComponent에 보존할 것이다.
이것이 바로 계획이 작용하는 곳이라는 것을 명심해라.App.js 현재 표준 아이템 전달 방법을 통해 이 상태에 접근할 수 없기 때문에 이 상태의 모든 용례를 고려하여 다른 어느 곳에서도 이 상태가 필요하지 않도록 해야 한다.

때때로 이것은 개인의 취향에 달려 있다
당신은 처음으로 누군가의 집에 가서 그들의 주방에 들어가면 갑자기 이런 문제들이 생각난다...
그들의 은기는 도대체 어디에 있습니까?
모든 사람이 이 질문에 대답할 수 있다. 15-25개의 서랍이 있는데, 어디에 은기를 보관하는 것이 가장 논리에 맞는지 추측해 볼 수 있다.그런데, 9/10번, 네가 틀렸어!
이것은 완전히 개인의 취향이다. 개인이 그들의 은기, 접시, 컵 등을 어떻게 저장하고 싶은지.
등등, 이것은 듣기에'물품 저장','물품 저장'과 유사하다.스토리지 상태(React)
바로 내 뜻이야!때로는 개인의 취향이기도 하다.프로그래밍 중의 많은 상황들은 여러 가지 다른 방식으로 진행할 수 있지만, 여전히 같은 결과를 낼 수 있다.이것이 바로 프로그래밍의 아름다움이다!하지만 남의 주방에서 당혹스러울 때가 있는 이유다.
나는 혼돈 상태라고 불리는 처지를 몇 번 좋아했다.너는 무엇이 혼돈 상태인지 생각할 수 있다.이렇게 물어봐서 반갑습니다!
요컨대, 혼란 상태는 주방 서랍을 열고 은기를 넣으면 연필, 만년필, 테이프를 발견할 수 있다는 것이다.그리고 다음 머릿속에서 가장 논리적인 서랍을 검사해 보세요. 놀랍게도 개과자와 벨트가 가득 들어있어요!
네가 은기의 위치를 찾았을 때, 그것은 비밀의 구석에 숨어 있다. 네가 그것을 가장 필요로 할 때, 어떤 편리한 포크나 숟가락도 찾을 수 없다.
그들이 도대체 왜 은기를 거기에 두었는지 궁금하다.
리액트에서 컨디션을 유지하는 것도 마찬가지!많은 경우에 나는 응용 프로그램의 내부를 보았는데, 나의 머리는 상태 관리에 대해 곤혹스러웠다. 왜냐하면 그것은 중용성이 부족하기 때문이다.하지만 구성 요소 트리에서 한 단계 더 높으면 나에게 더 의미가 있다!
나의 관점은 개인의 선호이다.사람마다 다른 방식으로 이런 상황을 해결할 수 있다. 이것이 바로 당신의 일이다. 이런 이상한 상황을 이해하고 적응하는 것이다.

너는 나쁜 결정을 내릴 거야!
마지막으로 내가 말하고자 하는 것은, 너의 계획은 매우 엉망이 될 것이다. 너의 주를 어리석은 곳에 두어라.
우리는 모두 이런 느낌을 알고 있다. 너는 새 집에서 첫 저녁을 먹고, 너는 책상 옆에 앉아서 은기를 가져오는 것을 잊었다!너는 일어서서 칼과 포크를 몇 개 들고 책상 위에 놓았는데, 너는 즉시 생각했다. 내가 왜 이 서랍을 선택해서 나의 모든 은기를 보관해야 합니까?이것은 이치에 맞지 않는다!
우리는 응용 프로그램에서 모두 이런 상황을 만날 수 있다.
내가 왜 주를 여기에 두어야 합니까?
이런 느낌의 최고는 당신의 비판적 사고가 뇌 근육이 구부러지고 있다는 것을 보여주는 것이다!응용 프로그램의 현재 설정 효율을 높이는 방법을 보았습니다. 수정할 수 있습니다.
그러나 어떤 계획도 이 점을 상쇄할 수 없다.계획은 프로젝트에 있어서 없어서는 안 될 것이고 매우 중요하지만, 당신이 계획하지 않은 일들이 생길 수 있다.반드시 조정해야 한다. 이것은 즐거움의 일부분이다!
예를 들어 만약에 당신의 은기 소장품이 지수급으로 증가하고 당신의 서랍이 더 이상 충분하지 않아 당신의 모든 은기/식기를 수용할 수 없다면 어떻게 해야 합니까!
프로그래밍에 있어서 만약 당신의 상태가 이렇게 커진다면, 직접 그것을 구성 요소에 저장하는 것은 매우 불편합니다. 어떻게 합니까?!
(이것이 바로 당신이 낡은 신뢰할 수 있는 상태 관리 시스템을 깨뜨릴 때입니다. 예를 들어Context나Redux!:D)
됐어, 주방 참고 자료는 충분해!다 끝났어!

그것을 싸라
제가 먼저 한마디 하겠습니다. 이것은 매우 기본적이고 초보자의 개념입니다. React의 상태와 관련이 있을 때.그러나, 나는 내가 처음으로 React를 만났을 때, 나는 매우 막연했고, 많은 친구들도 그것을 처음 보았지만, 그들은 React가 왜 쓸모가 있는지 이해하지 못했다.
나는 React에서 매우 기본적인 상태를 설명하고 싶다.나는 선진적인 국가 관리 방법을 도입하고 싶지 않다. 왜냐하면 국가와 도구를 둘러싼 것은 이미 충분하게 어렵기 때문이다.다른 정보를 포함하는 것은 나의 입문급 소개를 더욱 혼란스럽게 할 뿐이다!
나는 React에 수백만 가지 다른 상태 관리 방법이 있다는 것을 확신한다. 이것은 단지 예와 유형일 뿐, 내가 처음부터 그것에 대해 이해하도록 도와줄 뿐이다.누군가가 그 가치를 발견할 수 있기를 바랍니다!:)
나는 네가 처음으로 ReactJS를 체험했다는 것을 듣고 정말 기뻤다.무엇이 당신이 국가와 도구 주위를 맴도는 것을 도와줍니까?어떤 유비나 상황이 너로 하여금 진정으로 이해하게 할 수 있니?나한테 알려줘!:D