흰 스타렉스에서 내가 내리지

많은 이벤트 핸들러에 걸쳐 많은 상태 업데이트가 분산되는 컴포넌트는 복잡해질 수 있습니다. 이러한 경우에는 컴포넌트 외부에 모든 상태 업데이트 로직을 단일 함수인 "리듀서"로 통합할 수 있습니다. 이벤트 핸들러는 사용자 "액션"만을 지정하기 때문에 간결해집니다. 파일의 맨 아래에서 리듀서 함수는 각 액션에 대한 상태 업데이트 방식을 지정합니다!  리듀서를 사용하는 경우 상태를 설정하기 위한 이벤트 핸들러 대신 액션을 디스패치하여 "사용자가 방금 무엇을 했는지"를 지정합니다. (상태 업데이트 로직은 다른 곳에 있습니다!) 따라서 이벤트 핸들러를 통해 "작업 추가/변경/삭제" 액션을 디스패치하는 대신 "작업을 추가/변경/삭제했다"라고 명시합니다. 이는 사용자의 의도를 더 명확하게 나타냅니다.function ..

배열에 추가하기push()는 배열을 변이시키므로 사용하면 안됩니다: 대신, 기존 아이템과 새 아이템을 포함한 새 배열을 생성합니다. 이를 위해 여러 가지 방법이 있지만, 가장 간단한 방법은 ... 배열 스프레드 구문을 사용하는 것입니다 import { useState } from 'react';let nextId = 0;export default function List() { const [name, setName] = useState(''); const [artists, setArtists] = useState([]); return ( Inspiring sculptors: setName(e.target.value)} /> { setArti..

Immer에서 제공하는 draft는 "기록"하는 특수한 종류의 객체입니다. draft를 자유롭게 변이시킬 수 있는 이유입니다! 내부적으로 Immer는 draft에서 변경된 부분을 찾아내고, 편집한 내용을 포함하는 완전히 새로운 객체를 생성합니다. npm install use-immer를 실행하여 의존성으로 Immer를 추가합니다.그런 다음 import { useState } from 'react'를 import { useImmer } from 'use-immer'로 바꿉니다. import { useImmer } from 'use-immer';export default function Form() { const [person, updatePerson] = useImmer({ name: 'Niki d..

이벤트 핸들러를 속성으로 전달하기자주 사용되는 시나리오 중 하나는 상위 컴포넌트에서 자식의 이벤트 핸들러를 지정하는 것입니다. 예를 들어 버튼을 고려해 보겠습니다. Button 컴포넌트를 사용하는 위치에 따라 다른 기능을 실행할 수 있습니다. 예를 들어 한 컴포넌트에서는 영화 재생을 실행하고 다른 컴포넌트에서는 이미지를 업로드할 수 있습니다. function Button({ onClick, children }) { return ( {children} );}function PlayButton({ movieName }) { function handlePlayClick() { alert(`Playing ${movieName}!`); } return ( Pl..

스냅샷으로서의 상태(state)일반적인 JavaScript 변수와 달리 React 상태(state)는 스냅샷과 유사하게 작동합니다. 상태를 설정하면 이미 있는 상태 변수가 변경되지 않고 다시 렌더링이 트리거됩니다. console.log(count); // 0setCount(count + 1); // 1로 다시 렌더링을 요청console.log(count); // 여전히 0!   여러 개의 상태 업데이트를 큐에 저장하기이 컴포넌트는 버그가 있습니다. "더하기 3"을 클릭하면 점수가 한 번만 증가합니다.import { useState } from 'react';export default function Counter() { const [score, setScore] = useState(0); functi..

가끔씩 props를 전달하는 것이 매우 반복적일 수 있습니다. function Profile({ person, size, isSepia, thickBorder }) { return ( );} 반복적인 코드는 문제가 없습니다. 가독성이 좋을 수도 있습니다. 그러나 때로는 간결함을 더 중요시할 수 있습니다. 일부 컴포넌트는 Avatar와 같이 모든 props를 자식 컴포넌트로 전달합니다. 그들은 직접 props 중 하나도 사용하지 않기 때문에 더 간결한 "스프레드" 구문을 사용하는 것이 의미가 있을 수 있습니다. function Profile(props) { return ( );}  이렇게 하면 Profile의 모든 props가 개별적으로 나열되지 않..