개발 성장 일ブl

context api 단점1. 복잡한 설정context가 많으면 밑에 코드처럼 복잡해지고, 유지보수가 어렵다 ... 2. 성능context는 Provider 하위의 모든 컴포넌트를 리랜더링, 불필요하게 업데이트될수 있음redux 설명store애플리케이션의 전체 상태 트리를 보유하는 중앙 저장소각 컴포넌트가 스토어의 특정 상태를 "구독"직접 조작x리듀서 함수이전 상태와 액션 객체를 받아 새로운 상태를 반환하는 순수 함수input : old state + dispatched Action => Output : New State Object*reducer 메소드, useReducer 훅이랑 다름action상태 변경에 대한 정보를 포함한 객체액션 객체는 type 속성을 반드시 가져야 하며, 추가적인 데이..

props drilling을 피하기 위한 전역상태관리 1. context.js파일 만들어서 context 생성!// context/SampleContext.jsimport { createContext } from "react";export const SampleContext = createContext(null);2. 최상단에 context provider 묶어주기import { SampleContext } from "./context/SampleContext";return ( ... );3. 사용할 곳에서 context에서 가져오기!import React, { useContext } from "react";import { SampleContext } from "../context/Samp..

오늘의 개발 뉴스레터에서 다음과 같은 제목이 궁금해서 클릭해보았다참고 http와 https 대신 hxxp와 hxxps를 사용하는 이유질문이 생기게 된 이유 pm.me라는 도메인을 가진 이메일을 보았다. 이를 운영하는 회사는 proton mail이라는 회사인데, 여기에서 개발하는 방법에 대해서 찾아보니 모든 코드를 Github에서 공개하고novemberde.github.iohttp, https는 들어봤지만 hxxp와 hxxps는 첨들어봤다위에 블로그에 적힌 내용이지만,우발적인 클릭방지, 피싱공격예방, 링크생성 방지등 보안에 있어서 좋은듯해보였다 Void 함수 : 함수안에 return이 없는 함수()=>{...} : 함수몸통, ()=>({...}) : 객체이벤트핸들러 : 이벤트 객체(e)를 갖음계산된 속성명..

중복값 필터링추가버튼을 누르면 selected라는 state에 담기는데, 이때 추가하려는 id와 selected에 담긴 id를 비교!const duplicateValue = selected.filter((prev) => prev.id === data.id); 스크롤시 최상단으로 올리는 top버튼 구현! 해당 버튼을 따로 지정한 스타일 컴포넌트를 쓰기위해 Link로 써야했는데,페이지가 새로고침되어서 e.preventDefault()로 막기!const handleScrollToTop = (e) => { e.preventDefault(); scrollTo(0, 0); }; react-toastifyalert 라이브러리!설치후 설정!import { toast, ToastContainer } from..

이번 플젝은 리액트 라우터 돔, 스타일컴포넌트를 사용한다!그래서인가.. 시작부터 에러가 계속... public에 넣어둔 이미지를 가져오려고 이렇게 적었는데👇에러가 떴다...👻👻👻 Vite와 같은 번들러에서는 process 객체가 기본적으로 정의되지 않기 때문에 발생하는 오류임ㅠㅠ💫그래서 코드를 이렇게 수정함!  react router 설치후 경로 설정!const router = createBrowserRouter([ { path: "/", errorElement: , children: [ { index: true, element: }, { path: "dex", element: }, { path: "pokemon/:pokemonId",..

전에 프로젝트에서 form태그에 핸들링을 useState로 관리했는데, 이를 더 간략하게 해주는게 있었따!!!//전const initialInputValue = { country: "", gold: 0, silver: 0, bronze: 0,};const handlSubmitToAdd = (e) => { e.preventDefault(); const newValue = { ...overallInputData, id: Date.now(), }; setSavedData([...savedData, newValue]); initState(); }; const handleChange = (e) => { setOverallInputData({ ...

React의 렌더링 조건props 변경될때마다state가 변경될때마다💩 부모 컴포넌트가 다시 렌더링되면 해당 모든 자식의 컴포넌트도 불필요하게 다시 렌더링될 수 있음!이를 위해 사용하는 것들👇👇👇memoization처음 계산해 놓은 결과를 메모리상에 저장해 두고, 그 저장된 메모리 주소를 필요할때 꺼내서 사용하는 방법반환값을 캐싱하는 것최적화 기법memo(React.memo)자식 컴포넌트를 메모이제이션함리액트 고차 컴포넌트(HOC)임* 고차 컴포넌트(HOC) : 어떤 컴포넌트를 인자로 받아서 최적화된 새로운 컴포넌트로 반환🚫꼭 필요할때만 사용하기1. 컴포넌트가 같은 props로 자주 렌더링 될때2. 컴포넌트가 렌더링이 될때마다 복잡한 로직을 처리해야 할때오직 Props 변화에만 의존하는 최적화 ..

개발뉴스실제로는 훨씬 더 많은 사람들이 AI 프로젝트에 참여했고 처음 오픈소스에 기여하는 사람들도 많아졌고 Python이 처음으로 JavaScript을 제치고 가장 인기 있는 언어가 되고 Jupyter Notebooks도 급등했다. 글로벌에서 AI가 크게 떠오르고 있고 아프리카, 라틴 아프리카, 아시아에서 개발자가 빠르게 증가하고 있다.(원본)리액트에서 화살표함수를 선호하는 이유 (원본)간결한 문법 (간결한 문법)lexical this (this 바인딩, 외부 스코프에서 상속)콜백함수에 적합 (JSX인라인 작성시 유용)암시적반환 (return 키워드 없이 가능)느슨한 비교 vs 엄격한 비교느슨한 비교는 자체적으로 타입 변환이 발생할 수 있어 항상 엄격한 비교를 사용! (타입변환까지도 필요한 경우는 느슨한..

context란부모 컴포넌트가 트리 아래에 있는 모든 컴포넌트에 prop drilling없이 사용할 수 있게 해줌🚫context를 사용하면 컴포넌트를 재사용하기 어려워 질 수 있음* prop drillinguseContext란🤔컴포넌트에서 context를 읽고 구독할 수 있는 훅 context API  사용 및 개념1. createContext : context를 생성기본값 지정 : context providers를 찾을 수 없는 경우 기본값으로 반환import React, { createContext, useContext, useState } from 'react';// Context 생성const ThemeContext = createContext(null) // 기본값 : null 2. Prov..

useRef란🤔useState처럼 값을 저장하는 hook🌟리랜더링과 상관없음 🌟, DOM 요소를 다루기 위한 용도로 주로 사용.current하면 현재 useRef의 값에 접근useRef vs useStateimport "./App.css";import { useRef, useState } from "react";function App() { const [count, setCount] = useState(0); const countRef = useRef(0); const plusStateCountButtonHandler = () => { setCount(count + 1); }; const plusRefCountButtonHandler = () => { countRef.curren..