akjfal

성능최적화 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변수..

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