akjfal

ReactDOMClient ※ 공식 사이트에 한글로 번역이 되어있으니 원문을 보시는 것을 추천드립니다. createRoot() DOM에 root를 추가할 때 사용합니다. 2가지 옵션이 존재합니다. onRecoverableError: error에서 자동적으로 회복하기 위해 호출하는 콜백함수입니다. identifierPrefix: React.useId에서 만들어지는 id입니다. multi root에서 충돌을 방지하기 위해 사용합니다. 서버와 같은 prefix를 사용해야만 합니다. hydrateRoot() createRoot와 같지만 이는 ReactDOMServer에서 동작합니다. createRoot와 동일한 옵션을 사용합니다.

ReactDOM ※ 공식 사이트에 한글로 번역이 되어있으니 원문을 보시는 것을 추천드립니다. react-dom은 DOM에 특화된 메소드입니다. react-dom은 react-dom/client, react-dom/server 둘로 나눠져있습니다. createPortal() React DOM외부에 react 컴포넌트 구조를 만들 수 있는 함수입니다. flushSync() 리엑트가 강제적으로 업데이트 되도록 강제합니다.

Portal Portal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 방법을 제공합니다. ReactDOM.createPortal(child, container) Portal을 통한 이벤트 버블링 portal이 DOM트리의 어디나 있다고 하더라도 다른 모든 것은 일반적인 React의 자식처럼 동작합니다. 이는 DOM트리와 관계없이 React트리에 존재하기 때문입니다.

성능최적화 DevTools Profiler로 컴포넌트 프로파일링 개발 모드에서 프로파일링 기능을 통해서 성능개선을 시킬 수 있습니다. 유튜브 영상 설명 또한 존재합니다. 긴 목록 가상화하기 리스트로 나타나는 긴 목록들을 한번에 구딩 보여줄 필요가 없습니다. windowing 기법을 통해서 렌더링하는데 걸리는 시간과 생성되는 DOM의 수를 줄이는 것이 중요합니다. react-window와 react-virtualized가 가장 널리 알려진 windowing 라이브러리입니다. 재조정 피하기 몇몇 특정 상황에서 컴포넌트를 업데이트할 필요가 없다는 것을 알고 있다면 shouldComponentUpdate()에서 false로 반환해서 렌더링 프로세스를 건너뛰게 할 수 있습니다. 대부분의 경우에 shouldComp..

Error Boundaries 에러 경계(Error Boundaries) – React A JavaScript library for building user interfaces ko.reactjs.org 과거 자바스크립트 에러가 React의 내부를 훼손하고, 암호화 에러를 뱉어내서 문제가 되었습니다. Error Boundaries의 소개 UI의 일부분 에러가 전체 애플리케이션을 중단시켜서는 안되기 때문에 React 16에서부터 Error Boundary라는 개념을 도입했습니다. 단 아래 경우에는 에러를 포착하지 않습니다. 이벤트 핸들러 비동기적 코드 서버사이드 렌더링 자식이 아닌 error boundaries 자체에서 발생하는 에러 ... Error boundary배치 위치 개발자가 결정할 사항인데, 전..

Context Context – React A JavaScript library for building user interfaces ko.reactjs.org context를 사용하면 props로 상태를 일일이 넘길 필요 없이 데이터를 트리에 제공할 수 있습니다. 언제 Context를 써야 할까 기존에 React에서 데이터를 전역적으로 사용하기 위해서는 Redux나 Mobx와 같은 외부 라이브러리에 의존해야했습니다. 하지만 이를 내부적으로 해결하기 위해 고안된 방법입니다. import React from 'react'; function ThemeButton(props){ const {theme} = props; return ( 버튼 ) } function App() { return ( ); } expor..

코드 분할 코드 분할 – React A JavaScript library for building user interfaces ko.reactjs.org 번들링 코드들이 import 로 엮여있는 경우 이를 webpack등 툴을 통해 묶어줍니다. 코드 분할 앱의 크기가 커지면 번들도 커지기 때문에 로드가 오래걸릴 수 있습니다. 이를 통해 초기 로딩 비용을 줄일 수 있습니다. import() 동적 import()문을 통해 코드를 분할하는 것이 가장 좋습니다. import("./math").then(math => { console.log(...)})); webpack이 해당 구문을 만나게 되면 코드를 분할합니다. 또한 Next.js도 이를 지원합니다. 만약 Babel을 사용한다면 동적 import를 다른 것으로..

16.8부터 새로 추가된 기능입니다. class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해줍니다. State Hook function Example(){ const [count, setCount] = useState(0); function onClick = () => { setCount(count+1); } } useState가 Hook입니다. Hook을 사용해 함수 컴포넌트 안에 state를 추가했는데, state는 다시 렌더링되어도 그대로 유지됩니다. this.state와 비슷하지만 이전 state와 새로운 state를 합치지 않는다는 점이 차이점입니다. Hook이란 함수 컴포넌트에서 React state와 생명주기 기능을 연동 할 수 있게 해주는 함수입니다. Hoo..