React9 TanstackQuery-기본사용법 💡주요기능- 데이터 캐싱: 캐싱 ? 서버에게 데이터를 요청했을때, 서버입장에서는 요청받은 데이터를 매번 찾는게 아니라, 자주 찾는 데이터를 메모리에 저장해두고 빠르게 결과물을 클라이언트에게 전달한다. - 자동 리페칭: 리페칭 : 다시 데이터를 가져온다데이터가 변경 되었을때 자동으로 리페칭하여 최신상태를 유지한다. - 쿼리 무효화: 특정 이벤트 발생시 쿼리를 무효화 하고 다시 데이터를 가져올수 있다. 서버상태를 가져오고 관리하는 세가지 과정1. get: useQurey데이터를 가져온다 (READ)2. modify: useMutation데이터를 생성, 업데이트, 삭제 한다 (CREATE, UPDATE, DELETE)3. refresh : invalidateQueries무효화 시킨다. 왜?가져왔던 결과물이.. 2025. 3. 18. Redux의 구성 Redux?전역상태 라이브러리어떤 컴포넌트에서 생성한 state를 다른 컴포넌트로 보내고자 할때 우리는 Props를 통해 부모 컴포넌트에서 자식 컴포넌트로 보내주었는데, props로 state를 공유하면 여러가지 불편한 점이 있었다.컴포넌트에서 컴포넌트로state를 보내기 위해서는 반드시 부>모 관계가 되어야 한다.조부모 > 손자 컴포넌트로 보낼때도 반드시 부모 컴포넌트르 거쳐야한다. (부모에서 안쓰는 상태임에도 불구하고 전달하기 위해서만 쓰일때도 있음)자식컴포넌트에서 부모컴포넌트로 값을 보낼수 없다.Local state와Global state와Local state (지역상태) : 컴포넌트에서 useState를 이용해서 생성된 state(좁은 범위 )Global state (전역상태) : 중앙 state.. 2025. 3. 9. 타입스크립트를 시작해보자 자바스크립트의 모든 기능을 포함하는 상위 집합의 언어이다. 자바스크립트 + 정적 타입 시스템타입시스템?null, undefined, boolean, string, number 의 이 타입시스템을 프로그래밍 언어가 이해하고 해석하는 시스템을 말한다. 동작원리컴파일 과정에서 문법, 타입체크 등을 수행하여 준다.컴파일 시작: tsc 명령어를 사용해 타입스크립트 컴파일러를 실행합니다. 이때 tsconfig.json 파일을 참고하여 어떤 파일을 컴파일할지, 어떤 옵션을 사용할지 설정합니다.파일 로드: 컴파일러가 모든 입력 파일과 import된 파일을 로드합니다.코드 분석: 코드를 읽어들여 프로그램 구조를 나타내는 AST(구문 트리)를 만듭니다.심볼 테이블 생성: 코드를 분석하여 변수와 함수 등 모든 요소의 관.. 2025. 3. 6. Tanstack Query Tanstack Query?한마디로 서버 상태관리 도구의 끝판왕이다.https://tanstack.com/query/latest TanStack QueryPowerful asynchronous state management, server-state utilities and data fetching. Fetch, cache, update, and wrangle all forms of async data in your TS/JS, React, Vue, Solid, Svelte & Angular applications all without touching any "global state"tanstack.com 원래이름은 React Query 였다.그런데 여러가지 프론트엔드 프레임워크에서 사용하려고 업그레이드 .. 2025. 2. 24. React 조건부 렌더링을 활용한 로그인/회원가입 폼 리팩토링 과제진행중 , 로그인 페이지와 회원가입 페이지와 로그인 페이지에서 공통 입력폼을 사용하는데 헷갈리는 부분이 있었다. 로그인 페이지 폼 : 아이디 인풋, 비밀번호 인풋, 제출버튼회원가입 페이지 폼 : 아이디 인풋, 비밀번호 인풋, 닉네임 인풋, 제출버튼 회원가입 페이지에 인풋창이 하나 더 있는데 이걸 어떻게 공통컴포넌트로 사용할수 있을까...?! 내가 생각한 방법은 각 페이지에서 다른 props를 넘겨주어, 조건에 따라 각 페이지에 맞는 ui를 return 시켜주는것이었다.//로그인페이지에서 //회원가입페이지에서const AuthForm = ({ mode }) => { if (mode === "signin") { return ( .. 2025. 2. 21. useContext 왜쓰는데? 리액트에서 일반적으로 부모컴포넌트 > 자식컴포넌트로 데이터를 전달해줄때 props로 전달해주었다 그런데 만약 부모 > 자식 > 그자식 그 자식의 자식 ....*100 이라면??? 컴포넌트에서 prop 을 사용하지 않고 자식에게 전달만 하는 경우도 있다여기서 바로 prop drilling이 일어나게 된다.깊이가 너무 깊어지면 prop이 어떤 컴포넌트에서 전해져 왔는지 모를수 있다.컴포넌트에서 오류가 발생했을때 어떤컴포넌트에서 오류가 발생했는지 추적하는데 오래걸린다. 그러면 이런 문제점을 contextAPI로 해결해보자useContext hook 을 통해서 전역데이터를 관리 할수 있다.여기서 App.jsx전체를 묶을수도 있고, 컴포넌트들끼리도 묶을수 있겠다.context : 문맥, 맥락특정 영역 안에서 c.. 2025. 2. 6. useEffect와 라이프사이클 https://ko.react.dev/reference/react/useEffect useEffect – ReactThe library for web and native user interfacesko.react.dev 한마디로 외부 시스템과 컴포넌트를 동기화 하는 리액트 훅이다.외부 시스템 : 브라우저API, 서버 통신 등 리액트에서 제어되지 않는것들. 기본 문법useEffect(()=>{},[]);두가지의 인자를 받는다.1. 콜백함수2. 의존성 배열 시점 : 컴포넌트가 랜더링 된 이후에 실행된다. 의존성배열이 빈값일때 [] : 처음 마운트 될때만 실행된다. 의존성 배열이란 ? 배열에 값을 넣으면 그 값이 바뀔때만 useEffect를 실행하게 된다. clean up컴포넌트가 나타났을때 (랜더링 되었을.. 2025. 2. 3. 메달리스트 업데이트 해주기(feat.map,상태업데이트) 메달 추가하기 기능은 완료를 하였는데, 업데이트 기능에서 자꾸 절어서 정리가 필요하다고 생각했다.못생긴 UI는 일단 무시하자. 지금 그게 중요한게 아니다.. 로직 생각하기1. 일단 등록하려는 나라이름이 리스트에 등록 되어있는지 확인한다.2. 등록되어 있다면 메달수를 변경하여주고 > (상태 업데이트를 해준다)3. 등록되어 있지 않다면 등록먼저(추가하기기능) 하라고 알랏창을 띄어준다. 1.리스트 배열에서 입력값이 일치 하는 항목을 찾아준다.const findMedal = medalList.find(function (list) { return list.country === country;}); 같은 항목이 있으면 해당 객체가 나올것이고, 없으면 undefined 가 뜰것이다. 2.조건문if (findMe.. 2025. 1. 25. React 소개와 설치 React : 한마디로 UI 라이브러리 이다. 프레임워크?개발자가 기능구현에만 집중할수 있도록 코드만 작성하면 알아서 다 굴러가게 해줌ex Spring FrameworkVue / AngularDjango, Flask라이브러리?공통 기능의 모듈화가 이루어진 프로그램의 집합Reactreact-router-domredux 제어의 역전원래는 개발자가 개발할떄 제어를 한다.그런데 프레임워크를 사용하는 경우 시키는대로 짜게되니 제어의 흐름이 프레임워크로 가게 되는것이다.(제어가 역전됨) 리액트는 왜 라이브러일까?리액트 자체만으로 프레임워크라고 불리기에는 제공해야하는 기능이 부족하다.상태관리, 라우팅처리, 스타일링 등 개발자가 처리 해주어야 한다.프레임워크 / 라이브러리 차이는 너무많이 다루었기때문에 이쯤하고 넘어가.. 2025. 1. 20. 이전 1 다음
