React 상태 관리 에 관 한 세 가지 규칙 요약

머리말
React 구성 요소 내부 의 상 태 는 렌 더 링 과정 에서 변 하지 않 는 패 키 징 데이터 입 니 다.useState()는 React hook 으로 기능 구성 요소 내부 의 상 태 를 관리 합 니 다.
나 는 useState()를 좋아한다.그것 은 확실히 상태 처 리 를 매우 쉽게 한다.그러나 나 는 자주 비슷 한 문 제 를 만난다.

나 는 구성 요소 의 상 태 를 작은 상태 로 나 누 어야 합 니까?아니면 복합 상 태 를 유지 해 야 합 니까?

상태 관리 가 복잡 해 지면 구성 요소 에서 추출 해 야 합 니까?어떻게 해 야 돼 요?

useState()의 용법 이 이렇게 간단 하 다 면 언제 useReducer()가 필요 합 니까?

본 고 는 상기 문제 에 대답 하고 구성 요소 의 상 태 를 설계 하 는 데 도움 을 줄 수 있 는 세 가지 간단 한 규칙 을 소개 했다.
No.1 관심 사
유효한 상태 관리의 첫 번 째 규칙 은:
상태 변 수 를 하나의 문 제 를 책임 지게 하 다.
상태 변 수 를 하나의 문 제 를 책임 지게 하여 단일 책임 원칙 에 부합 하도록 하 다.
여러 개의 상태 값 을 포함 하 는 복합 상태의 예 시 를 살 펴 보 자.

const [state, setState] = useState({
    on: true,
    count: 0
});

state.on    // => true
state.count // => 0

상 태 는 일반적인 자 바스 크 립 트 대상 으로 구성 되 어 있 으 며,이 대상 은 on 과 count 속성 을 가지 고 있 습 니 다.
첫 번 째 속성 state.on 은 스위치 를 표시 하 는 불 값 을 포함 합 니 다.마찬가지 로'state.count'는 계산 기 를 표시 하 는 숫자 를 포함 합 니 다.예 를 들 어 사용자 가 단 추 를 누 른 횟수 입 니 다.
그리고 계산 기 를 1 로 추가 하 겠 다 고 가정 하 세 요.

// Updating compound state
setUser({
    ...state,
    count: state.count + 1
});

모든 상 태 를 함께 놓 아야 count 만 업데이트 할 수 있 습 니 다.이것 은 계수 기 를 간단하게 추가 하기 위해 호출 된 큰 구조 입 니 다.이것 은 모두 상태 변수 가 두 가지 측면 을 책임 지기 때 문 입 니 다.스위치 와 카운터 입 니 다.
솔 루 션 은 복합 상 태 를 두 개의 원자 상태 on 과 count 로 나 누 는 것 입 니 다.

const [on, setOnOff] = useState(true);
const [count, setCount] = useState(0);

상태 변수 on 은 저장 스위치 상태 만 책임 집 니 다.마찬가지 로 count 변 수 는 계수기 만 담당 합 니 다.
이제 계수 기 를 업데이트 해 보 겠 습 니 다.

setCount(count + 1);
// or using a callback
setCount(count => count + 1);

count 상 태 는 계수 만 담당 하고 추측 하기 쉬 우 며 업데이트 와 읽 기 가 쉽 습 니 다.
여러 개의 useState()를 호출 하여 모든 관심 사 에 상태 변 수 를 만 드 는 것 을 걱정 할 필요 가 없습니다.
그러나 useState()변 수 를 너무 많이 사용 하면 구성 요소 가'단일 직책 원칙'을 위반 할 수 있 습 니 다.이 구성 요 소 를 작은 구성 요소 로 나 누 면 됩 니 다.
No.2 복잡 한 상태 논리 추출
복잡 한 상태 논 리 를 사용자 정의 hook 에 추출 합 니 다.
구성 요소 내 에서 복잡 한 상태 작업 을 유지 하 는 것 이 의미 가 있 습 니까?
답 은 기본 면 에서 나온다.
React hook 을 만 드 는 것 은 구성 요소 와 복잡 한 상태 관리,부작용 을 분리 하기 위 한 것 입 니 다.따라서 구성 요 소 는 렌 더 링 할 요소 와 추가 할 이벤트 탐지 기 에 만 관심 을 가 져 야 하기 때문에 복잡 한 상태 논 리 를 사용자 정의 hook 에 추출 해 야 합 니 다.
제품 목록 을 관리 하 는 구성 요 소 를 고려 합 니 다.사용 자 는 새로운 제품 이름 을 추가 할 수 있 습 니 다.제약 은 제품 이름 이 유일 해 야 합 니 다.
첫 번 째 시 도 는 제품 이름 목록 의 설정 프로그램 을 구성 요소 내부 에 직접 저장 하 는 것 입 니 다.

function ProductsList() {
    const [names, setNames] = useState([]);  
    const [newName, setNewName] = useState('');

    const map = name => <div>{name}</div>;

    const handleChange = event => setNewName(event.target.value);
    const handleAdd = () => {    
        const s = new Set([...names, newName]);    
        setNames([...s]);  };
    return (
        <div className="products">
            {names.map(map)}
            <input type="text" onChange={handleChange} />
            <button onClick={handleAdd}>Add</button>
        </div>
    );
}

names 상태 변 수 는 제품 이름 을 저장 합 니 다.Add 단 추 를 누 르 면 addNewProduct()이벤트 처리 프로그램 을 호출 합 니 다.
addNewProduct()내부 에 서 는 Set 대상 으로 제품 이름 을 유일 하 게 유지 합 니 다.구성 요 소 는 이 디 테 일 에 관심 을 가 져 야 합 니까?필요 없어.
복잡 한 상태 설정 기 논 리 를 사용자 정의 hook 에 격 리 하 는 것 이 좋 습 니 다.시작 해.
새 사용자 정의 갈고리 useUnique()는 모든 항목 을 유일 하 게 유지 할 수 있 습 니 다.

