개요react query는 요청 횟수를 최적화해주는 라이브러리로, tanstack query라는 이름으로 바뀌었다. (리액트 외에 다양한 프레임워크들을 지원해주므로)나는 fetch, axios밖에 몰랐던 입문자였는데, '요청 횟수 최적화'를 해주는 라이브러리가 있다는 걸 알게 되고 나서는 적극적으로 도입을 해보고 싶어졌다. 사실 axios를 쓰면서 큰 불만은 없었고, 프론트엔드 로직을 잘 짜면 요청 횟수를 라이브러리 없이도 최적화가 가능하다고 생각했다. (하지만 프로젝트가 커질수록 기능 응집을 위해 라이브러리에 의존하게 되는 것도 사실이다.)다만 내가 react query를 써보면서 느낀 건, react query에서는 요청 횟수 최적화만 해주는 게 아니라 안정성을 보장해준다는 느낌을 많이 받았다. 솔..

useEffect 안에서 함수 선언 및 호출useEffect(() => { const getInfo = async () => { try { const res = await axios.get('/infos'); setInfo(res.data); } catch (e) { console.log('데이터 받아오기 실패'); throw e; } }; getInfo();}, []);이 방식은 다음과 같은 장단점을 가진다.[장점]함수가 한 번만 쓰일 때 간단하고 뚜렷하게 표현 가능외부로 노출 안 되니 캡슐화가 잘 됨빠르게 작성할 때 편리함[단점]함수가 길어지면 가독성이 떨어짐재사용이 불가능디버깅/로깅에 불편=> 초기 데이터를 한 번만 ..

react-quill을 사용하면서 `ReactQuill` 에디터 컴포넌트에 `modules` 속성으로 들어갈 `quillModules`라는 객체의 구조를 이렇게 정했다.const quillModules = { toolbar: { container: [ [{ header: [1, 2, false] }], ['bold', 'italic', 'underline', 'strike'], ['blockquote', 'code-block'], [{ list: 'ordered' }, { list: 'bullet' }], ['link', 'image'], ['clean'], ], handlers: { image: handleImageUplo..

그냥 useEffect의 콜백함수에 async를 걸고, 콜백함수 안에서 await로 데이터를 불러오면 안되는 걸까?이 질문에 대한 대답은 '안된다'이다. 그 이유를 설명하면서 리액트의 useEffect 설계에 대한 내용도 정리해보려고 한다. 1. react는 useEffect의 콜백함수에 async를 적용하는 것을 권장하지 않는다.async 함수는 항상 Promise를 반환하는데, 리액트는 useEffect가 동기 함수이기를 기대한다. 왜냐하면 useEffect의 cleanup 기능 때문인데, 리액트는 useEffect의 리턴으로 cleanup 동작을 기대하지만 만약 useEffect의 콜백함수로 async를 적용하게 되면 사실상 useEffect가 'Promise를 리턴'하게 되면서 기존의 cleanu..

리액트로 폼을 구현할 때마다 이 폼이 상태 관리를 얼마나 자주 해줘야 되는 폼인지에 대해 생각해보게 된다. 만약 폼에 textarea나 텍스트 에디터와 같이 빠르고 길게 입력을 받는 필드가 있다면, 비제어 방식으로 하는게 좋은 것 같다.빠른 속도로 계속되는 상태 변화를 리액트가 일일이 다 감지하면 그만큼 성능이 안 좋아지니까..그래서 단순한 상태 변화 필드가 아닌 이상(ex: 라디오 버튼, 셀렉트), 대부분은 비제어로 폼을 구현하는 게 잦은 리렌더링을 방지할 수 있는 최선의 방법이라고 생각한다. 그런데 이번에 다루기 까다로운 항목을 마주쳤는데, '태그' 항목이었다. 여기서 다른 항목들은 input 값으로 유효성을 바로 판단하는데,'태그' 항목은 input 값이 아닌 input+enter를 통해 입력된 '..

문제리액트로 파일 등록을 구현 중에 문제가 발생했다.처음 파일 등록할 때 잘 되고, 삭제하고 다른 파일 등록도 잘 되는데, 삭제하고 동일한 파일을 다시 올리면 등록이 안되는 것이었다. 원인문제는 브라우저의 file input에 대한 작동 방식 때문이었다.브라우저가 '같은 파일'이라고 판단하면 `onChange` 이벤트를 발생시키지 않는다고 한다.리액트에서는 file input의 보안을 위해 다른 input들과 달리 비제어 컴포넌트로만 사용하도록 강제하는데,때문에 file input은 `useRef`를 통해 해당 input을 ref로 컨트롤하게 된다.const removeImageFile = () => { setPreviewUrl("");};이 함수는 파일 미리보기 이미지 위에 떠있는 파일 제거 버튼을..