Reacting to Input with State

• declarative vs. imperative programming ~ meaning and example

• deep dive: displaying many visual states at once (storybooks ~ 스토리북이 이건가?)

• step4 잘 이해해보자. 중요한 것은 중복과 모순의 제거

  • deep dive: Eliminating “Impossible” States with Reducer 부분과 마찬가지로,
    • “프로그래머의 실수로 인해 발생할 수 있는 로직 오류가 생기는 것을 사전에 방지할 수 있는” state 구조가 좋은 설계일 것이다. (”do not leave room for mistakes” ~ 다음 내용인 Choosing the State Structure 참고)
    • reducer 부분 학습한 후에 다시 돌아와서 여기 deep dive 예시에서 success state과 non-null error state 동시에 발생하지 않도록 직접 설계할 수 있는지 테스트 해보자.

• step 5: 중심 내용과 별개로 코드에서 promise, resolve, reject 부분 정확히 알고 있지 못하니 볼때마다. 찝찝하다. 시간 들여서 이해해보자.

  • 예시 코드에서 한 컴포넌트 안에 jsx return statement가 두개인 부분. 이렇게 하는 방식도 안써봐서 익숙하지는 않지만 상황에 따라 잘 쓰면 더 깔끔하게 코드 작성할 수 있을 것 같다. status state이 업데이트 되면 컴포넌트가 re-render되면서 아래 if statement가 re-evaluate되며 작동하게 되는 원리.

      if (status === 'success') {
        return <h1>That's right!</h1>
      }
    

• Recap

  • meaning of declarative UI

• Challenge 스킵했으니 리뷰할때 ㄱㄱ

Preserving and Resetting State

• forcing a component to reset its state by passing it a different key
  • 근데 다시 돌아왔을때 사라져 있는건 좀 아쉬운데?

Avoid redundant state

• deep dive:
  • ”Mirroring” props into state only makes sense when you want to ignore all updates for a specific prop. 요부분 이해할 수 있도록.

Avoid deeply nested state

• flattening(normalize)한거 신기하네. 특히 (Root)에 해당하는 0번 object property를 만들어서 하위 행성들을 관리하는 모습. 한 구조 안에 다층적인 구조를 다 구현하는 모습.

• 코드에서

      setPlan({
        ...plan,
        // ...so that it has the updated parent.
        **[parentId]: nextParent**
      });
  

  • [ ] 대괄호로 감싸서 처리하는 부분 기억해두자~ 저렇게 할 수 있구나. 참고로 기존 plan은 아래와 같은 구조로 되어 있는 녀석이다.

    

• deep dive:

  • using Immer and improving memory usage ~ 요부분 신기하네잉.
    • 만약 제거했다가 다시 복구시키는것도 가능하게 하려는 상황이라면 이렇게 하면 안되는 거겠지?

3-3. Sharing State Between Components

Challenge 1

import { useState } from 'react';

export default function SyncedInputs() {
  const [text, setText] = useState('');
  return (
    <>
      <Input label="First input" text={text} setText={setText} />
      <Input label="Second input" text={text} setText={setText} />
    </>
  );
}

function Input({ label, text, setText }) {

  function handleChange(e) {
    setText(e.target.value);
  }

  return (
    <label>
      {label}
      {' '}
      <input
        value={text}
        onChange={handleChange}
      />
    </label>
  );
}

• 나는 이렇게 했는데(setText를 child component(Input) 안에서)

import { useState } from 'react';

export default function SyncedInputs() {
  const [text, setText] = useState('');

  function handleChange(e) {
    setText(e.target.value);
  }

  return (
    <>
      <Input
        label="First input"
        value={text}
        onChange={handleChange}
      />
      <Input
        label="Second input"
        value={text}
        onChange={handleChange}
      />
    </>
  );
}

function Input({ label, value, onChange }) {
  return (
    <label>
      {label}
      {' '}
      <input
        value={value}
        onChange={onChange}
      />
    </label>
  );
}