akjfal

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

React 최상위 API ※ 공식 사이트에 한글로 번역이 이미 되어있으니 원문을 보시는 것을 추천드립니다. 개요 script를 통해서 React를 불러올 경우 전역객체에서 사용할 수 있고, npm에서 es6를 사용 할경우 import, es5일 경우 require(’react’)를 사용하면 됩니다. 컴포넌트 React 컴포넌트를 사용하면 UI를 재사용할 수 있는 부분으로 나누고, 각 부분을 분리하여 생각할 수 있습니다. React.Component와 React.PureComponent로 나누어 정의할 수 있습니다. ES6 class를 사용하지 않는다면, create-react-class 모듈을 대신 사용해도 됩니다. 또한 React의 컴포넌트를 정의할 때 래핑될 수 있는 함수의 형태로 할 수도 있습니다...

웹 컴포넌트 React와 웹 컴포넌트는 해결하려는 문제가 서로 다릅니다. 웹 컴포넌트는 재사용할 수 있는 컴포넌트를 목적으로하고, React는 데이터와 DOM을 동기화하는 선언적 라이브러리를 목적으로 합니다. React에서 웹 컴포넌트 사용하기 class HelloMessage extends React.Component { render(){ return Hello {this.props.name}>/x-search>! } } 웹 컴포넌트에는 강제성있는 API들이 있습니다. 예를 들어 video는 play()나 pause()를 열어놓고 있습니다. Ref를 사용해야만 해당 API에 접근할 수 있습니다. 또한 웹 컴포넌트에서 나온 이벤트들은 React렌더링 트리에 정상 작동하지 않을 수 있어 이를 다루기 위한 ..

Strict 모드 StirctMode는 애플리케이션 내 잠재적인 문제를 알아내기 위한 도구입니다. Fragment와 같이 UI를 렌더링 하지 않으며, 자손들에 부가적인 검사와 경고를 활성화합니다. StrictMode는 dv에서만 활성화됩니다. 아래와 같은 코드로 활성화 할 수 있습니다. function ExampleApplication(){ return ( ... ) } StrictMode는 다음에서 도움이 됩니다. 안전하지 않은 생명주기를 사용하는 컴포넌트 발견 레거시 문자열 Ref 사용에 대한 경고 권장되지 않는 findDOMNode 사용에 대한 경고 예상치 못한 부작용 검사 레거시 context API 검사 Ensuring reusable state 안전하지 않은 생명주기를 사용하는 컴포넌트 발견 ..

Render Props React 컴포넌트 간에 코드를 공유하기 위해 함수 props를 이용하는 방법 (hello)}/> 이러한 방법을 사용하는 라이브러리로 React Router 등이 있습니다. 횡단 관심사(Cross-Cutting concerns)를 위한 Render props 사용법 컴포넌트는 React에서 코드의 재사용성을 위한 단위입니다. 하지만 캡슐화된 상태거나 다른 상태를 가진 다른 컴포넌트에 상태를 공유하는 방법은 항상 고민됩니다. 이를 해결하기 위해 컴포넌트에 Render prop을 넘겨 무엇을 렌더링할지 알려주는 함수를 넘겨줍니다. 이 방법은 대부분의 HOC에 Render props pattern을 적용할 수 있습니다. Render 이외의 props 사용법 이름을 굳이 render를 사..

Ref와 DOM Ref는 render 메서드에서 생성된 DOM 노드나 React Element에 접근하는 방법을 제공합니다. Ref를 사용해야 할 때 Ref의 바람직한 사용사례입니다. 포커스, 텍스트 선택 영역, 미디어의 재생을 관리 애니메이션 직접 실행 서드 파티 DOM 라이브러리를 React와 같이 사용 선언적으로 해결할 수 있는 문제에 대해서는 Ref 사용을 지양해야 합니다. Ref를 남용하지 마세요. Ref는 애플리케이션에 어떤 일이 일어나게 할 때 사용됩니다. 대부분의 경우는 상태를 끌어올리는 것으로 해결이 됩니다. Ref 생성하기 React.createRef를 통해 생성하거나 useRef를 통해 생성할 수 있습니다. Ref에 접근하기 Ref attribute가 HTML element로 쓰였다면..

재조정 React가 비교 알고리즘을 만들 때 어떠한 방법을 채택했는지에 대한 설명입니다. Asnyc 하나의 트리를 가지고 다른 트리로 변환하기 위한 최소한의 연산 수를 구하는 알고리즘은 최첨단 알고리즘을 이용해도 n개의 트리에 대해 O(n3)의 복잡도를 가집니다. 이러한 연산은 너무 많은 연산이기 때문에, 2가지 가정을 추가하여 O(n)의 휴리스틱 알고리즘을 구현했습니다.. 서로 다른 두 엘리먼트는 서로 다른 트리를 만들어냅니다. 개발자가 key prop을 통해, 여러 렌더링 사이에서 어떤 자식 엘리먼트가 변경되면 안 되는지 표시해 줄 수 있습니다. 비교 알고리즘(Diffing Aligorithm) 두 개의 트리를 비교할 때 React는 root 엘리먼트부터 비교합니다. 이후 동작은 루트 엘리먼트의 타입..

React를 만들 때 JSX는 필수가 아닙니다. 특히 빌드 환경에서 컴파일 설정을 하고 싶지 않을 때 JSX 없이 React를 사용하는 것은 편합니다. 각 JSX 엘리먼트는 React.createElement(component, props, ...children)를 호출하기 위한 것입니다. 그래서 JSX로 할 수 있는 것들은 Javascript로도 할 수 있습니다. React를 사용할 때 JSX는 필수가 아닙니다. 빌드환경에서 컴파일 설정을 하고 싶지 않을 때 사용하면됩니다. jsx element → React.createElement(component, props, …children); class Hello extends React.Component { render() { return hello {th..