전체 글

상태 변수를 설정하는 것은 또 다른 렌더링을 대기열에 넣는 거예요. 그러나 때때로 다음 렌더링을 대기열에 넣기 전에 다양한 연산을 하고 싶을 수도 있어요. 이를 하기 위해서는 리액트가 상태 업데이트를 어떻게 배칭하는지를 이해하면 도움이 될 거예요. 이 페이지에서는 - "배칭"이란 무엇이고 리액트는 여러 상태 업데이트를 수행할 때 이를 어떻게 사용하는지 - 어떻게 동일한 상태변수에 연속적으로 여러 업데이트를 적용하는지 를 알아볼 거예요. React batches state updates | 리액트는 상태 업데이트를 배칭해요 "+3" 버튼을 클릭하면 setNumber(number + 1)이 3번 호출되기 때문에 카운터가 3번 증가한다고 생각할 거예요. 그러나 이전 섹션을 다시 부를때, 각 렌더링의 상태 값을..

상태 변수는 읽고 쓸 수 있는 일반적인 자바스크립트 변수처럼 생겼어요. 그러나 상태는 스탭샷에 더 가깝게 행동해요. 상태를 지정하면 이미 갖고 있는 상태 변수를 바꾸는 것이 아니라 리렌더링을 발생시켜요. 이 페이지에서는 - 상태를 정하는 것이 리렌더링을 어떻게 발생시키는지 - 상태는 언제 어떻게 업데이트되는지 - 왜 상태는 설정한 즉시 업데이트 되지 않는지 - 이벤트 핸들러는 상태의 "스냅샷"에 어떻게 접근하는지 를 알아볼 거예요. Setting state triggers renders | 상태를 설정하면 렌더링을 유발해요 클릭과 같은 사용자 이벤트에 맞추어 즉시 사용자 인터페이스가 바뀐다고 생각할 수 있어요. 리액트는 이러한 멘탈 모델과는 조금 다르게 동작해요. 이전 페이지에서 상태를 설정하면 리렌더링..

컴포넌트가 화면에 보이기 전에는 반드리 리액트로 렌더링이 되어야해요. 이 과정을 단계별로 이해하면 코드가 실행되는 방법을 알고 동작을 설명하는데 도움이 될 거예요. 이 페이지에서는 - 리액트에서 렌더링이란 무엇인지 - 리액트는 컴포넌트를 언제 그리고 왜 렌더링하는지 - 화면에서 컴포넌트를 보여주려면 어떤 단계를 거치는지 - 렌더링이 왜 항상 DOM 업데이트를 발생시키지는 않는지 를 알아볼 거예요. 컴포넌트를 재료를 조합하여 맛있는 요리를 만드는 부엌의 요리사라고 생각해보세요. 이 시나리오에서 리액트는 손님의 주문을 받고 음식을 가져다주는 웨이터예요. UI를 요청하고 제공하는 이 과정은 세 단계를 거쳐요. 렌더링 발생시키기 (손님의 주문을 부엌에 알려주기) 컴포넌트 렌더링하기 (부엌에서 주문 준비하기) D..