Virtual DOM은 DOM의 가벼운 사본이라 생각할 수 있습니다. DOM은 한 부분이 바뀌면 모든 부분을 리렌더링 하지만 Virtual DOM은 바뀐 부분만 비교해서 그 부분만 렌더링합니다.
용어 정리
DOM - < body > 같은 태그들에 접근하고 조작할 수 있도록 태그들을 트리 구조로 만든 객체 모델
Redux의 기본 개념 : 세 가지 원칙
1. Single source of truth
동일한 데이터는 항상 같은 곳에서 가지고 온다.
즉, 스토어라는 하나뿐인 데이터 공간이 있다는 의미이다.
2. State is read-only
리액트에서는 setState 메소드를 활용해야만 상태 변경이 가능하다.
리덕스에서도 액션이라는 객체를 통해서만 상태를 변경할 수 있다.
3. Changes are made with pure functions
변경은 순수함수로만 가능하다.
리듀서와 연관되는 개념이다.
Store(스토어) – Action(액션) – Reducer(리듀서)
순수함수
동일한 인자가 들어갈 경우 항상 같은 값이 나와야 한다.
return 값으로만 소통한다.
ex) 전달인자 (2,3)
return a + b : 순수함수
return a + b + c : 순수함수 아님 -> c에 의해 결과가 달라지기 때문에 순수함수가 아님
제어 컴포넌트 - 사용자의 입력한 값을 useState()로 값을 저장하는 방식, 사용자가 입력한 값이 실시간으로 변하여 항상 최신값을 유지한다.
비제어 컴포넌트 - ref를 이용해 관리, 사용자가 실행해야 값을 변화 시키거나 리렌더링을 일으킨다.
그럼 제어 컴포넌트는 언제 사용할까?
유효성 검사
유효한 데이터가 없는 경우 전송 불가 표시
신용카드와 같은 특정 입력 방식 적용하기
제어 컴포넌트를 사용할 때 문제점?
불필요한 리렌더링, 불필요한 api요청으로 인한 자원 낭비 문제.
이를 막기 위해 디바운싱을 사용할 수 있다.
디바운싱 - 연속적으로 호출되는 함수들 중 마지막 함수(또는 제일 처음)만 호출하도록 하는 것
클래스 형태 컴포넌트에서만 할 수 있었던 state관리나 라이프사이클 등을 함수 형태 컴포넌트에서도 사용할 수 있게 만들어주는 기능입니다.
장점
코드가 간결해진다.
로직의 재사용 가능, 관리가 쉽다
로직을 한 곳으로 모을수 있어서 가독성이 좋다
useEffect, useState등이 있다.
리액트는 자바스크립트 라이브러리로써 싱글 페이지 애플리케이션의 UI(User Interface)를 만드는데 중점을 둔 라이브러리입니다. 리액트는 5개의 특징이 있습니다.
가상돔, 단방향 데이터 바인딩, JSX문법, 선언형 프로그래밍, 컴포넌트 기반이 있습니다.
단방향 데이터 바인딩 - 하나의 Watcher가 자바스크립트의 데이터 갱신을 감지하여 사용자의 UI 데이터를 갱신. 사용자가 UI를 통한 자바스크립트의 데이터를 갱신할 때는, 이벤트를 통해 갱신
양방향 데이터 바인딩 - 사용자 UI의 데이터 변경을 감시하는 Watcher와 자바스크립트 데이터의 변경을 감시하는 Watcher가 UI와 자바스크립트 데이터를 자동으로 동기화 시켜주는 방식
1. useMemo - 리턴되는 값을 Memoization 하는데 사용한다.
Memoization - 이미 계산 해 본 연산 결과를 기억 해 두었다가 동일한 계산을 시키면 다시 연산하지 않고 기억 해 두었던 데이터를 반환 시키는 방법. 시험을 볼 때 이미 풀어본 문제는 다시 풀어보지 않아도 답을 알고 있는 것과 비슷함.
사용 방법
const newRusult = useMemo(콜백함수,[변화 할 값])
변화 할 값이 변경될때만 콜백 함수가 다시 실행됩니다. 변화 할 값이 변경되지 않으면 함수가 호출한다 해도 변경이 없다 판단되어 이전에 호출한 똑같은 값을 반환합니다. 리턴 값은 함수가 아닌 값을 리턴한다.
2. React.memo - props로 동일하다면 Memoization을 사용합니다.
사용 방법
const newComponent = React.memo( (props)=> { }, areEqual)
컴포넌트를 만드는 콜백함수를 React.memo로 감싸 고차 컴포넌트를 만듭니다.
두번째 인자로 areEqual을 받을 수 있습니다. 첫번째 인자와 두번째 인자를 비교해 동일하다면 true 다르다면 false를 반환합니다. areEqual 함수로 얕은 비교에서의 문제를 막을 수 있다.
고차 컴포넌트 - 컴포넌트를 가져와 새 컴포넌트를 반환하는 함수. 예를 들면 가죽을 주면 구두를 만들어 준다 라는 의미
3. useCallback - 함수 선언을 Memoization 하는데 사용된다.
4. props로 객체를 넘겨줄 경우 변형하지말고 넘겨주기
5. 컴포넌트를 매핑할 때 key값으로 index를 사용하지 않는다.
6. useState의 함수형 업데이트
7. Input에 onChange 최적화
클래스형 컴포넌트 - state, lifeCycle 관련 기능 사용 가능, 메모리 자원을 더 사용한다.
함수형 컴포넌트 - state, lifeCycle 관련 기능 사용 불가능 [Hook을 통해 해결 됨]
메모리 자원을 덜 사용한다.
클래스형 컴포넌트
import React, {Component} from 'react';
class App extends Component { // class 키워드 필요, Component로 상속을 받아야한다.
render() { // render() 메소드가 반드시 있어야한다.
const name = 'react';
return <div className="react">{name}</div>
}
}
export default App;
함수형 컴포넌트
import React from 'react';
import './App.css';
function App() {
const name = 'react';
return <div className = "react">{name}</div>
}
export default App;