23.02.10-23.02.16 주특기 숙련 주차 / React
React Hooks_useRef
돔요소에 접근할 수 있게 하는 훅
(ex. 접속하자마자 input으로 focusing 되는 네이버)
기존에는 document.getElementById , document.querySelector 를 이용해 돔 요소를 선택하였다.
const ref=useRef() 로 선언된 ref 값은 컴포넌트가 렌더링되어도 계속 유지(unmount 전까지) 되므로 다음과 같은 상황에서 쓰이게 된다.
-
저장할때
state와 비슷한 역할로 값을 저장하는 역할을 한다.
단, state는 변화가 일어날 시 렌더링이 일어나며 내부 변수가 초기화 되지만 ref에 저장한 값은 렌더링이 일어나지 않는다. -
DOM에 접근할때
네이버 초기 화면이 렌더링 될때 검색창에 커서가 자연스럽게 접근되어지듯 렌더링되자마자 특정 input값이 포커싱되어야 할때 사용된다.
예시
input에 들어있는 아이디가 포커싱되게 해줘!
→ input에 대한 reference가 필요!
→ idref(=input의).current(=현재값을).focus();(=focus하는 API)
React Hooks_useContext
props drilling을 방지한다.
단. Provider(부모, 할아버지 컴포넌트)의 value(name, id와 같은 데이터)가 달라진다면 자식컴포넌트도 전부 리렌더링된다.
ℹ️ 리렌더링의 조건
1. 컴포넌트의 state가 바뀌었을때
2. 컴포넌트의 props가 바뀌었을때
3. 부모컴포넌트가 리렌더링 된 자식컴포넌트
※ 렌더링이 자주 일어난다? = 비용(cost)이 많이 든다.
불필요한 렌더링을 줄이는 방법
아래 3가지 방법들은 값이 같아도 주소가 달라졌기 때문에 불필요한 렌더링을 줄이는데 사용 가능하다.
React Hooks_React.memo
component를 메모리에 저장하고 갖다 쓴다.
부모의 state 변경으로 props 변경이 되지않는 한, 리렌더링 되지않는다.
React Hooks_usecallback
함수를 메모리에 저장해 두고 가져다 쓴다.
함수형 컴포넌트를 사용할때, 전체가 리렌더링 되면 하위컴포넌트도 props가 변경되었다고 인식한다. 따라서 함수를 저장해두고 조건에 맞춰변경하고 싶을때 사용가능하다.
React Hooks_useMemo
value를 메모리에 저장한 후 가져다 쓴다. (함수의 리턴값 또는 값 자체)
함수내에서도 값에 의한 변경만 적용할 수 있으나 별도의 메모리 확보가 많아 정말 필요할때만 써야한다.
회고
한번에 많은 개념이 들어와 Hooks만 이해하는데도 강의에 비해 너무 오랜시간이 걸린듯하다.
예제보다 복잡한 코드에 사용될때는 개념을 다시 살펴보아야 할것으로 보인다..
