열정보단 시스템

너무너무 오랜만에 글이다.. 최근에는 졸업 전시 관련 하드웨어 쪽 코드를 다루고 이력서 작성에 정신이 팔려서 개발의 비중이 조금 줄어들었다. 이력서를 작성하면서 느낀 것 중에서 클린 코드에 대해 다룬 것이 있다. 서칭을 하면서 찾아보는데 클린 코드를 위한 가장 기본적인 참고사항은 적용을 마쳤다. 변수명(네이밍 규칙) 명시적으로 변경 삼항연산자의 상황에 따른 대응 ( + 논리 연산자(&&)로 조건부 렌더링 적용 ) True(boolean) 값을 Props로 넘길시 생략 useEffect Hook 내부 함수는 밖으로 뺄 것 인자가 Event 뿐인 이벤트 핸들러 함수는 함수명만 명시 React-Query와 Axios 모듈화로 API 요청 관리 (진행중) 정도가 될 것 같은데 마지막 항목은 현재 작업 중이다. ..

이번 게시글에서는 리액트 쿼리에 대해 정리해보려고 한다. 개념을 정리함에 있어서 이 기능이 어떤 의미와 역할을 가지는지 파악하는 과정은 중요하며, 이는 내가 구현하는 코드에 어떤 이로운 영향을 미치는지 알아내는 중요한 과정이다. 우선, 리액트 쿼리(React Query)는 API 연동에 특화된 라이브러리로서 Hook을 기반으로 데이터 로딩을 편하게 구현하도록 도와준다. 기존에 우리가 데이터를 넣어주거나 로딩 indicator를 띄워줄 때 또는 모달을 생성해줄 때 다음과 같이 useState를 써서 구현해주었다. const Example = () => { const [loading, setLoading] = useState(false); const [data, setData] = useState(null)..