React가 당신을 놀라게 할 수 있는 이유(그리고 그것을 길들이는 방법)

React를 사용해 본 적이 있다면 아마도 자기 의심의 순간이 있었을 것입니다. 나 역시 거기에 가본 적이 있다. 내가 뭔가 근본적인 것을 놓치고 있는 것은 아닌가 하는 생각이 들었지만, 문제가 나에게 있는 것이 아니라 React의 특성에 있다는 것을 알게 되었다.

이번에는 예상치 못한 행동 중 일부와 그 원인, 그리고 제 경험을 공유하겠습니다. 이것이 제가 겪었던 머리 긁는 일을 조금이나마 덜어줄 수 있기를 바랍니다!

1. 상태 업데이트: 지연된 반응

setState를 호출했지만 UI가 즉시 변경되지 않습니다. 왜? React는 성능을 위해 상태 업데이트를 일괄 처리합니다. 이는 즉각적인 피드백에 대한 기대와 모순되기 때문에 새로운 개발자를 당황하게 만드는 경우가 많습니다.

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

const handleClick = () => {
  setCount(count + 1);
  console.log(count); // Still logs the old count
};

이러한 이유:
React의 상태 업데이트는 비동기식입니다. 이를 통해 React는 다시 렌더링을 최적화할 수 있지만 이는 setState가 개수를 즉시 업데이트하지 않음을 의미합니다. 새 상태는 구성 요소가 다시 렌더링된 후에만 반영됩니다.

프로 팁: 오래된 상태에 의존하지 않으려면 setState의 기능적 형식을 사용하세요.

setCount(prevCount => prevCount + 1);

2. Hooks의 종속성 배열: 왜 다시 실행되지 않았나요?

또 다른 일반적인 함정: useEffect 후크를 추가했지만 예상대로 실행되지 않는 것 같습니다.

useEffect(() => {
  console.log("Effect ran");
}, [someVar]);

그런 다음 someVar를 업데이트해도 효과가 실행되지 않는다는 것을 알게 됩니다. 디버깅 후 someVar가 객체 또는 배열이라는 것을 알게 됩니다.

이러한 이유:
React의 종속성 배열은 참조 동등성을 사용합니다. 두 객체나 배열이 동일해 보이더라도 참조가 다르면 서로 다른 것으로 간주됩니다. 주의하지 않으면 예상치 못한 동작이 발생할 수 있습니다.

프로 팁: useDeepCompareEffect와 같은 유틸리티를 사용하거나 종속성을 메모하세요.

3. 리렌더링 문제: 왜 리렌더링을 했나요?

구성요소를 최적화했지만 여전히 불필요하게 다시 렌더링되고 있음을 발견했습니다.

const MyComponent = ({ count }) => {
  console.log("Rendered");
  return <div>{count}</div>;
};

count가 변경되지 않더라도 상위 구성 요소가 다시 렌더링되고 새 prop 참조를 전달하므로 구성 요소가 다시 렌더링됩니다.

이러한 이유:
React의 기본 동작은 React.memo와 같은 최적화를 사용하지 않는 한 하위 구성 요소를 다시 렌더링하는 것입니다.

프로 팁: React.memo를 사용하여 구성 요소를 메모하거나 콜백을 사용하여 prop 참조가 불필요하게 변경되는 것을 방지하세요.

4. 주요 제안: 무엇이 중요한가요?

목록 항목에 키를 추가하는 것을 잊었고 갑자기 UI가 비정상적으로 작동합니다.

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

const handleClick = () => {
  setCount(count + 1);
  console.log(count); // Still logs the old count
};

이러한 이유:
React는 키를 사용하여 어떤 항목이 변경, 추가 또는 제거되었는지 추적합니다. 고유 키가 없으면 React는 DOM 노드를 잘못 재사용할 수 있습니다.

프로 팁: 고유 식별자를 키로 사용하세요(예: 데이터의 ID).

5. 이벤트 처리: 신비한 더블 트리거

버튼 클릭 이벤트가 두 번 발생하고 브라우저에 유령이 나타나는지 궁금한 적이 있습니까?

setCount(prevCount => prevCount + 1);

버튼을 클릭하면 '클릭!' 개발 모드에서는 콘솔에 두 번 표시됩니다.

이런 일이 일어나는 이유:
React의 Strict 모드는 잠재적인 부작용을 강조하기 위해 개발 중에 의도적으로 구성 요소를 두 번 마운트 및 마운트 해제합니다. 이로 인해 이벤트 핸들러가 여러 번 실행될 수 있습니다.

프로 팁: 당황하지 마세요. 아직 개발 중입니다.

6. 통제되지 않는 구성 요소: 여기서는 누가 제어할 수 있나요?

입력 요소를 생성하고 값을 할당하고 React가 이를 원활하게 관리할 것으로 기대했지만 경고가 표시됩니다.

useEffect(() => {
  console.log("Effect ran");
}, [someVar]);

이러한 이유:
React는 제어되는 구성요소(React 상태에 의해 관리됨)와 제어되지 않는 구성요소(DOM에 의해 관리됨)를 구별합니다. 두 가지를 혼합하면 문제가 발생합니다.

프로 팁: 제어되는 구성 요소를 원하는 경우 항상 값을 onChange와 쌍으로 연결하세요.

const MyComponent = ({ count }) => {
  console.log("Rendered");
  return <div>{count}</div>;
};

7. 참고: 왜 일반 변수만 사용할 수 없나요?

변수를 사용하여 렌더링 사이에 값을 저장하려고 시도했지만 매번 재설정됩니다.

<ul>
  {items.map(item => (
    <li>{item}</li>
  ))}
</ul>

이런 일이 일어나는 이유:
React는 모든 렌더링에서 변수를 다시 초기화합니다. 지속적인 값의 경우 useRef:
를 사용하세요.

<button onClick={() => console.log("Clicked!")}>Click Me</button>

마무리 생각

'이유'를 알면 단순히 반응하는 것이 아니라 통제할 수 있습니다. React는 놀랍지만 때로는 약간 혼란스러울 수도 있습니다. 일이 왜 그런 방식으로 작동하는지 이해하면 좌절감이 훨씬 줄어듭니다. 작동하는 이유를 이해하면 많은 시간과 좌절감을 절약할 수 있습니다. 그것은 모두 독특한 (때로는 혼란스러운) 매력의 일부입니다.

위 내용은 React가 당신을 놀라게 할 수 있는 이유(그리고 그것을 길들이는 방법)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!