진행중인 프로젝트 특성상 MVP를 빠르게 개발해야해서
현재 FrontEnd 기능을 개발하면서 배운 것들을 정리한다.
px,em,rem 의 차이
- px : Pixel, 디지털 화면에 표시되는 가장 작은단위, 고정크기
- em : 부모 요소의 글꼴 크기에 상대적인 단위
<div style ={{font-size : "16px"}}>
<p style ={{font-size : "2em"}}></p>
</div>
위와 같다면 p 태그의 font-size는 부모 요소인 div태그의 font-size의 2배가 된다.
즉 32px.
- rem : root + em, HTML의 문서 최상단 루트 요소의 글꼴 크기에 기반,
이걸 어떻게 활용할까?
rem을 잘 활용한다면 일관된 스타일링이 가능하다.
root 요소에서 font-size를 16px로 설정해놓고
Title 은 2rem, body는 1rem, subtitle은 0.5 rem 등등 style Guide에 따른
통일된 크기로 요소를 구성할 수 있다.
vh와 vh
- vw : Viewport width, 1vw는 뷰포트 넓이의 1%.
- vh : Viewport height.1vw는 뷰포트 높이의 1%.
만약 사용자가 보는 화면 전체를 채우고 싶다면 100vw, 100vh로 설정해야한다.
이 두 요소 역시 반응형 디자인 구성에 유용하게 쓰일 수 있다.
useRef Hook
구현하려는 기능들이 Pixel 단위로 상호작용이 일어나야 해서
useRef 를 활용하여 통제하고 있다.
useState vs useRef
- useState
컴포넌트 상태를 관리할때 사용하며, 상태가 변할때마다 컴포넌트를 다시 리렌더링하게 된다.
- useRef
이전값과 새로운 값을 연결, 렌더링과 무관하게 값이 유지되어야할 때 사용
공식문서에선 렌더링에 필요하지 않은 값을 참조할 수 있는 Hook 이라고 말한다.
처음에 기능을 구현할때 512 * 512 개의 픽셀의 각 색상 상태 정보, 소유자 정보를
상태를 관리하는게 가능 할까...? 라는 의문이 있었는데
역시나 그 의문이 맞았다.
useRef를 쓴 이유
- 불필요한 리렌더링 방지 및 성능 유지 목적
- 리액트가 canvas의 픽셀단위 그리기 로직을 통제하지 않고 canvas DOM 요소에 직접 접근
1. 불필요한 리렌더링 방지 및 성능 유지 목적
const [viewPos, setViewPos] = useState({ x: 0, y: 0 });
const handleMouseMove = (e) => {
if (isPanning) {
// 마우스가 1px 움직일 때마다 state가 변경됨
setViewPos({ x: ..., y: ... });
}
};const viewPosRef = useRef({ x: 0, y: 0 });
const handleMouseMove = (e) => {
if (isPanning) {
viewPosRef.current = { x: ..., y: ... };
draw();
}
};만약 Panning 을 위해 사용자가 마우스를 조금만 드래그를 해도
handleMouseMove 이벤트 함수가 1초에 수십,수백번 발생하게 된다.
이러면 useState 같은 경우 안그래도 무거운 리렌더링 작업을 그대로 실행하여 성능저하를 유발.
이를 useRef로 구현하여 필요할때만 draw() 함수를 호출하여
불필요한 전체 컴포넌트 리렌더링을 막아서 성능을 유지할 수 있다.
2. 리액트가 canvas의 픽셀단위 그리기 로직을 통제하지 않고 canvas DOM 요소에 직접 접근
canvas 태그의 특성상 getContext등의 함수는 직접 해당 DOM 요소에 직접 접근해야한다.
react에서는 이 DOM 요소에 접근할 수 있는 방법이 바로 useRef.
