고양이와 코딩

https://react-ko.dev/learn/queueing-a-series-of-state-updates 여러 state 업데이트를 큐에 담기 – React The library for web and native user interfaces react-ko.dev -state 변수를 설정하면 다음 렌더링이 큐(대기열, queue)에 들어갑니다. 그러나 경우에 따라 다음 렌더링을 큐에 넣기 전에, 값에 대해 여러 작업을 수행하고 싶을 때도 있습니다. state 업데이트 일괄처리 import { useState } from 'react'; export default function Counter() { const [number, setNumber] = useState(0); return ( {numbe..

투두리스트를 만들때도, 강의를 들을때도 useState를 잘 쓰다가 갑자기 useRef를 사용하는 경우가 있습니다 대부부 궁금해하지도 않고 그런가보다~ 하고 넘어갔는데요 스터디를 하는 중 친구가 useRef 왜 사용했어? 묻자마자 꿀먹은 벙어리가 되어버렸기에....... useState 컴포넌트가 렌더링 사이의 일부 정보를 "기억" 해야 할 때 state 변수를 사용합니다. 'useState' 훅은 함수 컴포넌트 내에서 상태를 추가하고 관리할 수 있게 해줍니다. 이 상태는 컴포넌트의 렌더링과 관련이 있으며, 상태가 변경될 때 마다 컴포넌트가 다시 렌더링됩니다. 상태 값이 변할 때마다 컴포넌트가 다시 렌더링됨 함수 컴포넌트 내에서 여러 상태 값을 가질 수 있음 상태 값은 렌더링 중에 읽고 변경할 수 있음 ..

https://react-ko.dev/learn/keeping-components-pure 컴포넌트 순수성 유지 – React The library for web and native user interfaces react-ko.dev 리액트 공식문서 + 함수형 코딩스터디를 동시에 하며 도움이 되어서 포스팅 합니다 ! 컴포넌트를 엄격하게 순수 함수로 작성하기 위한 규칙 호출되기 전에 존재했던 객체나 변수를 변경하지 않습니다 동일한 입력이 주어지면 항상 동일한 결과를 반환해야 합니다. → React는 이 개념을 중심으로 설계되었기에, 우리가 작성하는 모든 컴포넌트가 순수 함수라고 가정한다. function Recipe({ drinkers }) { return ( Boil {drinkers} cups of w..

유틸리티 타입은 TypeScript에서 제공하는 내장 타입 중 하나로, 기본 타입들을 조합하여 새로운 타입을 만들 때 사용됩니다. 유틸리티 타입(Utility Types) 유틸리티 타입은 기본 타입을 변환하거나 다른 타입으로 변환할 때 사용됩니다. 주요 유틸리티 타입에는 다음과 같은 것들이 있습니다! Partial: 모든 속성이 선택적인 타입을 생성합니다. Required: 모든 속성이 필수인 타입을 생성합니다. Readonly: 모든 속성이 읽기 전용인 타입을 생성합니다. Record: 키와 값의 타입을 가진 맵을 생성합니다. Pick: 지정된 키만을 가진 타입을 생성합니다. Omit: 지정된 키를 제외한 타입을 생성합니다. Exclude: 유니온 타입에서 특정 타입을 제외한 타입을 생성합니다. Ext..

컴포넌트를 만들다 보면 비슷한 코드를 반복해서 작성해야 할 때가 많은데요, 이때 Visual Studio Code의 Snippet 기능을 활용하면 작업 효율을 높일 수 있습니다! Snippet이란 ? Snippet은 코드 작성 시간을 단축하고 효율적으로 만들어 주는 도구입니다. 코드 조각을 미리 정의하고, 해당 조각을 사용하면 자동으로 코드를 생성 해 줍니다. 컴포넌트나 함수, 반복 구조 등을 빠르게 작성하고 자 할 때 유용하게 활용 할 수 있습니다. Snippet 사용의 장점 시간 절약: 반복적으로 작성하는 코드를 Snippet으로 등록하면 반복 작업 시간을 획기적으로 줄일 수 있습니다. 일관성 유지: 일관된 코딩 스타일을 유지하기 쉽습니다. Snippet을 통해 미리 정의된 템플릿을 사용하면 일관성 ..

일반 브라우저 환경에서의 데이터 로딩(API 요청)은 API를 요청 하고, 응답을 받아 리액트 state 혹은 리덕스 스토어에 넣으면 자동으로 데이터를 리렌더링 해주므로 편리합니다! 하지만 서버의 경우 문자열 형태로 렌더링 하는 것이므로 state나 리덕스 스토어의 상태가 바뀐다고 해서 자동으로 리렌더링 되지 않습니다. Redux-thunk를 사용하여 서버 사이드 렌더링 시 데이터 로딩 하는 방법 १✌˚◡˚✌५ 1. 액션 타입 및 액션 크리에이터 정의 // users.js import axios from 'axios'; // 액션 타입 정의 const GET_USERS_PENDING = 'users/GET_USERS_PENDING'; const GET_USERS_SUCCESS = 'users/GET_US..