글을 쓰게 된 계기
리액트를 공부하는데 봐도 봐도 계속 잊혀지는것 같아서 한 번 내 머리속도 정리하고싶어서 필요한 부분만 정리해서 올린다.
리액트 이벤트
리액트의 이벤트는 웹 브라우저의 네이티브 이벤트 인터페이스와 동일하기때문에 사용법이 많이 유사하다. 다만, HTML과 달리 카멜 표기법으로 작성해야한다던가, 자바스크립트 코드를 전달하는것이 아닌 함수 형태의 값을 전달한다던가, 직접 만든 컴포넌트에는 이벤트를 자체적으로 설정할 수 없다는 차이점은 존재한다.
React는 W3C에 따라 합성 이벤트를 정의해 브라우저 호환에 관해서는 걱정하지 않아도 된다. 다만, 고유 이벤트와 동작이 100% 동일하지는 않다. 리액트의 이벤트 시스텝은 웹 브라우저의 HTML 이벤트와 인터페이스가 동일하기때문에 사용법은 비슷하다.
합성 이벤트
이벤트 객체또한 웹 브라우저의 네이티브 이벤트를 감싸는 래퍼 객체다. 이벤트 핸들러는 모든 브라우저에서 이벤트를 동일하게 처리하기 위해 합성 이벤트 객체를 전달받는다. 순수 자바스크립트에서 HTML 이벤트를 다룰 때와 똑같이 사용하면된다.
하지만 합성 이벤트는 브라우저 고유 이벤트에 직접 대응되지는 않는다. 예를 들어 onMouseLeave는 브라우저의 mouseout을 가리킨다. 즉, 이름이 다를 수 도 있다는 말이다.
또한, 네이티브 이벤트와 달리 합성 이벤트는 이벤트가 끝나고나면 초기화되어 정보를 참조할 수 없어 이벤트 객체를 비동기적으로 참조하고싶을때 e.persist()를 함께 써주어야한다.
Hooks
- state 관리 : useState (), useReducer()
- 메모이제이션 : useRef(), useMemo(), useCallback()
- LifeCycle 관리 : useEffect(), useLayoutEffect()
- Context : useContext()
useState
- state: 컴포넌트가 가질 수 있는 상태
- useState: 상태를 가지고 업데이트시켜줄 수 있는 함수
- setState : 상태를 업데이트 시켜주면 화면에 다시 렌더링이 된다.
useReducer
- 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있다.
- reducer란 현재 상태와 액션 객체를 파라미터로 받아와 새로운 상태를 반환해주는 함수. (이 반환값은 곧 컴포넌트가 지닐 새로운 상태)
side-effect?
A "side effect" is anything that affects something outside the scope of the function being executed.
부수효과란 함수의 스코프 밖에서 일어나지만(3rd party) 영향을 미치는 모든 것을 의미한다.
그래서 life-cycle 메서드가 필요한 이유도 이런 부수효과를 줄이기 위해서이고 이 부수효과에는 네트워크 통신, DOM, 이벤트 및 에러처리가 포함되었다.
useEffect(() => {},[value])
- Lifecycle 관리
- 컴포넌트들이 render와 paint 된 후에 비동기적으로 실행된다.
- paint 된 후에 실행되어 dom에 영향을 주는 코드가 있는 경우 화면의 깜빡임을 보게됨.
- [dependency array] => 화면에 첫 렌더링이 될 때, value 값이 바뀔때만 실행.
- clean up : 구독을 취소시키는 역할 정리 작업. -> return 값으로 구독 해지.
useLayoutEffect(() => {}, [value])
- useEffect와 달리 컴포너트들이 render된 후 실행되고 그 후에 paint가 동기적으로 실행됨.
- paint가 되기전에 싱행되기때문에 dom을 조작하는 코드가 존재하더라도 깜빡임을 경험하지 않음 (즉, 내부 코드가 모두 실행된 후에 페인팅작업을 거쳐 오래 걸림)
컴포넌트 메모리의 문제점
- 상위 컴포넌트가 렌더링 될 때 하위 컴포넌트에 전달되는 props가 동일한 경우
1. 불필요한 컴포넌트 렌더링 이슈
- 상태는 훅에 의해 기억되어 관리되지만 props는 매번 재정의된다.
2. 참조 동일성
- 컴포넌트 업데이트 조건 중 하나는 새로운 props를 전달하는 것이다.
- 함수 컴포넌트 내부에 정의된 함수는 컴포넌트가 업데이트 될 때마다 초기화되어 새로운 함수가 정의된다.
문제 해결 방법 : 메모이제이션
- 하위 컴포넌트에 전달되는 함수를 기억하면 재렌더링시 기억된 함수를 사용해 문제 해결가능.
useRef
선언적으로 해결할 수 있는 문제에는 사용하지않고, 꼭 DOM을 직접 건드려야할 때 사용한다. 즉, 일반적인 데이터 플로우에서 벗어나 자식을 직접적으로 수정하는 경우 ref를 사용할 수 있다. 예를 들어 포커스, 애니메이션을 관리할 때 사용할 수 있다.
const ref = useRef(value);
// {current:value}- current에 넘겨준 값을 저장하고 ref 객체를 반환한다.
- ref 객체는 unmount 될 때까지 렌더링되어도 초기값을 유지한다.
사용하는 곳
- 저장공간
- state를 변화하면 자연스럽게 렌더링이 되는데, 컴포넌트 내부 변수들을 모두 초기화시킨다.
- ref값이 변경되어도 렌더링이 일어나지 않고, state가 변화된다면 렌더링은 되지만 ref값은 유지한다. (변경시 렌더링 다루지 않을 때 정말 편리하다)
2. DOM 요소에 직접적 접근
-
접근하고자 하는 요소 태그에 넣어주면 바로 접근가능함.
-
React.useState => 함수 컴포넌트 내부에서 특정 값 지속적으로 참조 (렌더링 발생)
-
React.ref => 컴포넌트 렌더링에 영향을 주지 않는 값 참조 목적
-
React.useRef => 현재 값이 변경되어도 컴포넌트가 다시 렌더링되지 않아 앱의 성능을 최적화시킬 수 있다 (불필요한 렌더링 방지)
useMemo
- 메모이제이션된 값을 반환해 모든 렌더링 시의 고비용 계산을 방지하게 해준다.
- JS 데이터타입을 기억해야할 때 사용한다.
- 컴포넌트는 재렌더링되지만 기억된 값이 반환되므로 성능 저하 문제 해결 가능.
useCallback
- 메모이제이션된 콜백을 반환해 불필요한 렌더링을 방지한다.
- 기억해야할 데이터 타입이 함수인 경우 사용한다.
useRef vs useMemo vs useCallback
- useRef -> 특정 값을 기억
- useMemo -> 복잡한 함수의 return 값을 기억(특정 value 재사용)
- useCallback -> 특정 함수 재사용
useContext
- HOC를 사용하지 않고도 context의 value를 공급받을 수 있어 편리하다.
- 가장 가까운 공급자의 value를 전달받괴된다.
결말
Hooks 함수가 너무 헷갈리지만 계속 사용해보면서 확장해나가며 사용해봐야겠다.
Word Cited
