목록React (12)

SUIN

React element 랜더링 자세히 알아보기

모든 것은 trade-off 리액트가 랜더링을 최적화하지만 알고리즘이 비효율적이거나 최적화되지 않았다면 오히려 더 안 좋을 수 있다. https://ko.reactjs.org/docs/rendering-elements.html 엘리먼트 렌더링 – React A JavaScript library for building user interfaces ko.reactjs.org React element는 불변 객체(immutable)이다 불변 객체란? - 변하지 않는 객체 - 우리는 그저 React.DOM.render로 전달할 뿐 변경 판단 및 반영은 리액트가 한다. - 엘리먼트를 생성한 이후에는 해당 엘리먼트의 자식이나 속성을 변경할 수 없다 https://ko.reactjs.org/docs/reconcili..
React 2022. 2. 7. 16:48
[React] Vanilla JS 와 React의 랜더링, 리액트 리랜더링 장점 알아보기

- Vanilla js - 변경으로 인해서 element를 계속 다시 그린다 - React - 변경된 부분만 다시 그린다. 예를 들어보자 Vanilla js 랜덤 숫자 돌려보기 React 랜덤 숫자 돌려보기 Vanilla.js 랜더링 - 버튼 element가 새로그려지기 때문에 포커스를 잃게 된다. React 랜더링 - element가 새로 만들어지는 것이 아니라 글자만 계속 변경되고 있다 React 리 랜더링의 장점을 무엇인가 - 여러 개의 element들이 있을 때는 변경점이 있을 때마다 element가 사라졌다가 바뀌게 된다면 다른 element의 배치에 영향을 주게 된다 프런트의 최적화를 위해 Reflow, RePaint에 있어서 React는 이점을 가질 수 있을 것이다 (부모에게서 전파가 되지 ..
React 2022. 2. 4. 16:41
[React] React Hook

앞의 포스팅에서 클래스과 함수  컴포넌트의 생명주기에 대하여 알아보았다 https://suinchoi.tistory.com/40 [React] 컴포넌트 생명주기 / Class LifeCycle컴포넌트 생명주기( React LifeCycle) 이란? 개발을 할때 어떤 타이밍에 어떤 순차적으로 동작들이 일어나는가 , 즉 화면에 컴포넌트가 나타났다가 사라지기 까지의 모든 과정 을 라이프 사이클이suinchoi.tistory.com React Hook Hook은 React 버전 16.8 버전부터 React 요소로 새로 추가되었다 Hook을 이용하여 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있다 클래스 컴포넌트에서는 훅이 동작하..
React 2021. 11. 28. 15:56
[React] 컴포넌트 생명주기 / 클래스 , 함수 LifeCycle

컴포넌트 생명주기( React LifeCycle) 이란?개발을 할때  어떤 타이밍에 어떤 순차적으로 동작들이 일어나는가 , 즉 화면에 컴포넌트가 나타났다가 사라지기 까지의 모든 과정 을 라이프 사이클이라 하며 생명주기를 통해 불필요한 업데이트를 방지할 수 있다 클래스 컴포넌트의 경우 특정 라이프 사이클 메소드를 사용하며 함수 컴포넌트에서는 Hook을 사용하여 클래스 component 의 lifeCycle처럼 관리가 가능하다   클래스 Component  Life Cycle 그때그때 어떤 변경에 따라 그려질때 마다 자기가 선언해놓은 메소드를 사용한다.   constructor():  컴포넌트가 마운트되기 전에 호출되며 메서드를 바인딩하거나 state를 초기화하는 작업이 없다면, 해당..
React 2021. 11. 28. 15:54
이전 Prev 1 2 Next 다음