먼저, 클라이언트 컴포넌트는 브라우저에서 실행된다.`async` 함수 자체는 자바스크립트에서 실행이 가능하지만, React 렌더링 모델에서는 함수 컴포넌트가 JSX를 동기 반환하기를 기대한다. 리액트가 컴포넌트의 JSX 동기 반환을 기대하는 이유는, 리액트가 렌더 단계에서 해당 컴포넌트를 즉시 실행할 수 있어야 하기 때문이다. 즉, 렌더 단계에서 컴포넌트가 Promise를 반환하는 것을 허용하지 않는 것이다.(`async function Component()`는 `Promise`를 반환하고, 이를 허용하지 않음) 이를 허용하지 않는 이유는 React의 렌더러가 이 `Promise`를 처리하는 로직을 갖고 있지 않기 때문이다.그래서 리액트 프로젝트를 보면, async 걸린 채 export 되는 컴포넌트가 ..

개요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를 통해 입력된 '..