즐겁게, 코드

이 글은 Nathan Sebhastian 님의 How and Why You Should Use React Query 를 번역한 글입니다. 요즘은 axios 와 더불어 react query 역시 많이 쓴다는 말을 들어서... 큰 개념만 정리해보고자 번역을 진행해 봤습니다. 시작하기 전에 이 글은 react query 버전 2 를 기준으로 작성된 글로, 21년 4월 기준 가장 최근에 출시된 버전 3에서는 꽤나 굵직한 변경점들이 있으니 최신 버전의 사용 방법은 공식 문서와 유튜브 튜토리얼을 참조하는 것을 추천드립니다. 📝 요약 : 기존의 데이터 페칭에는 로딩 상태 관리 및 페칭한 데이터 관리 등을 위해 여러 훅을 사용해야 했으나, 리액트 쿼리를 사용하면 훨씬 간결하게 페칭 로직을 작성할 수 있다. // ❌ :..

제작중인 앱에서 사용할 컬러 팔레트 패키지를 살펴보던 중, 의아한 점이 하나 생겼습니다. Controlled 컴포넌트에서 selectedColor 라는 변수를 갖는 것만 제외하면 둘은 거의 동일해 보이는데, 왜 Controlled - Uncontrolled 라는 이름으로 컴포넌트를 분리한 걸까요? 실제 사용할 때는 Uncontrolled 컴포넌트를 사용해도 아무 문제가 없었지만, 애매한건 확실히 짚고 넘어가야겠다는 생각에 시간을 내어 둘의 차이를 찾아보게 되었습니다. Controlled Component (제어 컴포넌트) 제어 컴포넌트는 컴포넌트의 상태나 속성(props)으로 주어진 값을 활용하는 컴포넌트입니다. 태그를 제어 컴포넌트로 사용하는 예를 들어보면, value 값을 useState로 관리하는 ..

리액트에서는 react-router-dom 라이브러리를 통해 페이지간 라우팅을 구현할 수 있었습니다. 그러나 넥스트(Next.js) 에서는 pages 폴더 안에 컴포넌트를 생성하면 자동으로 경로가 설정되게 됩니다. /.next /pages ㄴ-- index.jsx ㄴ-- tomato.jsx /public /styles 이렇게 pages 폴더 안에 index 와 tomato 라는 컴포넌트가 있으면 별도의 라우팅 없이 /tomato 라는 경로를 사용할 수 있게 됩니다. (* 경로명은 export되는 컴포넌트 이름이 아닌 파일명을 기준으로 합니다.) 정적 라우팅 정적 라우팅은 사전에 지정된 주소로 이동하는 방법입니다. react-router-dom 처럼 넥스트에서도 Link 컴포넌트를 사용해 주소를 이동할 수..

크롬이나 웨일 등의 최신 브라우저는 다양한 익스텐션을 지원하는데요, 오늘은 리액트로 익스텐션 앱을 빌드하는 방법을 소개하려 합니다. 프로젝트 세팅 먼저 create-react-app 으로 리액트 앱을 빌드한 다음, public 폴더의 manifest.json 파일을 확인합니다. 그럼 아래와 같이 매니패스트 파일이 생성되었음을 알 수 있습니다. { "short_name": "React App", "name": "Create React App Sample", "icons": [ { "src": "favicon.ico", "sizes": "64x64 32x32 24x24 16x16", "type": "image/x-icon" }, { "src": "logo192.png", "type": "image/png",..

최근 깃허브 스타 1k를 돌파한 hook-flow 라는 프로젝트가 있습니다. 리액트 훅의 모호한 실행 순서가 보기좋게 정리되어 있어 저도 이미지를 저장해서 보고 있습니다. 😁 그런데 이상하게도, LayoutEffects라는 낯선 이름이 하나 보이네요. 오늘은 useLayoutEffect 라는 생소한 훅을 소개해 보겠습니다. useLayoutEffect useLayoutEffect(() => { effect return () => { cleanup }; }, [input]) useLayoutEffect를 인텔리센스가 자동으로 완성한 모습입니다. 그런데 어디서 많이 본 형태 아닌가요? useEffect(() => { effect return () => { cleanup } }, [input]) 맞습니다! u..

서버 편 과 이어지는 글로, 클라이언트 제작 과정을 여기서 정리하려 했지만 너무 분량이 길어져 중요한 부분만 짚기로 하였습니다. 전체 서버 & 클라이언트 코드는 아래 깃허브 저장소 링크에서 확인할 수 있습니다. C17AN/react-socket-chat socket.io와 리액트를 활용한 채팅 어플리케이션. Contribute to C17AN/react-socket-chat development by creating an account on GitHub. github.com 이 글에서는 리액트 클라이언트에서 socket.io-client를 활용하는 팁만을 다룹니다. 1. 클라이언트와 서버 연결하기 - 언제나 훅을 사용하자 클라이언트에서는 socket.io-client에서 불러온 객체를 활용해 서버와 연결..

머터리얼 UI(Material UI) 기반 컴포넌트를 꾸밀 때는 makeStyles라는 커스텀 훅과 객체를 사용해 CSS를 꾸미게 된다. 예를 들어 클래스명이 'card' 인 요소를 꾸미는 방법은 이런 식이다. import React from "react"; import { Card, makeStyles} from "@material-ui/core"; const useStyles = makeStyles((theme) => ({ card: { width: "80%", height: "20%" }, })) const CardContainer = () => { const classes = useStyles(); } 자바스크립트에서 객체를 사용하는 문법을 아는 사람이라면 뭔가 이상한 점이 하나 보일 것이다. "..