akjfal

웹 컴포넌트 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..

Profiler API React 애플리케이션이 렌더링하는 빈도와 렌더링 비용을 측정합니다. 애플리케이션 느린부분들을 찾아내서 메모이제이션 같은 성능 최적화 방법을 통해 해결가능합니다. 사용법 Profiler는 id와 onRender 두가지 props를 요구합니다. ( ... } 복수로 사용하거나 하위 트리에 중첩으로도 사용 가능합니다.

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