programming study/React (37) 썸네일형 리스트형 Virtual DOM 본 내용은 10분 테코톡 지그님의 강의를 토대로 작성하였습니다. 1. 브라우저의 동작 브라우저 렌더링 과정 DOM tree 생성 -> render tree 생성 -> Layout (reflow) -> Paint (repaint) DOM 조작의 비효율성 어떤 상호작용에 의해 DOM에 변화가 발생하면 render tree가 그때마다 재생성된다. 변화가 발생하면 모든 요소들의 스타일을 다시 계산하고 Layout (reflow) 과정을 거쳐 repaint하는 과정까지 반복 좋아요를 누르거나, 장바구니 목록에서 상품을 삭제하거나, 댓글을 남기면 전체 노드들이 처음부터 다시 그려진다. 2. Virtual DOM의 등장 Virtual DOM의 등장 SPA를 많이 사용하면서, DOM tree를 즉각적으로 변경할 상황이.. Hooks, useState, useEffect 정리 1. Hooks Hooks는 사용하기 위해 react로부터 import 해야한다. 함수형 프로그래밍을 할 수 있다. componentDidMount 에서 이벤트 리스너를 설정, componentWillUnmount에서 cleanup 로직을 수행할 때 버그가 쉽게 발생하고 무결성을 해침 개념상 똑같은 effect라도 생명주기 메소드는 이를 분리하게 함 오히려 관련이 없는 로직을 모아 놓음 Hook을 통해 서로 비슷한 것을 하는 작은 함수의 묶음으로 컴포넌트를 나눈다. Class의 this 키워드는 혼동을 일으키고 코드 재사용성과 구성을 어렵게 함 Hook은 Class없이 React 기능을 사용하는 방법을 제시 React에서는 기본 내장 Hook을 제공한다. custom hook을 만들기도 가능 JavaSc.. [노마드 코더] 리액트 Hooks 10분만에 사용법 배우기 본 내용은 해당 강의 토대로 작성 1. Hooks? functional component에서 state를 가질 수 있게 한다. 앱을 리액트 훅으로 만든다면, class component, did mount, render 등을 안해도 된다. functional programming 스타일로 작성할 수 있다. 사용할 hooks를 react로부터 import하여 사용한다. 2. useState class component의 state 관리 vs. function component의 state 관리 (useState) class Component ... class App extends Component { state = { count: 0 } modify = (n) => { this.setState({ coun.. 엘리먼트 렌더링 엘리먼트 렌더링 화면의 가장 작은 단위 화면에 표시할 내용을 기술 일반 객체 React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트 컴포넌트와 엘리먼트는 다른 것이다. const element = hello world DOM에 엘리먼트 렌더링하기 루트 DOM 노드 안에 들어가는 모든 엘리먼트를 React DOM에서 관리 일반적으로 React 애플리케이션은 하나의 루트 DOM으로 이루어짐 많은 수의 독립된 DOM 루트 노드가 있을 수 있다. 렌더링 된 엘리먼트 업데이트 하기 React 엘리먼트는 불변 객체 엘리먼트 생성 후 해당 엘리먼트의 자식이나 속성을 변경 불가 특정 시점의 UI를 보여준다. UI를 업데이트 하는 유일한 방법 새로운 엘리먼트를 생성한다. ReactDOM.render()로 .. JSX JSX JavaScript를 확장한 문법 React element를 생성 문자열도 HTML도 아니다. 태그 문법을 사용하나 다른 점들이 있다. 1. JSX에 표현식 포함하기 const name = 'greedy siru'; const element = Hello, ReactDOM.render( element, document.getElementById('root') ) 중괄호 안에 JavaScript 표현식을 넣을 수 있다. 수식, 함수 등 사용할 수 있다. 2. JSX는 표현식이다 컴파일이 끝나면 JSX 표현식이 정규 JavaScript 함수 호출이되고 JavaScript 객체로 인식된다. if, for에 사용할 수 있다. 변수에 할당, 인자, 함수로부터 반환이 가능하다. 3. JSX 속성 정의 con.. 이전 1 2 3 4 5 다음