React/패스트캠퍼스9 [React - 기초] Reconciliation Reconcilation? React를 사용할 때, `render() 함수는 React 엘리먼트 트리를 만드는 것이다.' 라고 생각할 수 있다. state나 props가 갱신되면 render() 함수는 새로운 React 엘리먼트 트리를 반환한다. 이때 React가 가장 효과적으로 UI를 갱신해서 트리를 만드는지 알아보자! 여기서 사용된 것이 Reconciliation (재조정) 알고리즘이다. 하나의 트리를 가지고 다른 트리로 변환하기 위한 최소한의 연산 수를 구하는 알고리즘 문제를 풀기 위한 일반적인 해결책들이 있다. 하지만 이런 알고리즘도 n개의 엘리먼트가 있는 트리에 대해 O(n3)의 복잡도를 가진다. 1000개의 엘리먼트를 그리기 위해서 10억 번의 비교 연산을 수행해야 한다는 뜻이다. 그래서 Re.. 2022. 3. 21. [React - 기초] PropTypes 1. PropTypes ? Props의 타입을 확인하기 위한 도구이다. 애플리케이션 개발을 진행하다가 점차 규모가 커지면서 타입 확인을 통해서 버그를 잡을 경우가 있다. Flow 또는 TypeScript 같은 JavaScription 도구를 사용할 수 있지만 React에 내장된 타입 확인 기능이 PropTypes이다. 성능상의 이유로 개발 모드에서만 확인할 수 있다. 2. 사용하기 하나의 자식만 요구하기 import PropTypes from 'prop-types'; class MyComponent extends React.Component { render() { // 이것은 반드시 하나의 엘리먼트여야 합니다. 아니라면, 경고(warn)가 일어날 것입니다. const children = this.prop.. 2022. 3. 19. [React - 기초] Render Props 1. Render Props 재사용의 한 방법이다. ( Composition, HOC, render props ... ) React 컴포넌트 간에 코드를 공유하기 위해 함수 props를 이용하는 간단한 기능이다. 2. 사용 이유 class MouseTracker extends React.Component { constructor(props) { super(props); this.handleMouseMove = this.handleMouseMove.bind(this); this.state = { x: 0, y: 0 }; } handleMouseMove(event) { this.setState({ x: event.clientX, y: event.clientY }); } render() { return ( M.. 2022. 3. 18. [React - 기초] Portals 1. Portals? DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링 하는 최고의 방법이다. 일반적으로 컴포넌트를 렌더링 메서드에서 엘리먼트를 반환할 때 부모 노드에서 가장 가까운 자식으로 DOM이 마운트 된다. 그런데 가끔 DOM의 다른 위치에서 자식을 삽입하는 것이 유용할 수 있다. 예를 들어, overflow: hidden이나 z-index가 있는 경우 시각적으로 자식을 "튀어나오도록" 보여야 하는 경우가 있다. 다이얼로그, 툴팁 같은 것 말이다. 2. 필요성 import React, { useState } from "react"; export default function Portals(props) { const [isOpen, setIsOpen] = useState(false); re.. 2022. 3. 17. [React - 기초] Memoization 1. Memoization ? Memoization은 컴퓨터 프로그램이 동일한 계산을 반복해야할 때, 이전 계산한 값을 메모리에 저장함으로 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다. 2. React의 Memoization ? 1. memo 동일한 props로 렌더링을 한다면, React.memo를 사용하면 성능 향상을 누릴 수 있다. memo를 사용하면 React는 컴포넌트를 렌더링하지 않고, 마지막으로 렌더링된 결과를 재사용한다. import React, { useState, useEffect } from "react"; import MemoItem from "./MemoItem"; const commentList = [ { title: "comment1", con.. 2022. 3. 15. [React - 기초] Hooks 1. Hooks? Class 컴포넌트의 단점을 보완하면서 라이프사이클 등과 관련된 함수를 재사용 가능하게 함 Class 컴포넌트의 단점으론 1. 컴포넌트 사이에서 상태 로직을 재사용하기 어렵다. Class 컴포넌트의 로직을 재사용하는 방법은 불가능한 것은 아니다. 하지만 render props, 고차 컴포넌트 같은 패턴을 사용해서 해결해야 했다. 그래서 Hook은 좀 더 편하게 상태 로직을 재사용할 수 있도록 도와준다. 2. 복잡한 컴포넌트들은 이해하기 어렵다. 데이터를 가지고 오는 작업을 componentDidMount에서 일어날 때가 있고 componentDidUpdate에서 일어날 때가 있었다. 즉, 관련이 있는 코드는 분리되지만, 관련 없는 코드들은 단일 메서드로 결합되어있다. 그것으로 인해서 버.. 2022. 3. 10. [React - 기초] React와 리랜더링 1. JavaScript와 React의 리 랜더링 바닐라 JS에서는 변경이 일어나면 전체 Element를 다시 랜더링 시킵니다. 하지만 React에서는 변경이 일어나는 부분만 다시 랜더링 시킨다. 2. React의 랜더링 React 앨리 먼트는 불변 객체 (immutable)이다. React에게 변경하고 싶은 내용을 전달하기만 할 뿐이고, 실제 변경에 대한 판단, 반영은 React가 알아서 한다. 변경되는 방법으론 1. 앨리 먼트 타입이 바뀌면? => 이전 앨리 먼트는 버리고 새로그린다. 2. 앨리먼트 타입이 같다면? => (key를 먼저 비교하교), props를 비교해서 변경사항을 반영한다. ※ 불변 객체? 말 그대로 변하지 않는 객체이다. 2022. 3. 9. [React - 기초] JSX, Babel 1. JSX 문자도 HTML도 아닌 JavaScript의 확장 문법 const text = "Hello, world!"; const textClass = "title" const element = {text} React 개발을할 때 JSX는 필수가 아니다. 하지만 시각적으로 더 도움이 된다. 2. Babel JavaScript Complier로 React 언어를 JavaScript가 이해할 수 있게 해석해주는 프로그램이다. const text = "Hello, world!"; const textClass = "title" const element = {text} = // 바벨처리 => const text = "Hello, world!"; const textClass = "title"; const elem.. 2022. 3. 8. [React - 기초] DOM, Element 1. DOM? Document Object Model의 약자이며, XML이나, HTML 문서에 접근하기 위한 인터페이스라고 보면 된다. 위와 같은 계층 구조로 나타나 있으며, 자바스크립트를 사용해서 문서의 요소를 변경, 수정, 삭제할 수 있다. 2. Element html 태그를 사용하지 않고, 자바스크립트로 직접 만들 수 있다. 이것을 React에서 어떤 방식으로 사용할까? 3. React에서의 Element 다루기 보는 바와 같이 React에서도 Element를 생성, 수정을 할 수 있다. 2022. 3. 8. 이전 1 다음 반응형
