일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- JavaScript
- 알고리즘
- HTML
- docker
- 프론트엔드
- AWS
- es6
- 블록체인
- next.js
- TypeScript
- kubernetes
- 리액트
- 자바스크립트
- 이더리움
- k8s
- 웹
- 타입스크립트
- 클라우드
- 백준
- 솔리디티
- 이슈
- BFS
- 백엔드
- 컴퓨터공학
- react
- 파이썬
- 쿠버네티스
- CSS
- node.js
- 가상화
- Today
- Total
목록react (18)
즐겁게, 코드
웹 어플리케이션 특성상 로드와 동시에 서버로부터 데이터를 불러와야 하는 경우가 자주 있습니다. 아마 대부분의 경우 useEffect 또는 useLayoutEffect 훅을 활용해 렌더링이 끝난 후 데이터를 불러올 텐데요, 한번 샘플 코드를 보겠습니다. const getGroupList = async () => { await axios .get(`${GROUP_ENDPOINT}?func=getAllGroup`) .then((res) => setGroupList(res.data)); }; useEffect(getGroupList, []); 컴포넌트 렌더링을 마친 후 useEffect 훅으로 getGroupList 함수를 호출해 그룹 리스트 상태값을 초기화해주고 있습니다. 그런데 이렇게 짜면 절대로 안됩니다!..
이 글은 Nathan Sebhastian 님의 How and Why You Should Use React Query 를 번역한 글입니다. 요즘은 axios 와 더불어 react query 역시 많이 쓴다는 말을 들어서... 큰 개념만 정리해보고자 번역을 진행해 봤습니다. 시작하기 전에 이 글은 react query 버전 2 를 기준으로 작성된 글로, 21년 4월 기준 가장 최근에 출시된 버전 3에서는 꽤나 굵직한 변경점들이 있으니 최신 버전의 사용 방법은 공식 문서와 유튜브 튜토리얼을 참조하는 것을 추천드립니다. 📝 요약 : 기존의 데이터 페칭에는 로딩 상태 관리 및 페칭한 데이터 관리 등을 위해 여러 훅을 사용해야 했으나, 리액트 쿼리를 사용하면 훨씬 간결하게 페칭 로직을 작성할 수 있다. // ❌ :..
서버 편 과 이어지는 글로, 클라이언트 제작 과정을 여기서 정리하려 했지만 너무 분량이 길어져 중요한 부분만 짚기로 하였습니다. 전체 서버 & 클라이언트 코드는 아래 깃허브 저장소 링크에서 확인할 수 있습니다. 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에서 불러온 객체를 활용해 서버와 연결..
리액트로 컴포넌트를 만들때 함수 컴포넌트를 사용하는 것이 대세가 된 지금 함수 컴포넌트에서 클래스 컴포넌트의 동작을 구현하는 훅(Hook)에 대한 이해는 필수적이다. 오늘은 리액트 훅의 기본적인 특징과 클래스 컴포넌트의 상태를 구현하는 useState 훅에 대해 알아보자. import React, { useState } from "react"; function App() { const [count, setCount] = useState(0); function decrementCount() { // count 가 들어간 부분을 재렌더링함. setCount((prevCnt) => prevCnt - 1); } function incrementCount() { // count 가 들어간 부분을 재렌더링함. se..