미루고 미루던 TIL 시작글
강의를 들으면서 기억할 내용 기록
useEffect
React.useEffect(() => {}, [])처음에는 화살표함수를 무조건 실행하고, 뒤에 붙은 dependency array 가 변할 때만 화살표함수를 다시 실행한다.
componentDidUnmout시점에 쓰고싶은 것(ex 이벤트리스너 떼기)이 있다면 UseEffect 내부의 return에 넣으면 된다.
SPA vs MPA
이 개념에 이름이 있다는 것을 처음 알았다.
Single Page Application이 SPA다. 페이지마다 다른 html을 받아야 하고, 상태관리가 어려운 MPA 대신 SPA는 정적 자원을 한 번만 받아오면 된다.
SPA는 CSR, MPA는 SSR이라고 많이 엮어서 부르는 것 같지만 꼭 그런 것은 아니다. Next.js등에서 사용하는 Hydrate를 사용하면 SPA도 SSR할 수 있다.
props.match.params.[id]
react-router-dom과 url 파라미터를 사용할 때 파라미터 값을 받아오는 데에 사용하는 명령어인데, 한참 안 돼서 왜인지 봤더니 이 경우에는
<Route path="/cat/:cat_name" component={Cat}/>다음과 같이 component를 꼭 사용해야 한다.
component를 사용하지 않은 경우에는 react-router-dom의 useRouter를 사용하면 된다.
history
페이지 이동에 react-router-dom의 <Link/>를 사용해도 되지만, props.history.push("/route")와 같이 사용할 수 도 있다. 이 또한 params와 비슷하게 useHistory를 통해 사용도 가능하다.
props drilling
데이터 d를 출발 컴포넌트 A에서 도착 컴포넌트 B로 전달할 때에 그 사이에 있는 a,b,c 컴포넌트에까지 그닥 중요하지 않은 데이터 d가 계속 전달되는 현상. 상태관리 라이브러리로 해결이 가능하다.
