본문으로 바로가기


  WANNA REMEMBER  

📌 덜 이해하고 있었던 개념?  useRef 

- react hook의 일종

- ref 객체타입

- 용도 크게2가지

     1.  값저장, 조회, 수정 가능

            ✔️ React.MutableRefObject<제네릭> 타입이됨

            ✔️ ref객체.current의 값 수정가능

            ✔️ 예시 :   React.MutableRefObject<string>  

더보기
useRef는 일반적인 JS 객체. (heap 영역에 저장되는 데이터)
그래서 어플리케이션 종료 or 카비지 컬렉팅될 때까지 참조할 때마다 메모리 주소를 가지게 되고, 같은 메모리 주소를 가지기 때문에 === 연산이 항상 true를 반환하고, 값이 바뀌어도 리렌더링 되지 않음.?????????
(하지만 함수 컴포넌트 내부에 변수를 선언한다면, 렌더링 될 때마다 값이 초기화됨. (Bad side))

반면 useRef로 만들어진 객체는 React가 만든 전역 저장소에 저장?????????되기 때문에 함수를 재호출하더라도  마지막으로 업데이트한 current 값이 유지된다.

     2.  DOM 선택

            ✔️ React.RefObject<제너릭>타입이 됨

            ✔️ ref.current(참조하는 DOM)값 자체는 수정 불가

            ✔️ 단, ref.current.속성(DOM객체.속성)은 수정 가능.

            ✔️ 예시 :   React.RefObject<HTMLButtonElement>  

 

 

📌 reset.css 쓸 때는 불필요한 건 빼고, 꼭 필요한 것만 넣자!

오늘 font를 전체적으로 적용하려고 보니 reset.css에서 font:inherit 설정을 하고 있어서

header와 footer에만 font 가 적용되지 않는 일이 있었다. font:inherit 근데 왜 필요하누.....