체유의 IT일지

프론트엔드로 프로젝트를 처음 해보면서 기능 구현하기에만 급급해코드 간결성이나 다른 훅들 사용에는 많이 부족했는데감사하게도 코치님께서 프로젝트가 끝난 후 코드 리뷰를 작성해주셨다.부끄럽지만🤣 기존에 내가 작성했던 코드와 리뷰 후 수정된 코드들을 비교해보면서 정리해보려한다.  1. useEffect 내부는 간결한 형태로 정리하는 것이 좋다useEffect 내부 코드의 가독성이 떨어지는 곳이 한 군데가 아니었다..!// 기존코드useEffect(() => { api({ method: 'get', url: "/fulfilled-habits", params: {date: getDate()[1]}, }) .then((res) => { const h..

useRef ref는 reference로 '참조'를 뜻 js를 사용할 때 특정 DOM을 선택하기 위해 querySelector나 getElementById 등의 함수를 사용한다. 리액트에서도 DOM을 직접 선택해야하는 상황이 필요한데 그때 React Hook으로 useRef를 사용한다. useRef는 일반적인 자바스크립트 객체로 heap 영역에 저장이 된다. 따라서 같은 메모리 주소를 가지게 되기 때문에 값이 변하더라도 화면이 렌더링되지 않는다. useRef를 사용하면 current를 통해서 값을 변경해준다. 반환된 useRef 객체는 컴포넌트의 전 생애주기를 통해 유지가 된다. useRef로 만들어진 객체 vs useState로 변경되는 변수 vs 로컬변수 로컬변수 -> 렌더링 x -> 렌더링되면 변수..