React

props와 state는 React 에서 데이터를 다룰 때 사용하는 개념이다.props : 부모에서 자식 컴포넌트로 데이터를 넘겨줄 때 사용하며 , 직접적으로 수정할 수 없는 값이다.state : Component 내부에서 관리하는 데이터로, 변경이 가능한 값을 말한다

What is State ??컴포넌트는 사용자와의 상호작용 결과로서 화면을 리렌더링 할 때가 자주 있다. 예를 들면 사용자가 Form에 정보를 입력했다던가, 버튼을 클릭해서 이미지를 보여주게 한다던가 하는 동작 말이다.이렇게 컴포넌트는 로직의 처리를 위해 특정한 값들을

출처리액트는 기본적으로 단방향 데이터 흐름을 가지고 있다. 부모 -> 자식 하지만 부모 컴포넌트에서의 상태가 하위 컴포넌트에 의해 변하는 경우가 종종 있다.예를 들면, 하위 컴포넌트에서의 클릭 이벤트가 부모의 상태를 바꾸어야만 하는 상황이 왔다면, 이를 해결할 수 있는

useRef는 .current 프로퍼티로 전달된 인자로 초기화된 변경가능한 ref 객체를 반환한다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지될 것useRef는 리액트 Hook의 한 종류로 Ref는 reference의 줄임말이다.useRef를 이용하면 특정한 D

useEffect() 함수는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업(Side Effect)을 실행할 수 있도록 하는 리액트 Hook 이다.여기서 SideEffect 는 컴포넌트가 렌더링 된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 뜻한다.useEffec

useReducer()는 useState()와 같은 상태 관리, 상태 업데이트 훅이다. 변경할 값이 많을 때, 즉 상태 관리할 데이터가 많아질 때 주로 많이 사용한다. 좀 더 구조화된 방식으로 상태를 관리하고 싶을 때 사용할 수 있다. const [state,di

첫번째로 사이트에서 APIKEY를 가져와야 한다.https://openweathermap.org위의 링크를 타고 들어가서 회원가입을 한 후에 자기 닉네임 -> my API Keys 에 들어가서 API 키를 가져오면 된다.우선 사용자의 현재 위치를 가져오기 위해

리액트에서 라우터 사용 시에 useParams 훅을 사용해서 url 의 동적인 파라미터 정보를 가져올 수 있다. 여기서 말하는 동적인 파라미터란? url 구조에서 ...url/path/1 에서 이 1이 파라미터가 되는 것이다.리액트의 useParams 훅으로 게시글 I

낙관적 업데이트 낙관적 업데이트의 개념은 다음과 같다. 데이터가 실제 서버 에 반영되기 전에 미리 UI에 반영하여 사용자 경험을 향상시키는 기법 사용자가 서버 응답을 기다리지 않고도 즉각적인 피드백을 받을 수 있게 해준다. 낙관적 업데이트의 주요 단계는 이렇다. 우선 업데이트를 수행하기 전에 현재 상태를 저장해야한다. 서버 요청이 실패했을 경우 ...

렌더링과는 별개로 변수를 사용하거나 DOM 요소에 접근할 때 사용되는 기능이다.useState 의 경우 값을 바꿀 때 화면도 렌더링 되지만, useRef는 렌더링과 관계없이 변경 가능한 값들을 가질 수 있다.=> Ref는 State와 비슷하게 어떠한 값을 저장해두는 저

React Query, SWR 등 유용한 데이터 패칭 라이브러리가 많지만, 때때로 가볍게 fetch만으로 구현하고 싶은 상황도 있어요. 이번 글에서는 fetch, useState, useEffect만으로 로딩, 에러 처리 포함된 데이터 패칭 로직을 직접 구현해볼거에요.

프로젝트 진행 중, 특정 아이템의 선택 상태 최대 개수를 기존 3개에서 5개로 늘렸습니다. 원래는 추가하기 버튼을 클릭할 때 서버로 선택 상태 정보를 전송하고, 내부 로직에서 선택된 아이템 개수와 최대 개수를 비교하여 toast를 띄우는 방식이었습니다. 그런데 해당 기