react

간단하게 useReducer 사용법을 익힐 겸 todoList를 만들어보기로 했다. 구현한 기능은일정을 추가하는 기능추가된 일정을 삭제하는 기능 각 일정들에 줄을 긋는 기능(일정을 다 했다는 표시)이렇게 3가지이다. 일단 이렇게 시작을 해 보자. 위 코드에 useRed

코드를 따라서 코딩을 하다가 useReducer에 대한 사용방법 인지가 아직 부족함을 깨닫고 개념에 대해 공부해보고자 포스팅을 시작합니다.. ㅎ컴포넌트에 state를 생성하고 관리하기 위해서 주로 useState 훅을 사용했다. 그러나 react에서 state 관리를

react로 만든 앱은 여러 개의 컴포넌트로 이루어져 있다. 최상위 앱 컴포넌트에서 시작해서 트리형태로 쭉쭉 뻗어나간다고 보면 된다! =이러한 방향으로 props를 통해 전달이 된다. App(부모)컴포넌트 안에서 Header(자식)컴포넌트를 담고 있다. 그럼 Heade

useContext를 사용해보겠다.일단 context파일을 만들고 ThemeContext.tsx파일을 만들어주겠다. ThemeProvider를 만들어서 ThemeContext.Provider를 반환하여 ThemeContext를 통해 자식 컴포넌트들에게 상태와 함수를

useId는 고유한 아이디를 만들 때 사용하는 react hook이다. 사용방법 useId를 import로 불러오고 사용할 변수에 담아 호출해 준다. useId는 아무런 인자도 전달받지 않는다. 그래서 그냥 저렇게 사용하면 문자열 형태의 아이디를 하나 반환해 준

개발을 하면서 라이브러리를 다운받을 때 npm을 사용하곤 했다. 하지만 정작 어떤 뜻인지 또 npx와 yarn과 각각 어떤 특징을 지녔는지는 모르고 그냥 하라니까 맞다보다~ 하고 npm만 사용하곤 했다!이번 기회에 이들의 차이점을 알아보자! 😊Node Package

보면 알지만, 함수형 컴포넌트가 훨씬 간단하고 직관적이다.함수형 컴포넌트는 리액트 16.8버전에 추가된 '리액트 훅'으로 인해서 사용성의 대변화를 겪게 된다. 함수형 컴포넌트 사용하기 불편새롭게 추가된 '리액트 훅'으로 인해 더 이상 클래스 컴포넌트를 사용하는 게 비효

웹 사이트에서 사용하는 상태 데이터는 크게 두 가지로 나눌 수 있다. 클라이언트 상태 데이터 서버 상태 데이터 사이트의 어떤 메뉴가 열렸는지 닫혔는지, 혹은 사용자가 어떤 버튼을 눌렀는지 아닌지와 같은 UI 상태 값이나, 유저가 입력 폼에 입력한 데이터 등 서버와는 상

