React.js: 상태 구조 선택

제 글이 마음에 드셨다면 커피 한잔 사주시거나 공유해주세요 :)

---

이 글에서는 react.js 프로젝트에서 상태 구조 선택

시 중요한 사항을 살펴보겠습니다.

---

상태 구조 선택

반응 구성 요소를 작성할 때 구성 요소에 상태가 몇 개 있어야 하며 이러한 상태를 어떻게 사용할 것인지 결정해야 합니다. 예를 들어 구성 요소를 작성할 때 3가지 상태를 사용했고 구성 요소가 올바르게 작동했지만 3가지 상태를 사용하여 동일한 구성 요소를 작성할 수 있다는 것을 알게 되었습니다. 그러므로 상태 구조를 결정해야 합니다.

---

상태 구조를 선택할 때 더 나은 결정을 내릴 수 있도록 5가지 원칙에 대해 이야기하겠습니다.

1. 관련 상태 변수를 그룹화합니다.

컴퓨터 게임의 캐릭터를 생각해 보세요, 이 캐릭터는 x와 y 좌표로 움직일 수 있습니다. 그렇다면 이러한 x, y 값을 상태로 쓰고 싶다면 어떻게 하시겠습니까?

• 나쁜 접근 방식 :

• 더 나은 접근 방식 :

기술적으로는 다음 접근 방식 중 하나를 사용할 수 있습니다. 그러나 ** 항상 동시에 두 개 이상의 상태 변수를 업데이트하는 경우 단일 상태 변수로 병합하는 것을 고려하십시오**.

필요한 상태 수를 모르는 경우 객체나 배열을 사용하여 상태를 그룹화할 수 있습니다.

---

2. 국가의 모순을 피하십시오.

메시지 앱을 생각해 보세요. 메시지 전송 승인에는 두 가지 단계가 있다는 것을 알고 계실 것입니다. 첫 번째는 "메시지 전송 중"이고 두 번째는 "메시지가 전송되었습니다"입니다. 그렇다면 이 두 상태를 참과 거짓이라는 두 가지 다른 상태로 선언하면 가장 먼저 떠오르는 것은 무엇일까요?

• 나쁜 접근 방식(갈등 위험) :

isSending과 isSent는 동시에 true가 될 수 없으므로 '입력 중', '전송 중', '전송됨'의 세 가지 유효한 상태 중 하나를 취할 수 있는 하나의 상태 상태 변수로 바꾸는 것이 좋습니다.

• 더 나은 접근 방식 :

---

3. 중복 상태 방지

컴포넌트의 상태 구조를 선택할 때가 필요합니다. 컴포넌트의 props나 기존 상태 변수에서 일부 정보를 계산할 수 있다면 다음을 수행하면 안 됩니다. 이 정보를 구성 요소의 상태로 유지하세요.

• 나쁜 접근 방식 :

• 더 나은 접근 방식 :

** setFirstName 또는 setLastName을 호출하면 다시 렌더링이 실행되고 다음 전체 이름은 새로운 데이터에서 계산됩니다.**

---

결론

상태를 잘 구조화하면 쉽게 수정하고 디버깅할 수 있는 구성 요소를 확보할 수 있습니다. 이번 글에서는 상태 구조 선택 시 고려해야 할 3가지 원칙에 대해 이야기했습니다. 이러한 원칙이 더 있을 수 있습니다. 원하시면 댓글로 이러한 원칙에 대해 이야기하실 수 있습니다.

위 내용은 React.js: 상태 구조 선택의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!