Programming/React7 [React] React.memo() 참고문서 https://dmitripavlutin.com/use-react-memo-wisely 유튜브를 보거나 보고싶은 페이지 또는 어플이 있어서 다운로드를 받고 켰는데 UI 반응이 느리다면? 정말 이 페이지가 아니면 난 죽을꺼같다 정도가 아니면 창을 닫고 나간 경험이 한번 쯤은 있을거다. 인터넷 속도만 해도 예민한사람들은 10ms 차이에도 엄청난 차이를 느낀다. 이러한 반응속도를 줄이기 위해 React는 자체적으로 React.memo() 를 제공한다. 렌더링 결과를 메모이징(Memoizing) 함으로써 불필요한 리렌더링을 줄이는 것이다. React는 먼저 컴퍼넌트를 렌더링(rendering) 한 뒤, 이전 렌더된 결과와 비교하여 DOM 업데이트를 결정한다. 만약 렌더 결과가 이전과 다르다면, Reac.. 2022. 5. 10. [React] Redux 란 리덕스는 사용률이 가장 높은 상태관리 라이브러리다. 리덕스를 사용하면 컴포넌트의 상태 관련 로직들을 다른 파일들로 분리 시켜서 효율적으로 관리 할 수가 있다. 또한 컴포넌트끼리 상태를 공유하게 될 때 여러 컴포넌트를 거치지 않고도 손쉽게 상태 값을 전달 할 수 있다. Redux의 3가지 원칙 1. Single source of truth 동일한 데이터는 항상 같은 곳에서 가지고 온다. 즉, 스토어라는 하나뿐인 데이터 공간이 있다는 의미다. 2. State is read-only 리액트에서는 setState 메소드를 활용해야만 상태 변경이 가능하다. 리덕스에서도 액션이라는 객체를 통해서만 상태를 변경할 수 있다. 3. Changes are made with pure functions 변경은 순수함수로만 가.. 2022. 4. 6. [React] 상태 관리 도구(State Management Tools) 리액트와 같이 사용하는 상태 관리 도구는 Redux 이다. Redux를 배우기 전에 상태 관리 도구란 무엇이고 왜 필요한지에 대해 알아보자 상태 관리 도구(State Management Tools) 를 사용하는 이유 React 에서 State는 component 안에서 관리되는 것이다. import React, { useState } from 'react'; function Example() { const [count, setCount] = useState(0); return ( You clicked {count} times setCount(count + 1)}> Click me ); } 함수형 컴포넌트 상태 관리의 예시 코드 Component 간의 정보 공유 자식 컴포넌트들 간의 다이렉트 데이터 전달은.. 2022. 4. 6. [React] Effect Hook import React, { useState, useEffect } from 'react'; function Example() { const [count, setCount] = useState(0); // componentDidMount, componentDidUpdate와 같은 방식으로 useEffect(() => { // 브라우저 API를 이용하여 문서 타이틀을 업데이트 document.title = `You clicked ${count} times`; }); return ( You clicked {count} times setCount(count + 1)}> Click me ); } Effect Hook을 사용하면 함수 컴포넌트에서 side effect 를 수행할 수 있다. 데이터 가져오기, 구독설.. 2022. 4. 5. [React] State Hook * React 공식 홈페이지 글을 발췌하였습니다. Hook은 React 16.8에 새로 추가된 기능이며 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 렌더링 직후 작업을 설정하는 useEffect 등의 기능 등을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해준다. Hook 은 클래스형 컴포넌트에서는 동작하지 않는다. React 는 useState 같은 내장 Hook을 몇가지 제공하며 컴포넌트 간에 상태 관련 로직을 재사용하기 위해 직접 Hook을 만드는 것도 가능하다. 오늘은 State Hook에 대해서 정리해볼 것이다. State Hook import React, { useState } from 'react'; function Example().. 2022. 4. 5. [React] Component, props, state (부제: 함수형, 클래스형 컴포넌트) 그러면 React에서 데이터를 사용할 때 다루는 개념인 props와 state 에 대해서 알아보기에 앞서 Component의 역할과 개념은 무엇이고 클래스형 컴포넌트와 함수형 컴포넌트의 차이는 무엇인지 알아보자 Component 컴포넌트는 UI를 재사용 가능한 개별적인 여러 조각으로 나눈다. props라는 입력을 받은 후, 화면에 어떻게 표시되는지 기술하는 React 엘리먼트를 반환 엘리먼트는 일반 객체로 React 앱의 가장 작은 단위다. 엘리먼트는 컴포넌트의 구성요소이다. 컴포넌트를 선언하는 방식에는 함수형 컴포넌트와 클래스형 컴포넌트가 있다. Class Component class Welcome extends React.Component { render() { return Hello; } } 클래스.. 2022. 4. 4. 이전 1 2 다음
