죽이죽이

렌더링이란?※ 렌더링이란?- 컴포넌트의 상태값(props, state, context)이 변함에 따라 변경된 UI를 그려내는 과정이다.※ 렌더링이 이루어지는 순서- Trigger : 렌더링 촉발- Render : 컴포넌트 렌더링- Commit : DOM에 커밋※ 렌더링이 일어나는 조건- 컴포넌트가 처음으로 렌더링(마운트)을 하는 경우- 자신 또는 부모 컴포넌트의 상태값(state, props, context 등)이 변한 경우※ 코드로 이해하는 렌더링 (전체 코드 구조)- App.js : 진입점- Parent.jsx : 부모 컴포넌트- FirstChild.jsx : 자식 컴포넌트 - 1- SecondChild.jsx : 자식 컴포넌트 - 2 ※ 첫번째 테스트 : 상태값도 변하고 UI도 변하는 경우- 최초 ..

debounce를 활용한 무한렌더링 해결 ※ 문제※ 해결※ 코드 // 화면 사이즈 조절 이벤트 리스너 지정 useEffect(() => { // 화면 사이즈에 따른 상태값 지정 const handleResize = _debounce(() => { if (window.innerWidth window.removeEventListener("resize", handleResize); }, []);​ AWS S3 bucket 파일 다운로드※ 문제※ 해결※ 코드 /* 파일 다운로드 */ const handleDownload = async (fileUrl: string, fileName: string) => { await fetch(fileUrl, { method: "GE..

react-router-dom ※ 사용하는 이유 - 기존의 SSR에서는 매 페이지 이동마다 새로운 문서를 서버에서 가져와야 했지만, CSR은 브라우저에서 자체적으로 화면을 갱신하므로, 페이지 간 전환 시에 서버에 새로운 문서를 요청할 필요가 없게 된다. - 이는 사용자가 더 빠르게 원하는 콘텐츠에 접근할 수 있게 해주며, 전체적인 속도와 응답성을 향상시키는 장점이 있다. ※ CSR, SSR 차이점 CSR SSR 렌더링 위치 모든 렌더링은 클라이언트 측에서 이루어진다. 서버쪽에서 렌더링 준비를 끝마친 상태로 클라이언트에 전달하는 방식이다. 첫 페이지 로딩 시간 처음 로딩 시 모든 HTML, CSS, JS를 한번에 불러오기 때문에 느리다. 필요한 부분의 HTML, CSS, JS만 불러오기 때문에 빠르다. 나..

Redux 비동기 처리 ※ 방법 2가지 ※ useEffect 사용 import { useSelector } from "react-redux"; import Cart from "./components/Cart/Cart"; import Layout from "./components/Layout/Layout"; import Products from "./components/Shop/Products"; import { useEffect } from "react"; function App() { const showCart = useSelector((state) => state.ui.cartIsVisible); const cart = useSelector((state) => state.cart); // 카드가 바뀔..

Redux ToolKit ※ Redux ToolKit 설치 - redux toolkit : 수동으로 작성하는 Redux 로직에서 "보일러 플레이트"를 제거하고, 흔한 실수를 방지하고, 기본적인 Redux 작업을 간단하게 만드는 API를 제공한다. npm i @reduxjs/toolkit ※ 기본 사용법 import { configureStore, createSlice } from "@reduxjs/toolkit"; // 초기 상태값 정의 const initialState = { counter: 0, showCounter: true }; const counterSlice = createSlice({ // 슬라이스명 name: "counter", // 초기 상태값 initialState, // 리듀서 함수들..

Redux 사용하기 ※ 리덕스의 기본 원리 ※ Redux 설치 - react-redux : react 환경에서 redux를 사용할 수 있게 해주는 라이브러리이다. npm i redux react-redux​ ※ 기본 사용법 - App.js import Counter from './components/Counter'; function App() { return ( ); } export default App; - Counter.js import classes from './Counter.module.css'; const Counter = () => { const toggleCounterHandler = () => {}; return ( Redux Counter -- 카운터 값 -- 토글 카운터 ); }; e..

Redux란? ※ Redux란? - JavaScript 애플리케이션 상태를 관리하기 위한 상태 관리 라이브러리이다. - 주로 React와 함께 사용되며, React로 개발된 프로젝트에서 상태를 효율적으로 관리하기 위한 도구로 사용되고 있다. - Redux는 예측 가능하고 디버깅이 쉬운 애플리케이션 상태 관리를 제공하기 위해 설계되었다. ※ Context API의 한계 - 규모가 커질 수록 셋업과 관리가 복잡하진다는 단점이 있다. - 잦은 상태 변화 시 퍼포먼스 이슈가 있다.(by 리액트 팀) ※ 리덕스의 기본 원리

폼 제출 시 (Submit) ※ 설명 - 입력을 완전히 마친 후 제출을 하기 전까지 경고를 표시하지 않는다. - 불필요한 피드백은 줄지만, 피드백이 너무 늦을 수 있다. ※ 예시 코드 import { useRef, useState } from "react"; const SimpleInput = (props) => { const nameRef = useRef(); const [name, setName] = useState(""); const [nameValid, setNameValid] = useState({ isNotEmpty: false, isTouched: false, }); const nameInputHandler = (e) => { setName(e.target.value); }; const ha..