상태 변수를 설정하는 것은 또 다른 렌더링을 대기열에 넣는 거예요. 그러나 때때로 다음 렌더링을 대기열에 넣기 전에 다양한 연산을 하고 싶을 수도 있어요. 이를 하기 위해서는 리액트가 상태 업데이트를 어떻게 배칭하는지를 이해하면 도움이 될 거예요. 이 페이지에서는 - "배칭"이란 무엇이고 리액트는 여러 상태 업데이트를 수행할 때 이를 어떻게 사용하는지 - 어떻게 동일한 상태변수에 연속적으로 여러 업데이트를 적용하는지 를 알아볼 거예요. React batches state updates | 리액트는 상태 업데이트를 배칭해요 "+3" 버튼을 클릭하면 setNumber(number + 1)이 3번 호출되기 때문에 카운터가 3번 증가한다고 생각할 거예요. 그러나 이전 섹션을 다시 부를때, 각 렌더링의 상태 값을..
리액트 공식문서 한국어
useReducer는 컴포넌트에 리듀서(reducer)를 추가해주는 리액트 훅이에요. const [state, dispatch] = useReducer(reducer, initialArg, init?) Reference | 레퍼런스 useReducer(reducer, initialArg, init?) 리듀서로 상태를 관리하기 위해서는 최상위 컴포넌트에서 useReducer를 호출하세요. import { useReducer } from 'react'; function reducer(state, action) { // ... } function MyComponent() { const [state, dispatch] = useReducer(reducer, { age: 42 }); // ... Parameter..
useId는 접근성 속성에 전달할 수 있는 고유한 ID를 생성하는 리액트 훅이에요. const id = useId(); Reference | 레퍼런스 useId() 고유 ID를 생성하려면 최상위 컴포넌트에서 useId를 호출하세요. import { useId } from 'react'; function PasswordField() { const passwordHintId = useId(); // ... } 더 많은 예시를 보려면 아래 예시들을 참고하세요. Parameters | 매개변수(파라미터) useId는 어떤 매개변수도 받지 않아요. Returns | 반환값 useId는 해당 컴포넌트에서 특정한 useId 호출과 연관된 고유 ID 문자열을 반환해요. Caveats | 주의사항 useId는 훅이기 때..
useEffect는 외부 시스템과 컴포넌트의 싱크를 맞춰주는 훅이에요. useEffect(setup, dependencies?) Reference | 레퍼런스 useEffect(setup, dependencies?) 이펙트(Effect)를 선언하기 위해서는 컴포넌트 최상단에서 useEffect를 선언하세요. import { useEffect } from 'react'; import { createConnection } from './chat.js'; function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); useEffect(() => { const connection = creat..