나는 일단 vite로 react를 설치 후 리액트 쿼리를 설치했다. 터미널에 이렇게 입력하면 react 쿼리가 설치된다. 이렇게 Home.jsx랑 App.jsx에 각각 이렇게 작성해 주었다. App.jsx에서 <QueryClientProvider client={

백엔드로부터 데이터를 받아오기 위해 리액트 쿼리에서 제공하는 useQuery()라는 훅을 사용할 것이다. 여기서 쿼리란 '문의하다, 질문하다'라는 뜻을 지니고 있다. 데이터베이스 같은 것에 우리가 필요한 데이터를 요청하는 것을 말한다. useQuery()는 필요한 데이

리액트 쿼리의 Status에는 두 가지 status가 있다. query status: 실제로 받아 온 data값이 있는지 없는지를 나타내는 상태 값fetch status: queryFn()함수가 현재 실행되는 중인지 아닌지를 나타내는 값query status는 useQ

컴퓨터에 있는 데이터를 가져오는 것에 비해 백엔드에서 데이터를 가져오는 일은 시간이 많이 걸린다. 그런데 만약 유저가 방금 전에 확인한 데이터를 또 보고, 또 보는 경우에는 이 똑같은 데이터를 매번 백엔드에서 받아 와야만 할까?유저가 자주 보는 이 데이터를 어딘가에 저

리액트 쿼리는 쿼리 키를 기반으로 데이터를 캐시에 저장한다. 홈 피드와 내 피드로 이루어져 있고, 홈 피드에서는 모든 포스트를 다 받아와서 보여주지만 내 피드에서는 사이트에 로그인한 특정 유저의 포스터만 보여줘야 한다고 하자. 그러면 다음과 같이 백엔드로부터 특정 유저

useQuery()에서 리턴하는 객체를 살펴 보면 정말 많은 값들이 있다. 리액트 쿼리 공식 문서에서 제공하는 useQuery()페이지를 통해 값들을 확인할 수 있다. 리턴 값들 중 가장 많이 활용하는 것은 백엔드에서 받아 온 데이터가 있는 data와 그 데이터를 받아

뮤테이션은 영어로 '형태나 구조상의 변화'라는 뜻을 가지고 있다. 여기서 뮤테이션이란, 사이드 이펙트를 가진 함수를 의미한다. 데이터베이스에 새로운 값을 추가하거나 수정, 삭제하는 행위는 사이드 이펙트에 해당한다. 그리고 이렇게 사이드 이펙트가 발생하는 경우에 우리는

사용자는 서버와 interaction을 한다. 예를 들어 회원가입 후 로그인 블로그 포스팅이나 쇼핑 등의 활동을 한다.그렇다면 그 정보들은 어디에 저장되는 걸까?보통은 서버와 통신하는 데이터베이스에 저장이 된다.그렇다면 이런 상태에서 댓글의 내용이 어디에 저장되어 있을

서버사이드 렌더링이 무엇인지 알기 전에 먼저 서버 사이드 렌더링 애플리케이션과 반대되는 개념인 싱글 페이지 애플리케이션에 대해 먼저 알아보자. 싱글페이지 애플리케이션은 렌더링과 라우팅에 필요한 대부분의 기능을 서버가 아닌 브라우저의 자바스크립트에 의존하는 방식이다.

1.데이터12.데이터23.데이터34.데이터4이런 식의 데이터를 get받아와서 list를 구현하는데 성공했다. 그 이후에 각각의 데이터를 클릭하면 그에 해당하는 상세 데이터로 이동하는 기능을 구현했다. 거기까지는 순조롭게 했지만... 각 상세 데이터 페이지로 이동하면 '

모달을 글의 내용을 수정해서 업로드하는 로직을 짜고 있었는데 보내지는 값이 자꾸 이전 값으로 한 박자씩 늦게 보내졌다.!!!useEffect도 걸어주었는데 왜 안될까.. 엄청 고민을 했다.  📎 useEffect가 있어도 setState가 비동기로 처리된 이유Rea

모달 뒷 배경 스크롤을 막는 법 생각보다 간단하다. useEffect는 컴포넌트가 마운트될때(modal이 열릴 때)와 언마운트 될 때(modal이 닫힐 때) 실행된다. document.body.classList.add('overflow-hidden');이 코드는 모달이

기능 구현을 하면서 html2PDF 라이브러리를 사용해서 pdf다운로드 하는 법을 구현했다. 설치하기 🔍위 명령어를 터미널에 입력해서 다운로드 한다. 사용하기 🍥사용하고자 하는 컴포넌트에서 사용해주면 된다. (예시)이렇게 사용하면 생각보다 간단하게 pdf다운로드 기

리액트에서 동등 비교는 ==나 ===가 아닌 Object.is이다. Object.is는 ES6에서 제공하는 기능이기 때문에 리액트에서는 이를 구현한 폴리필(Polyfill)을 함께 사용한다. (폴리필(Polyfill)은 특정 웹 브라우저에서 지원하지 않는 최신 기능이

함수란? 작업을 수행하거나 값을 계산하는 등의 과정을 표현하고, 이를 하나의 블록으로 감싸서 실행 단위로 만들어 놓은 것 먼저 function으로 시작해 }로 끝나는 부분까지 함수를 정의한 부분이다. function뒤에 오는 것이 함수명, 그리고 함수의 입력값으로 받

16.8버전이 나오기 전까지 리액트에서는 모든 컴포넌트가 클래스로 작성돼 있었다. 즉 함수를 컴포넌트로 작성하기 시작한 건 리액트 역사로 보았을 때 비교적 최근의 일이다. 과거에 작성된 리액트 코드를 읽기 위해서, 또 그러한 코드를 함수 컴포넌트로 개선하기 위해서 자바

함수 컴포넌트의 구조와 작동 방식, 훅의 원리, 의존성 배열 등 함수 컴포넌트의 대부분의 기술이 모두 클로저에 의존하고 있다. 함수와 함수가 선언된 어휘적 환경(Lexical Scope)의 조합여기서 '어휘적 환경'이라는 말은 꽤 난해하게 받아들여진다. add함수 내