신규피쳐들을 개발중이다.
특별히 기록할 작업내용이 없어서,, 개발하면서 들었던 잡생각들을 짧게 적어본다.
퍼블리셔와 프론트엔드개발자의 구분을 두진 않는다.
프론트엔드개발자라면 마크업도 당연히 할줄 알아야 된다고 생각한다.
하지만 아무래도 회사에 퍼블리셔 포지션이 있는만큼 덜 신경을 쓰게 된다.
그래서인지 UI와 관련된 작업은 거부감도 조금 드는 것 같고,,
일단 수학적인 계산이 들어가니 머리가 너무 아프다.
Markup 관련 공부도 소홀히하지않도록 노력해야겠다.
리액트는 자유도가 참 높은것 같다.
그래서인지 결정장애가 나는 매번 부족하다는 생각을 많이 하게된다.
언제 render함수로? Component로?
답은없다. 개발자 스타일에따라 다르지만, 내 기준은 이렇다.
Render
- 복잡한 조건부 렌더링 로직을 분리를 위해 (조건이 타입이 3개 이상일 것)
- 표현되는 data가 3개 이하일 때,
Component
- State를 가질 때
- 표현되는 data가 3개 초과일 때
- 별도의 데이터를 사용할 때 (Store 라던가 혹은 API를 호출)
- 재사용이 가능할 땐 별도의 파일로, 단순 로직 분리일땐 부모 컴포넌트 파일내에 정의
useLongClick
모바일에서 몇초간 눌렀을때 팝업을 띄우는 요구사항이 있었다.
비슷한 기능이 필요할 것 같아 customHook 을 만들었다.
https://velog.io/@ginameee/Custom-useLongClick
컴포넌트도 결국 함수다.
useEffect든 useMemo든 결국 컴포넌트(함수)가 다시 호출이 되어야 동작한다.
어쨌든 컴포넌트 함수가 다시 실행은 되고, 그 안에서 유지할 애들은 유지하고 동작할 애들은 동작하는 방식이다.
이 부분을 간과하고 useRef의 변화를 useEffect가 감시할 수 있다는 안일한 생각을 했다.
useEffect로 useRef에 Element가 세팅된 시점에 특정 동작을 수행하고 싶었다.
(useRef로 DOM을 참조할 때, 나중에 DOM이 생성되면서 useRef에 element가 세팅된다는 점에서,,,)
그러나, useRef는 리-랜더링에 영향을 주지도, 받지도않는 변수다.
useRef의 변경은 함수컴포넌트의 재실행(리-렌더링)에 아무런 영향을 미치지 않는다.
따라서 useRef을 감시하는 useEffect 또한 당연히 동작하지 않는다.
위에서 말했던, useRef의 DOM값이 세팅되는 시점을 useEffect를 통해 알고싶다면, state를 한번 거치고, 그 state 값을 useEffect를 통해 감시해야 한다.
// ...
const msgRef = useRef<any>(null);
const [msgEl, setMsgEl] = useState<HTMLElement | null>(msgRef.current);
useLayoutEffect(() => {
setMsgEl(msgRef.current);
}, []);
useEffect(() => {
// do something with DOM....
}, [msgEl])
// ...
