챗지회피티님의 블로그

1. RTK ( Redux Toolkit )Redux의 공식 상태관리 툴킷Redux를 더 쉽게, 짧게, 안전하게 사용할 수 있도록 만든 공식 라이브러리1.1 Redux란?Redux는 자바스크립트 앱의 전역 상태 관리(state management)를 위한 라이브러리- 여러 컴포넌트에서 공유해야 하는 데이터를 하나의 중앙 저장소(store)에서 관리하도록 도와주는 도구- 부모 → 자식 → 손자 → … 상태 전달이 너무 복잡할 때 사용1.2 Redux에서 알아야 할 개념 4가지구성 요소설명Store모든 상태(state)가 저장되는 단 하나의 중앙 공간Action상태를 바꾸고 싶다고 알리는 신호 (객체)Reducer액션에 따라 상태를 어떻게 바꿀지 정의한 함수Dispatch액션을 리듀서에 전달하는 함수 흐름..

🧩 HTML/JSX에서는 속성(attribute)🧠 JavaScript 함수에서는 인자(argument) + 매개변수(parameter)⚛️ React에서는 속성이 props가 되어 함수의 인자처럼 전달됨1. 자바스크립트의 객체객체 안에 정의된 함수(동작)으로 데이터를 표현하고 조작하는데 필수적인 요소표현법] 객체명.속성명 객체명["속성명"]1.1 객체 (Object)키(key): 값(value) 쌍의 집합- **관련된 데이터(속성)와 기능(메서드)** 를 하나로 묶는 자료형const 객체이름 = { 키1: 값1, 키2: 값2, ... }; - 예시 ]const user = { name: "챗지회피티", age: 25}; 1.2 속성 (attribute)..

React Query서버에서 데이터를 불러오고, 그걸 적절히 캐싱하고, 갱신하고, 상태를 관리하는 라이브러리.즉, **서버 상태를 다루기 위한 "비동기 상태 관리 도구"**비동기 상태관리 (Asynchronous State Management)1. useQueryfetching(서버에서 데이터를 가져옴) 후 자동으로 데이터를 캐싱하고,상태를 관리하는 일을 아주 간편하게 만들어주는 훅 - 데이터 인식 (GET) 후 캐싱 - API 호출이 많은 코드에서 중복 코드를 줄여줌- 이미 불러온 데이터들은 다시 재요청하지 않아도 됨refetch: Query의 queryKey가 변할 때마다 새로운 데이터를 자동으로 요청하도록 만듦 2. useMutation데이터를 생성, 수정, 삭제 할 때 사용하는 서버 변화 작업 -..

Typescript란?type이 있는 자바스크립트로정적 타입을 제공하며 개발 시 타입 오류를 보여줌으로써 추후 개발 시 오류 예방할 수 있음let name = "챗지회피티"; // JS에서는 문자열인지 검사 안 함let age: number = 23; // TS에서는 타입 지정 시 그 타입만 가능 Typescript 분류내용 ]타입 선언type, interface, enum 등타입 조합유니언(`타입 별칭이름 붙여서 재사용타입 예시문자열, 숫자, 객체, 배열, 함수 등특수 타입children, ReactNode, CSSProperties비교interface vs type & 명확히 구분 1. React에서 사용하는 EventReact Event는 React에서 사용하는 이벤트 처리 시스템이는 브라우저의..

Component 생성const 이름 = () => {}function App() { return { }}export default Component;App.js에 component 불러오기import TodoList from "./components/TodoList"App.css에 스타일 설정하기.APP { width: 500px; margin: 0, auto; //위아래 display: felx; felx-direction: column; gap: 10px; padding: 15px 0px; //위아래 }Component 코드 작성 후 그 컴포넌트.css 를 생성하고 import “./TodoList.css” 불러오기import “./TodoList.css”const 이름 = () => {}fu..

9단원. 컴포넌트 스타일링일반 css 사용하기 -> sass 사용하기 -> css module 사용하기 -> styled-components 사용하기1. cssCSS 클래스를 중복되지 않게 만드는 것이 중요ex. 컴포넌트 이름-클래스 형태 [ [ [ content ] padding ] border ]1.1 flexflex box 안에 담긴 것들은 item이 됨- 가로: 기본축/ 세로: 크로스축 시 item 배치 방향 가로축flex-wrap: nowrap; //default값flex-wrap: wrap; //박스가 아래로 떨어짐flex : flex : 1 => flex: 1 1 0%; flex-grow: 1 부모가 가진 여유 공간을 1배 비율로 가져라 flex-shrink..

8단원. HOOK함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState렌더링 직후 작업을 설정하는 useEffect1. useState- component 내에서 state를 관리시켜주며 초기값에서 사용- component를 굳이 class형으로 바꿀 필요없음숫자 카운터]import React, { useState } from 'react';const Info = () => { const [name, setName] = useState(''); const [nickname, setNickname] = useState(''); const onChangeName = e => { setName(e.target.value); }; const onChangeNickname = e => { ..

6단원. 반복되는 Component리스트나 데이터셋을 기반으로 동일한 구조의 UI를 여러 개 렌더링1. Map 함수반복되는 컴포넌트를 렌더링파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 그 결과로 새로운 배열을 생성arr.map(callback, [thisArg])const numbers = [1, 2, 3, 4, 5];const result = numbers.map(num => num * num);console.log(result);2. 함수의 Parameter• callback: 새로운 배열의 요소를 생성하는 함수로 파라미터는 다음 세 가지1. currentValue: 현재 처리하고 있는 요소2. index: 현재 처리하고 있는 요소의 index 값3. array..

4단원. Event Rerendering웹 브라우저에서 DOM 요소들과 상호작용하는 것1. 이벤트 이름은 카멜 표기법 사용onClick 2. 이벤트 실행할 자바스크립트 코드를 전달하는 것이 아니라 함수 형태의 값을 전달화살표 함수 () => {}렌더링 부분 외부에 미리 만들어서 전달 3. DOM 요소에만 이벤트 설정 가능{ /\* (...) \*/ }1. onChange event 설정e 객체]SyntheticEvent로 웹 브라우저의 네이티브 이벤트를 감싸는 객체import React, { Component } from 'react';class EventPractice extends Component { render() { return ( 이벤트 연습 { ..