FE 개발일지

어떻게 보면 저번 FE에서 OOP의 대한 고민 포스트의 대한 연장선일 것 같네요! API를 클래스로 바꾸어 react-query를 같이 쓰면서 한번 더 깨닫게 된 내용이니까요. 다들 Arrow Function 많이 쓰시나요? function과 Arrow function의 차이점은 저도 직접 경험했다기보다는 어떤 차이점이 있지?라고 찾아보고 이론적으로 접한적이 더 많은 것 같습니다. 간단하게 function VS arrow function의 차이점을 짚고 넘어가봅시다. 일반 함수의 this - 함수를 호출할 때 어떻게 호출되었는지에 따라 this에 바인딩 할 객체가 동적으로 결정된다. 화살표 함수의 this - 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되고, 상위 스코프의 this를 가리킨..

#1 들어가기 안녕하세요. 오늘은 react-router-dom으로 라우터를 구성하던 중, 문제가 발생한 상황에 대해서 포스트를 써보도록 하겠습니다. 저는 개인적으로 사이드 프로젝트로 간단하게 페이지를 만들며 작업을 하고 있었습니다. 페이지 전환 작업을 react-router-dom의 도움을 받았구요. react-router-dom은 리액트의 화면 전환을 도와주는 역할을 하는 녀석이죠. 페이지의 로딩 없이, 페이지에 필요한 컴포넌트를 불러와 렌더링 하여 보여주도록 도와줍니다. #2 문제 혹시, Route 설정을 다하고 url은 정상적으로 변경되지만, 렌더링이 되지 않는 현상을 겪어본 적이 있으신가요? 저는 react-router-dom의 도움을 받아, 페이지에 따른 각각의 컴포넌트를 불러와 렌더링하여 페..

이렇게 또 useState를 주제로 글을 쓰게 되었습니다. 한번 더 공식문서의 중요성을 느끼고 정리하면 좋겠다 생각되어 이렇게 글을 작성하네요 이번에는 제가 page 단위로 계속해서 10개의 데이터들을 불러와야 하는 작업을 하고 있었습니다. 근데 0페이지에서 1페이지의 내용들까지는 불러오는데 그 이후의 데이터들을 못불러오는 것입니다. 이런식으로 0에서 1로는 업데이트가 되었는데 1에서 머물러 있는 상태가 계속 되었습니다. count를 업데이트 하는 useState를 만든다고 생각했을 때, 이렇게 배웠고 실제 이렇게 사용했었으니까요 const addButton = () => { const [count, setCount] = useState(0); const onClick = () => { setCount(..