문제 해결

대체 언제 왜 어떻게요

React re-rendering 조건 state 변경이 있을 때(React는 setState 호출에 의한 state 변경에만 반응한다.)새로운 props가 들어올 때기존 props가 업데이트 되었을 때부모 컴포넌트가 re-rendering 될 때 Re-rendering 타이밍 setState가 호출되는 시점이 아니라 해당 코드가 들어있는 함수가 모두 실행...

Reconciliation을 다시 구현하기 전에 workLoop와 doNextWork를 변경했다. 목적은 전체 트리 렌더링이 완료되기 전에 브라우저가 작업을 방해할 수 없도록 하는 것이다. 하나의 트리가 모두 만들어지면(다음 work 없음) 그 때 한 번에 전체 fiber 트리를 DOM에 집어 넣는다. 기존에는 doNextWork 함수 내부에서 작업 중간에...

React는 자바스크립트 기반이기 때문에 싱글 스레드다. 그러나 Concurrent Mode를 이용하면 여러 작업을 동시에 처리할 수 있다. 기본적으로 리액트는 UI 렌더링 도중에 렌더링 이외의 모든 작업을 중단하는데, 동시성은 여러 작업을 작은 단위로 나눈 뒤, 그들 간의 우선 순위를 정하고 그에 따라 작업을 번갈아 수행하는 방법이다. 실제로 작업이 동시...

단순화하여 재구현

React에서 JSX로 위와 같이 작성하면 Babel을 통해 만들어진 output을 볼 수 있다. Babel 공식 문서에는 output에 대한 예제가 다음과 같이 나와 있음. 이것을 이용해서 React에서 제공하는 createElement, render와 동일한 기능을 하는 함수를 만들어 봤다. 물론 실제와는 다르다. 기본적으로 output은 type과 p...

한국정보올림피아드 2020

문제: 박 터뜨리기 K개의 팀이 박 터트리기 게임을 한다. 각 팀은 하나의 바구니를 가지고 있고, 바구니에 들어있는 공을 던져서 자기 팀의 박을 터트려야 한다. 우리는 게임을 준비하기 위해서, N개의 공을 K개의 바구니에 나눠 담아야 한다. 이때, 게임의 재미를 위해서 바구니에 담기는 공의 개수를 모두 다르게 하고 싶다. 즉, N개의 공을 K개의 바구니에 ...