React24 리액트 공식 문서 번역-20. 상태 로직을 리듀서로 추출하기 많은 이벤트 핸들러에 걸쳐 많은 상태 업데이트가 있는 컴포넌트는 압도적일 수 있습니다. 이러한 경우에는 리듀서라는 단일 함수에서 컴포넌트 외부의 모든 상태 업데이트 로직을 통합할 수 있습니다. 리듀서로 상태 로직 통합하기 컴포넌트가 복잡해짐에 따라 컴포넌트의 상태가 업데이트되는 다양한 방법을 한눈에 파악하기가 어려워질 수 있습니다. 예를 들어, 아래의 TaskApp 컴포넌트는 상태의 작업 배열을 보유하고 있으며 작업을 추가, 제거, 편집하기 위해 세 가지 다른 이벤트 핸들러를 사용합니다 https://codesandbox.io/s/yrv1mz?file=/App.js&utm_medium=sandpack sleepy-austin-yrv1mz - CodeSandbox sleepy-austin-yrv1mz us.. 2023. 7. 16. 리액트 공식 문서 번역-19. 상태 보존 및 초기화 컴포넌트 간의 상태는 고립되어 있습니다. React는 UI 트리에서 컴포넌트의 위치를 기준으로 어떤 상태가 어떤 컴포넌트에 속하는지 추적합니다. 리렌더링 사이에 상태를 언제 보존하고 언제 초기화할지 제어할 수 있습니다. UI 트리 브라우저는 UI를 모델링하기 위해 여러 가지 트리 구조를 사용합니다. DOM은 HTML 요소를 나타내고, CSSOM은 CSS에 대해 동일한 작업을 수행합니다. 심지어 접근성 트리까지 있습니다! React는 작성한 UI를 관리하고 모델링하기 위해 트리 구조를 사용합니다. React는 JSX에서 UI 트리를 생성합니다. 그런 다음 React DOM은 해당 UI 트리와 일치하도록 브라우저 DOM 요소를 업데이트합니다. (React Native는 이러한 트리를 모바일 플랫폼 전용 요소.. 2023. 7. 14. 리액트 공식 문서 번역-18. 컴포넌트간 상태 공유하기 때로는 두 컴포넌트의 상태가 항상 함께 변경되기를 원할 때가 있습니다. 이를 위해서는 두 컴포넌트에서 상태를 제거하고 가장 가까운 공통 부모 컴포넌트로 이동시킨 다음, props를 통해 하위 컴포넌트로 전달합니다. 이것이 상태를 들어 올리는(lifting state up) 방법입니다. 이 방법은 React 코드를 작성할 때 가장 일반적인 작업 중 하나입니다. 상태 끌어올리기 예제 예시로, 부모 컴포넌트인 Accordion은 두 개의 별개의 Panel을 렌더링합니다 Accordion Panel Panel 각각의 Panel 컴포넌트는 해당 내용이 보이는지를 결정하는 boolean isActive 상태를 가집니다. 두 패널에 대한 Show 버튼을 눌러보세요. https://codesandbox.io/s/60d.. 2023. 7. 13. 리액트 공식 문서 번역-17. 상태 구조 선택 상태(state)를 잘 구조화하는 것은 수정과 디버그를 쉽게 하는 컴포넌트와 상시적인 버그를 일으키는 컴포넌트의 차이를 만들어낼 수 있습니다. 상태를 구조화할 때 고려해야 할 몇 가지 팁이 있습니다. 상태를 구조화하는 원칙 일부 상태를 유지하는 컴포넌트를 작성할 때는 상태 변수를 사용하는 수와 그 데이터의 형태를 어떻게 할지 선택해야합니다. 하위 최적 상태 구조로도 올바른 프로그램을 작성할 수 있지만, 더 나은 선택을 돕는 몇 가지 원칙이 있습니다. 관련된 상태를 그룹화하십시오. 항상 두 개 이상의 상태 변수를 동시에 업데이트하는 경우 이들을 하나의 상태 변수로 병합하는 것이 좋습니다. 상태에 모순을 피하십시오. 상태가 구조화되어 여러 상태 조각이 서로 모순되거나 "일치하지 않는" 경우 오류 여지가 있습.. 2023. 7. 13. 이전 1 2 3 4 5 6 다음