// useUnique.js
export function useUnique(initial) {
    const [items, setItems] = useState(initial);
    const add = newItem => {
        const uniqueItems = [...new Set([...items, newItem])];
        setItems(uniqueItems);
    };
    return [items, add];
};

사용자 정의 상태 관 리 를 hook 에서 추출 하면 Products List 구성 요소 가 더욱 가 벼 워 집 니 다.

import { useUnique } from './useUnique';

function ProductsList() {
  const [names, add] = useUnique([]);  const [newName, setNewName] = useState('');

  const map = name => <div>{name}</div>;

  const handleChange = event => setNewName(e.target.value);
  const handleAdd = () => add(newName);
  return (
    <div className="products">
      {names.map(map)}
      <input type="text" onChange={handleChange} />
      <button onClick={handleAdd}>Add</button>
    </div>
  );
}

const[names,addName]=useUnique([])에서 사용자 정의 hook 을 사용 합 니 다.이 구성 요 소 는 더 이상 복잡 한 상태 관리 에 시 달리 지 않 습 니 다.
목록 에 새 이름 을 추가 하려 면 add('New Product Name')를 호출 하면 됩 니 다.
가장 중요 한 것 은 복잡 한 상태 관 리 를 사용자 정의 hooks 에서 추출 하 는 장점 은:

이 구성 요 소 는 상태 관리 에 대한 상세 한 정 보 를 포함 하지 않 습 니 다

사용자 정의 hook 는

을 중복 사용 할 수 있 습 니 다.

사용자 정의 hook 쉽게 격 리 테스트 가능

No.3 추출 여러 상태 조작
여러 상태 조작 을 간소화 기 에 추출 합 니 다.
ProductsList 의 예 를 계속 사용 하여"delete"작업 을 도입 합 니 다.이 작업 은 목록 에서 제품 이름 을 삭제 합 니 다.
현재,당신 은 두 개의 조작 인 코딩 을 해 야 합 니 다:제품 을 추가 하고 삭제 해 야 합 니 다.이 작업 을 처리 하면 간단 한 기 를 만 들 고 구성 요 소 를 상태 관리 논리 에서 벗 어 날 수 있 습 니 다.
마찬가지 로 이 방법 은 hook 의 사고방식 에 부합된다.구성 요소 에서 복잡 한 상태 관 리 를 추출한다.
다음은 제품 을 추가 하고 삭제 하 는 reducer 의 실현 입 니 다.

function uniqueReducer(state, action) {
    switch (action.type) {
        case 'add':
            return [...new Set([...state, action.name])];
        case 'delete':
            return state.filter(name => name === action.name);
        default:
            throw new Error();
    }
}

그리고 React 의 useReducer()를 호출 할 수 있 습 니 다.  hook 제품 목록 에서 유 니 크 Reducer()사용:

function ProductsList() {
    const [names, dispatch] = useReducer(uniqueReducer, []);
    const [newName, setNewName] = useState('');

    const handleChange = event => setNewName(event.target.value);

    const handleAdd = () => dispatch({ type: 'add', name: newName });
    const map = name => {
        const delete = () => dispatch({ type: 'delete', name });    
        return (
            <div>
                {name}
                <button onClick={delete}>Delete</button>
            </div>
        );
    }

    return (
        <div className="products">
            {names.map(map)}
            <input type="text" onChange={handleChange} />
            <button onClick={handleAdd}>Add</button>
        </div>
    );
}

const[names,dispatch]=useReducer(uniqueReducer,[])에서 uniqueReducer 를 사용 합 니 다.names 는 제품 이름 을 저장 하 는 상태 변수 이 고 dispatch 는 작업 대상 을 사용 하여 호출 하 는 함수 입 니 다.
Add 단 추 를 누 르 면 처리 프로그램 이 dispatch({type:'add',name:newName})를 호출 합 니 다.add 동작 을 예약 하여 reducer 유 니 크 Reducer 가 상태 에 새로운 제품 이름 을 추가 합 니 다.
같은 방식 으로 Delete 단 추 를 누 르 면 처리 프로그램 은 dispatch({type:'delete',name})를 호출 합 니 다.remove 작업 은 제품 이름 을 이름 상태 에서 삭제 합 니 다.
재 미 있 는 것 은 reducer 는 명령 모드 의 특례 이다.
총결산
상태 변 수 는 한 점 만 주목 해 야 합 니 다.
상태 가 복잡 한 업데이트 논리 가 있다 면 이 논 리 를 구성 요소 에서 사용자 정의 hook 으로 추출 합 니 다.
마찬가지 로 상태 에 여러 조작 이 필요 하 다 면 reducer 로 이 조작 을 통합 하 십시오.
어떤 규칙 을 사용 하 든 상 태 는 가능 한 한 간단 하고 분리 해 야 한다.구성 요 소 는 상태 업데이트 의 세부 사항 에 시 달 려 서 는 안 됩 니 다.사용자 정의 hook 또는 간략화 기의 일부분 이 어야 합 니 다.
이 세 가지 간단 한 규칙 은 당신 의 상태 논 리 를 쉽게 이해 하고 유지 하 며 테스트 할 수 있 습 니 다.
여기 서 React 상태 관리 에 관 한 세 가지 규칙 에 관 한 글 은 여기까지 소개 되 었 습 니 다.더 많은 React 상태 관리 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!