akjfal

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

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..

JSX 이해하기 JSX는 React.createElement(component, props, …children) 함수에 대한 문법적 설탕을 제공합니다. Click 는 아래와 같이 컴파일됩니다. React.createElement(MyButton, {color: 'blue', shadowSize: 2}, 'Click') React Element의 타입 지정하기 JSX 태그의 첫 부분은 React Element의 타입을 결정합니다. 대문자로 시작하는 JSX 태그는 스코프 내에 존재하는 변수를 참조합니다. React가 스코프 내에 존재해야합니다. JSX 코드와 같은 스코프 내에 존재해야 해서 다른 파일에 존재한다면 꼭 import 해야 합니다. 단 JavaScript 번들러가 아니라 태그를 통해 React를 ..

다른 라이브러리와 통합하기 다른 라이브러리와 통합하기 – React A JavaScript library for building user interfaces ko.reactjs.org React는 어떤 웹 애플리케이션에서든 사용할 수 있다. 약간만 수정해주고, 상황에 맞게 사용한다면 React속에 다른 애플리케이션을 포함 할 수 있다. DOM 조작 플러그인과 통합하기 React에서는 외부 DOM에서 일어나는 변화를 인식하지 못합니다. 따라서 DOM을 조작하는 라이브러리를 사용한다면, React는 업데이트할 필요가 없는 빈 같은 요소를 렌더링하면 됩니다. 어떤 문제에 접근하는가 Jquery를 사용할 때 componentDidMount에서 이벤트를 등록하고 componentWillUnmount안에서 해제하는..

고차 컴포넌트 HOC는 컴포넌트 로직을 재사용하기 위한 React의 기술로, 구성적 특징에서 나오는 패턴이며, 컴포넌트를 가져와 새 컴포넌트를 반환하는 함수입니다. 컴포넌트는 props를 UI로 변환하는 반면, HOC는 컴포넌트를 새로운 컴포넌트로 변환합니다. 고차 컴포넌트는 Redux의 connect와 Relay의 createFragmentConmtainer와 같은 서드파티라이브러리에서 자주 볼 수 있습니다. Cross-Cutting Concerns에 HOC 사용하기 컴포넌트는 React의 코드 재사용의 기본 단위인데, 어떤 패턴은 기존 컴포넌트에 잘 적용되지 않을 수 있습니다. 해당 코드는 외부데이터를 구독해 댓글목록을 렌더링하는 CommentList라는 컴포넌트입니다. import React, { ..

Fragment Fragments – React A JavaScript library for building user interfaces ko.reactjs.org React에서 컴포넌트가 여러 엘리먼트를 반환하기 위해서는 하나의 노드로 묶어줘야 합니다. 이때 별도의 노드를 추가하지 않고 하는 방법이 Fragment입니다. 사용 이유 const Columns = () => { return ( 1 3 3 ) } 위와 같은 코드가 있다고 한다면 Columns 컴포넌트는 정상적으로 동작하지 않습니다. td가 바로 자식으로 나오지 않았기 때문입니다. 이러한 경우 Fragments를 사용해서 문제를 해결할 수 있습니다. const Columns = () => { return ( 1 3 3 ) } 단축 문법 를 사..

Ref 전달하기 Ref 전달하기 – React A JavaScript library for building user interfaces ko.reactjs.org Ref전달은 컴포넌트를 통해 자식 중 하나에 ref를 전달하는 기법입니다. 일반적으로 사용되지 않지만, 재사용이 가능한 컴포넌트에 유용할 수 있습니다. DOM에 refs 전달하기 button, input등의 ref를 조작할 필요가 있을 수 있습니다. 이러한 경우에는 const FancyButton = React.forwardRef((props, ref) => ( {props.children} )); const ref = React.creatRef(); click me React.createRef 를 통해서 React ref를 생성하고 ref변수..