개발공부/React9 React에서 Virtual DOM과 재조정(Reconciliation) title: "React에서 Virtual DOM과 재조정(Reconciliation)"published: 2022-08-15T08:24:02.300Zdescription: React의 비교 알고리즘을 만들때 어떤 선택을 했는지 소개하는 글category: Reacttags:ReactFEVirtual DOM리액트는 Virtual DOM을 사용해 렌더링 최적화를 진행합니다.Virtual DOM은 실제 렌더링 되는 DOM의 구조와 똑같은 가상의 DOM입니다.하지만 실제 렌더링 되는 과정은 없고 트리 형태만 갖추고 있기 때문에 실제 DOM을 변경하는 것 보다 훨씬 적은 비용이 듭니다.렌더링하는 과정이 없기 때문이죠.React는 re-rendering 되기 직전의 Virtual DOM과 현재 변경된 Virtua.. 2024. 5. 25. React의 성능 최적화 1편 (useCallback, useMemo, React.memo) React 컴포넌트가 한 화면에 렌더링 되는게 많아지면 많아질수록 최종 렌더링 시간이 오래 걸리는건 팩트다. 보여주고 싶은 정보가 많을수록, 구조가 복잡할수록 렌더링할 컴포넌트는 많아진다. 더 많이 보여주고싶은 요구를 무시할수는 없으니, 더 효과적으로 렌더링 할 수 있는 방법을 찾아야한다. 그 첫번째 편으로 성능 최적화에 대한 Hooks, Api 를 알아보자! useCallback, useMemo, React.memo 위 3개 항목은 react에서 성능 최적화를 논할때 빠지지 않고 등장하는 react API 이다. useCallback 오늘 코드리뷰를 하다가 짧은 토글 코드에 useCallback 이 사용된 경우를 봤다. 사용되면 안되는 곳에 사용된 것 같은 느낌이 계속 들었는데, 동료가 관련 문서를 찾.. 2021. 8. 1. [React]-React로 사고하기 본문은 React Document 를 바탕으로 작성하였다. React로 사고하기 1단계 : UI를 컴포넌트 계층 구조로 나누기 어떤 것이 컴포넌트가 되어야 할지 어떻게 알 수 있을까? 새로운 함수나 객체를 만들 때 처럼 만들면 된다. 한 가지 테크닉은 단일 책임 원칙이다. 이는 하나의 컴포넌트는 한 가지 일을 하는게 이상적 이라는 원칙이다. 2단계 : React로 정적인 버전 만들기 컴포넌트 계층 구조가 만들어 졌으니 앱을 실제로 구현해 볼 시간이다. 가장 쉬운 방법은 데이터 모델을 가지고 UI만 렌더링 하고 아무런 동작도 없는 버전을 만들어 보는 것 이다. 정적 버전을 만드는 것은 생각은 적게 필요하지만 타이핑은 많이 필요로 하고, 동작들이 수행되는 상호작용을 만드는 것은 생각은 많이 필요하지만 타이핑.. 2020. 8. 18. [React]-리스트와 Key 본문 내용은 React Document 를 바탕으로 작성 되었다. 리스트와 Key function NumberList(props) { const numbers = props.numbers; const listItems = numbers.map((number) => {number} ); return ( {listItems} ); } const numbers = [1, 2, 3, 4, 5]; ReactDOM.render( , document.getElementById('root') );위와 같이 number list 를 표현 할 수 있다. 다만, 주의 해야 할 점은 위의 를 나타내는 부분에서 ... {number} ...위 와 같이 key값이 없이 작성을 하게 되면 각 항목에 key 를 넣어야.. 2020. 8. 18. [React]-조건부 렌더링 아래 글은 React Document 를 바탕으로 작성되었다. 조건부 렌더링 React에서는 원하는 동작을 캡슐화하는 컴포넌트를 만들 수 있다. 이렇게 하면 애플리케이션의 상태에 따라 컴포넌트 중 몇 개 만을 렌더링 할 수 있다. React에서 조건부 렌더링은 javaScript에서의 조건 처리와 같이 동작한다. if나 조건부 연산자(삼항 연산자) 와 같은 JavaScript 연산자를 현재 상태를 나타내는 엘리먼트를 만드는데 사용해라. 그러면 React는 현재 상태에 맞게 UI를 업데이트 할 것이다. 요약 : if나 삼항 연산자를 사용해 조건부 렌더링이 가능하다 이 컴포넌트는 현재 상태에 맞게 이나 을 렌더링 한다. class LoginControl extends React.Component { cons.. 2020. 8. 18. [React]-이벤트 처리하기 아래 글은 React Document 를 바탕으로 만들어 졌다. 이벤트 처리하기 React 엘리먼트에서 이벤트를 처리하는 방식은 DOM 엘리먼트에서 이벤트를 처리하는 방식과 매우 유사하다. 문법 차이는 아래와 같다. React의 이벤트는 소문자 대신 camelCase 를 사용한다. JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달한다. // normal DOM Activate Lasers // React Activate Lasers React 에서는 false를 반환해도 기본 동작을 방지할 수 없다. 반드시 preventDefault를 명시적으로 호출해야 한다. // HTML Click me // React function ActionLink() { function handleClick(e) .. 2020. 8. 18. 이전 1 2 다음
