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

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

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 ) } 단축 문법 를 사..