React24 리액트 공식 문서 번역-16. 상태와 함께 입력에 대응 React에서는 UI를 조작하는 방법으로 선언적인 방식을 사용합니다. 개별 UI 요소를 직접 조작하는 대신, 컴포넌트가 취할 수 있는 다른 상태들을 설명하고, 사용자 입력에 대한 응답으로 이들 사이를 전환합니다. 이는 디자이너가 UI를 생각하는 방식과 유사합니다. 선언형 UI와 명령형 UI의 비교 UI 인터랙션을 디자인할 때, 사용자의 액션에 따라 UI가 어떻게 변경되는지 생각할 것입니다. 사용자가 답변을 제출할 수 있는 양식을 고려해봅시다. 양식에 입력을 하면 "제출" 버튼이 활성화됩니다. "제출" 버튼을 누르면 양식과 버튼이 모두 비활성화되고, 스피너가 나타납니다. 네트워크 요청이 성공하면, 양식이 숨겨지고 "감사합니다" 메시지가 나타납니다. 네트워크 요청이 실패하면, 오류 메시지가 나타나고 양식이 .. 2023. 7. 12. 리액트 공식 문서 번역-15. State에서 배열 업데이트하기 배열은 자바스크립트에서 변경 가능하지만, 상태에 저장할 때는 불변으로 취급해야 합니다. 객체와 마찬가지로 상태에 저장된 배열을 업데이트하려면 새 배열을 만들어야 하고(또는 기존 배열을 복사한 다음), 상태를 새 배열을 사용하도록 설정해야 합니다. 변이 없이 배열 업데이트하기 자바스크립트에서 배열은 객체의 또 다른 종류입니다. 객체와 마찬가지로 React 상태의 배열을 읽기 전용으로 취급해야 합니다. 이는 arr[0] = 'bird'와 같이 배열 내의 항목을 재할당하지 않아야 하며, push() 및 pop()과 같은 배열을 변이시키는 메서드를 사용해서는 안 된다는 것을 의미합니다. 대신, 배열을 업데이트할 때마다 상태 설정 함수에 새 배열을 전달해야 합니다. 이를 위해 상태의 원래 배열에서 filter().. 2023. 7. 12. 리액트 공식 문서 번역-14. State에서 객체 업데이트하기 State는 객체를 포함하여 JavaScript 값의 모든 종류를 보유할 수 있습니다. 그러나 React state에 보유된 객체를 직접 변경해서는 안됩니다. 객체를 업데이트하려면 대신 새로운 객체를 만들거나 기존 객체를 복사한 후 상태를 그 복사본을 사용하도록 설정해야 합니다. 변이(mutation)란 무엇인가요? State에는 JavaScript의 모든 종류의 값을 저장할 수 있습니다. const [x, setX] = useState(0); 지금까지 숫자, 문자열 및 부울 값과 함께 작업했습니다. 이러한 종류의 JavaScript 값은 '불변(immutable)'이므로 변경할 수 없거나 '읽기 전용(read-only)'입니다. 값 대체를 위해 다시 렌더링을 트리거할 수 있습니다. setX(5); x .. 2023. 7. 12. 리액트 공식 문서 번역-13. 일련의 상태 업데이트를 대기열에 추가하기 상태 변수를 설정하면 다른 렌더링이 대기열에 추가됩니다. 그러나 때로는 다음 렌더링을 대기열에 추가하기 전에 값을 여러 번 조작하고 싶을 수도 있습니다. 이를 위해서는 React가 상태 업데이트를 어떻게 일괄 처리하는지 이해하는 것이 도움이 됩니다. React는 상태 업데이트를 일괄 처리(batching)합니다. '+3' 버튼을 클릭하면 setNumber(number + 1)을 세 번 호출하므로 카운터가 세 번 증가할 것으로 예상할 수 있습니다. https://codesandbox.io/s/984x0t?file=/App.js&utm_medium=sandpack stoic-worker-984x0t - CodeSandbox stoic-worker-984x0t using react, react-dom, rea.. 2023. 7. 12. 이전 1 2 3 4 5 6 다음
