React에서 상태에 대해 이야기해야 합니다.

모든 사람은 프론트엔드의 큰 개를 강타할 기회를 좋아합니다 - React; 그러나 상태에 관해서는 정말 일류입니다!

상태에 대해 이야기하고 쉽게 관리할 수 있는 방법을 살펴보겠습니다.

리터럴 형태의 상태

첫째, 상태가 신청서에서 취할 수 있는 두 가지 형식을 이해하는 데 도움이 됩니다.

명시적 상태

현대 React의 경우 이것은 useState 및 useReducer 입니다. 명시적 상태는 허공에서 나오는 것이 아니라 명시적으로 생성되고 관리되어야 합니다.

파생된 상태

일종의 유사 상태인 파생 상태는 하나 이상의 상태(명시적 또는 파생)를 처리한 결과입니다.

const [input, setInput] = useState(); // Explicit state
const inputValid = useMemo(           // Derived state
  () => input && input.length > 6,
  [input]
);

상태 유형 선택

명시적 또는 파생된 상태를 사용할지 여부를 아는 것이 어려울 수 있지만 정말 간단한 답이 있습니다.

Always use derived state where possible

위의 규칙을 지키지 않으면 중복 상태가 발생할 수 있습니다.

중복 코드와 달리 중복 상태는 실제로 존재하는 실제 문제입니다. 성능에서 유지 관리 가능성에 이르기까지 모든 것에 영향을 미칠 수 있습니다.

중복 발견

다음과 같은 것을 작성한 적이 있다면 - 나도 알고 있습니다 - 아마도 중복 상태를 생성한 죄를 범했을 것입니다.

const [value, setValue] = useState("");
const [isValid, setIsValid] = useState(false);

useEffect(
  () => setIsValid(value && value.length > 4), 
  [value]
);

useEffect 함수를 즉시 호출하는 setState 호출은 거의 항상 파생되어야 하는 상태의 예입니다.

그것은 세상에서 가장 나쁜 것처럼 보이지 않으며, 그 자체로 아마도 그렇지 않을 것입니다. 즉, 이 패턴이 존재한다면 많은 곳에 존재하고 더 큰 문제로 이어질 가능성이 높습니다.

useEffect 지옥

우리 중 대부분은 useEffect 지옥을 겪은 프로젝트에 참여했습니다. 한 가지 버그를 수정하려고 하지만 단일 상태 변경으로 인해 새로운 렌더링이 쏟아지기 때문에 추적할 수 없습니다.
useEffect가 있는 것은 상태 업데이트의 연속적인 수를 유발할 수 있다는 것입니다. 이는 차례로 후속 useEffect 호출을 유발할 수 있습니다. 이것은 함수 자체의 문제가 아니라 과도한 상태의 문제입니다.

상태 관리를 위한 팁

상태 관리에 대한 조언이 하나 있다면 최소한으로 유지하는 것입니다 ...하지만 조언은 하나뿐이므로 여기에 몇 가지가 더 있습니다!

배치 상태 업데이트

여러 상태 업데이트가 한 번에 호출되는 경우 이러한 업데이트를 하나의 호출로 일괄 처리하는 것이 유용합니다.


일괄 처리

const [{ fetching, data }, setState] = useState({ 
  fetching: true, 
  data: undefined 
});

useEffect(() => {
  (async () => {
    const data = await getData();
    setState({ fetching: false, data })
  })()
}, []);

// State 1: { fetching: true, data: undefined }
// State 2: { fetching: false, data: 1234 }

일괄 처리 없이

const [fetching, setFetching] = useState(true);
const [data, setData] = useState();

useEffect(() => {  
  (async () => {
    const data = await getData();
    setFetching(false);
    setData(data);
  })()
}, []);

// State 1: { fetching: true, data: undefined }
// State 2: { fetching: false, data: undefined } 
// State 3: { fetching: false, data: 1234 }

일괄 업데이트는 더 적은 수의 렌더링을 의미하는 것이 아니라 처리할 수 있는 상태가 더 적습니다. 테스트 및 재생산을 훨씬 간단하게 만듭니다.

Remember, fewer renders means fewer state changes

비품 사용

설비(또는 스토리)는 앱의 모든 상태를 이해, 모델링 및 문서화하기 위한 놀라운 도구입니다.

비품에 대해 자세히 알아보십시오.

useMemo를 더 자주 사용해 보세요.

놀랍네요.


바라건대, 당신이 이것을 흥미롭게 찾았습니다! 생각이나 의견이 있으면 언제든지 아래에 드롭하거나 트위터에서 저를 누르십시오 -

면책 조항: 이 기사에 표현된 모든 생각과 의견은 내 자신의 것입니다.