useReducer 개선 코드 사용

우리의 제2판Learning React 시리즈 문장의 다음 편은 useReducer에 관한 것이다.Checkbox 어셈블리의 경우이 구성 요소는 간단한 상태를 가진 구성 요소의 완벽한 예입니다.확인란이 선택되었거나 선택되지 않았습니다.checked는 상태값이고, setChecked는 상태를 바꾸는 함수이다.어셈블리가 처음 렌더링될 때checked 값은 false입니다.

function Checkbox() {
  const [checked, setChecked] = useState(false);

  return (
    <>
      <input
        type="checkbox"
        value={checked}
        onChange={() => setChecked(checked => !checked)}
      />
      {checked ? "checked" : "not checked"}
    </>
  );
}

이 기능은 효과가 있지만 한 가지 측면에서 경고가 발생할 수 있습니다.

onChange={() => setChecked(checked => !checked)}

자세히 보다.언뜻 보기에는 괜찮은데, 우리가 골치 아프게 하는 거 아니야?현재 값 checked 을 받아들이고 반대 값 !checked 을 되돌려 주는 함수를 보내고 있습니다.이것은 필요한 것보다 더 복잡할 수 있다.개발자는 잘못된 정보를 보내서 전체 과정을 파괴하기 쉽다.이렇게 처리하는 것보다 왜 전환 기능을 제공하지 않습니까?
같은 동작을 수행하는 toggle 함수를 추가합니다. 호출 setChecked 하고 현재 값 checked 과 반대되는 값을 되돌려줍니다.

function Checkbox() {
  const [checked, setChecked] = useState(false);

  function toggle() {
    setChecked(checked => !checked);
  }

  return (
    <>
      <input type="checkbox" value={checked} onChange={toggle} />
      {checked ? "checked" : "not checked"}
    </>
  );
}

이렇게 하는 것이 더 좋다.onChange는 예측 가능한 값으로 설정되었다. 함수toggle.우리는 이 함수가 매번 어느 곳에서든지 무엇을 하는지 안다.checkbox 구성 요소를 사용할 때마다, 우리는 더욱 진일보하여, 더욱 예측 가능한 결과를 낼 수 있다.우리가 setChecked 함수에서 toggle에 보낸 함수를 기억하십니까?

setChecked(checked => !checked);

우리는 지금 다른 이름으로 이 함수 checked => !checked: 감속기를 인용한다.reducer 함수의 가장 간단한 정의는 현재 상태를 받아들이고 새로운 상태로 돌아가는 것입니다.checked가 false라면 반대true로 돌아가야 한다.우리는 논리를 하나의 Reducer 함수로 추상화할 수 있다. 이 함수는 이 행위를 onChange 이벤트로 하드코딩하는 것이 아니라 항상 같은 결과를 낳을 것이다.구성 요소useState가 아닌 useReducer를 사용합니다.

function Checkbox() {
  const [checked, toggle] = useReducer(checked => !checked, false);

  return (
    <>
      <input type="checkbox" value={checked} onChange={toggle} />
      {checked ? "checked" : "not checked"}
    </>
  );
}

useReducer 수신 감속기 기능과 초기 상태false.그리고 우리는 onChange 함수를 toggle로 설정하고 Reducer 함수를 호출할 것이다.
우리 초기의 감속기checked => !checked가 좋은 예였다.함수에 같은 입력을 제공하면 같은 출력을 예상해야 합니다.이 개념은 자바스크립트Array.reduce에서 기원한다.reduce 근본적으로 말하자면 이것은 Reducer가 하는 일과 같다. 함수(모든 값을 하나의 값으로 축소)와 초기 값을 받아들인 다음에 하나의 값을 되돌려준다.Array.reduce 감속기 함수와 초기 값을 받아들인다.numbers 그룹의 모든 값에 대해 값을 되돌릴 때까지 감축기를 호출합니다.

const numbers = [28, 34, 67, 68];

numbers.reduce((number, nextNumber) => number + nextNumber, 0); // 197

Array.reduce에 보낸 Reducer는 두 개의 인자를 받아들인다.여러 매개변수를 Reducer 함수로 보낼 수도 있습니다.

function Numbers() {
  const [number, setNumber] = useReducer(
    (number, newNumber) => number + newNumber,
    0
  );

  return <h1 onClick={() => setNumber(30)}>{number}</h1>;
}

매번 클릭h1할 때마다 우리는 총수에 30을 더한다.

복잡한 상태를 처리하는 데 사용되는 useReduceruseReducer 상태가 복잡해지면 상태 업데이트를 예측 가능하게 처리할 수 있습니다.사용자 데이터가 포함된 객체를 고려하려면 다음과 같이 하십시오.

const firstUser = {
  id: "0391-3233-3201",
  firstName: "Bill",
  lastName: "Wilson",
  city: "Missoula",
  state: "Montana",
  email: "[email protected]",
  admin: false
};

그리고 우리는 User라는 구성 요소가 있는데 firstUser라는 구성 요소가 초기 상태로 설정되어 해당 데이터를 표시합니다.

function User() {
  const [user, setUser] = useState(firstUser);

  return (
    <div>
      <h1>
        {user.firstName} {user.lastName} - {user.admin ? "Admin" : "User"}
      </h1>
      <p>Email: {user.email}</p>
      <p>
        Location: {user.city}, {user.state}
      </p>
      <button>Make Admin</button>
    </div>
  );
}

상태를 관리할 때 자주 발생하는 오류는 덮어쓰기 상태입니다.

<button
  onClick={() => {
    setUser({ admin: true });
  }}
>
  Make Admin
</button>

이렇게 하면 firstUser 의 상태를 덮어쓰고 setUser 함수에 보내는 내용으로 바꿉니다. {admin: true}이렇게 하면 사용자의 현재 값을 분산한 다음 admin 값을 덮어쓰면서 수정할 수 있습니다.

<button
  onClick={() => {
    setUser({ ...user, admin: true });
  }}
>
  Make Admin
</button>

이것은 초기 상태를 사용하고 새 키/값을 입력합니다: {admin: true}.우리는 오류가 발생하기 쉽도록 각각 onClick 에서 이 논리를 다시 써야 한다.내가 내일 응용 프로그램으로 돌아갈 때, 나는 이 일을 하는 것을 잊어버릴 수도 있다.

function User() {
  const [user, setUser] = useReducer(
    (user, newDetails) => ({ ...user, ...newDetails }),
    firstUser
  );
  ...
}

그런 다음 감속기에 새 상태 값newDetails을 보내고 객체를 밀어 넣습니다.

<button
  onClick={() => {
    setUser({ admin: true });
  }}
>
  Make Admin
</button>

이 모드는 상태가 여러 개의 하위 값이나 다음 상태가 이전 상태에 의존할 때 매우 유용합니다.이곳에서 우리는 전파의 힘을 이용하고 있다.모든 사람에게 전파를 가르치면 그들은 하루를 전파할 것이다.모든 사람을 교육자에게 가르치면 그들은 평생 전파될 것이다.