React24 리액트 공식 문서 번역-12. 상태를 스냅샷으로 사용하기 상태 변수는 읽고 쓸 수 있는 일반적인 JavaScript 변수처럼 보일 수 있습니다. 그러나 상태는 더 많은 것을 스냅샷과 같이 동작합니다. 상태를 설정하면 이미 가지고 있는 상태 변수를 변경하는 것이 아니라, 다시 렌더링을 트리거합니다. 상태 설정은 렌더를 트리거합니다 사용자 인터페이스는 클릭과 같은 사용자 이벤트에 직접적으로 반응하는 것처럼 생각할 수 있습니다. 하지만 React에서는 이러한 개념보다 조금 다르게 작동합니다. 이전 페이지에서 보았듯이 상태를 설정하면 React에게 다시 렌더링을 요청합니다. 이것은 인터페이스가 이벤트에 반응하려면 상태를 업데이트해야 한다는 것을 의미합니다. 이 예제에서 "Send"를 누르면 setIsSent(true)가 React에게 UI를 다시 렌더링하도록 지시합니.. 2023. 7. 12. 리액트 공식 문서 번역-11. 렌더링 및 커밋 React에서 컴포넌트가 화면에 표시되기 전에는 렌더링 과정을 거쳐야 합니다. 이 과정을 이해하면 코드가 어떻게 실행되고 동작하는지 파악할 수 있습니다. 컴포넌트를 조리사들로 생각하고, 이들이 재료를 이용해 맛있는 요리를 만들어 내는 주방에서의 상황을 상상해 보세요. 이 시나리오에서 React는 손님의 주문을 받고, 주방에서 요리를 준비하여 서빙하는 웨이터와 같은 역할을 합니다. 이러한 UI 요청과 서빙 과정은 다음 세 단계를 거칩니다 렌더링 트리거 (손님의 주문을 주방에 전달) 컴포넌트 렌더링 (주방에서 주문을 조리) DOM에 반영 (주문을 테이블에 올려서 제공) 1단계: 렌더 트리거 컴포넌트가 렌더링되는 이유는 두 가지가 있습니다 초기 렌더링일 때 컴포넌트나 부모 컴포넌트의 상태가 업데이트되었을 때 .. 2023. 7. 12. 리액트 공식 문서 번역-10. 상태: 컴포넌트의 메모리 컴포넌트는 종종 상호작용 결과에 따라 화면에 무엇을 표시할 지 변경해야 합니다. 폼에 입력하는 것은 입력 필드를 업데이트해야 하며, 이미지 캐로셀에서 "다음"을 클릭하면 표시되는 이미지가 변경되어야 하며, "구매"를 클릭하면 제품이 장바구니에 담겨야 합니다. 컴포넌트는 "기억"해야 할 것들이 있습니다: 현재 입력 값, 현재 이미지, 장바구니. React에서 이러한 종류의 컴포넌트별 기억은 state라고 합니다. 일반 변수만으로는 부족한 경우 다음 조각상 이미지를 렌더링하는 컴포넌트가 있습니다. "다음" 버튼을 클릭하면 인덱스를 1, 2 등으로 변경하여 다음 조각상을 표시해야합니다. 하지만 이렇게 하면 작동하지 않습니다 https://codesandbox.io/s/vqbvw5?file=/App.js&utm.. 2023. 7. 11. 리액트 공식 문서 번역-09. 이벤트에 대한 응답 React는 JSX에 이벤트 핸들러를 추가할 수 있도록 합니다. 이벤트 핸들러는 클릭, 호버링, 폼 입력에 대한 포커싱 등과 같은 상호작용에 응답하여 트리거되는 사용자 정의 함수입니다. 이벤트 핸들러 추가 이벤트 핸들러를 추가하려면, 먼저 함수를 정의하고, 그 함수를 적절한 JSX 태그에 props로 전달해야 합니다. 예를 들어, 아무 것도 하지 않는 버튼을 다음과 같이 만들 수 있습니다 https://codesandbox.io/s/3sn3e0?file=/App.js&utm_medium=sandpack pensive-breeze-3sn3e0 - CodeSandbox pensive-breeze-3sn3e0 using react, react-dom, react-scripts codesandbox.io 다음 .. 2023. 7. 10. 이전 1 2 3 4 5 6 다음
