React JS

Outlet의 기능 페이지의 특정 컴포넌트를 어느 상황에서나 항상 display 하고 싶을 때 사용(고정된 헤더, 사이드바 등). 항상 고정되어 있어야 하는 컴포넌트 라우트에 Outlet을 넣으면, 그 자리에 자식 컴포넌트 라우트들이 들어간다. path에 맞게끔 D

Sub2는 <themeContext.provider> 안에 들어있다. 그리고 Sub3는 Sub2 안에 있다.<themeContext.provider> 로 감싸진 부분 안에서 Sub2와 Sub3의 useContext가 뱉어내는 값이 value = {{ bord

무한로딩 현상

그냥 남의 글 보고 코드 베꼈는데....잘 동작한다...왜지...?아무튼 굿 😶\+토글 아니고 모달 창이라고 해야 하는 것 알지만 귀찮아서 코드 수정 안했음toggle box 전체를 ref로 만듦. isToggleClicked가 true이면서 && inSection.

useState가 state를 setting함으로써 리액트에게 "무엇을 해라" 라고 말해주었다면, useReducer을 사용할 땐 이벤트 핸들러로부터 "유저가 방금 뭘 했는지" 그 액션을 전달(dispatch)할 뿐이다. Reducer function 은 current

자바스크립트에서 array는 mutable하지만, 만약 state안에서 aray를 쌓고 있다면 immutable한 것처럼 다뤄야 한다. arr\[0] = 'bird'push()와 pop()등을 이용해서 array를 직접적으로 조작하면 안된다는 얘기!state 내의 ar

interface로 Provider props, selectedContext, actionType의 타입 정의createContext<Dispatch<actionType> | null>(null) 는 1) Dispatch의 generics가 actionTyp

태초에 firebase.utils.js가 있었다....querySnapshot은 이렇게 생겼으며...docs를 하나씩 매핑해서 data()를 해주니 categoriesArray 가 생긴다.categoriesArray는 요래 생겼다.useDispatch 훅을 이용해서 c

컴포넌트가 렌더링 될 때 useSelector도 실행되는데, useSelector가 selectCategoriesMap function을 사실상 캐싱하고 있지 못한다.따라서 selectCategoriesMap함수가 매 렌더링 때마다 새로 실행된다. 즉 categorie

여기까지가 dispatch 를 통해 currentUser를 업데이트하는 과정useSelector hook을 사용하여 store내부(store => user => currentUser)의 값에 접근할 수 있다.

팀프로젝트 중, 네비게이션 안의 아이콘들(svg)과 밑의 페이지 텍스트를 합쳐서 하나의 icon box로 구현중이었다. 그냥 반복되는 코드로 하나씩 집어넣는 방법도 있으나 되도록이면 컴포넌트화 하고 싶었다. 또한 클릭해서 페이지가 전환됨에 따라 아이콘과 텍스트 색이 변

isModalOpen이 true일 때에만 요소들이 보여진다.ModalBackdrop은 모달이 열렸을 때 뒷 배경 딤처리를 해주기 위해 감싸진 박스이고, Wrapper가 모달 영역이다.모달 내부는 Body부분과 ModalButton 부분으로 나누어진다. 먼저 모든 모달에

기상 시간을 선택하면 예상 수면 시간을 계산해주는 기능을 구현하는 중에, 셀렉트 박스를 만들어야 했는데 라이브러리를 쓰면서는 디자인 시안과 완전히 똑같게 구현할 수가 없을 것 같아 걍 직접 만들었다.시간,분 각각의 셀렉트 박스가 필요해서 하나의 컴포넌트로 만들고 불러와

디자인 시안과 똑같은 캘린더를 만들고 싶었는데, 라이브러리를 사용하면 스타일 적용이 불가능할 것 같아서 아예 자바스크립트로 새로이 만들었다. 참고 블로그 의 코드를 거의 똑같이 따라 작성한 것에 불과하지만, 나도 많이 배웠고 이 글이 또 다른 누군가에게 도움이 되길 바

먼저 root-reducer.js에 저장된 세 가지 reducer을 store에 담는다.console.log(store.getState())을 찍어보면 위 사진처럼 나온다. 각각의 변수에 reducer들의 초기 상태값이 담겨있다.useSelector은 store의 상태

여러 가지의 상태값을 사용하는 리액트 프로그램에서, 새로고침 후에도 값을 유지하려면 localStorage나 SessionStorage를 이용해야 한다. 특정 스토리지가 가지는 고유의 메소드(setData, getData 등)을 이용하면 값을 브라우저 스토리지에 저장하

data fetching을 위하여 흔히 사용되는 redux middleware 이다. 이 미들웨어를 사용하여 액션 객체가 아닌 함수를 dispatch할 수 있다.thunk는 프로그래밍 용어로서는 "미뤄진 작업을 처리하는 코드 조각"을 뜻한다. 함수를 작성하여 코드가 일

useNavigate는 이동 기능 외에 데이터 전송 기능도 가지고 있다. 두 번째 인자에 이동시킬 페이지에 함께 보낼 데이터를 지정해줄 수 있다!그리고 현재 페이지의 pathname을 알려주는 hook인 useLocation을 통해 데이터를 받을 수 있다.gotoNex

자식 컴포넌트가 로딩되는 동안 가벼운 대체 컴포넌트(스피너/스켈레톤 등)를 렌더링할 수 있게 해준다.children : 내가 렌더링하고 싶은 UI. 하지만 만약 이 컴포넌트가 로딩 중이라면 Suspense는 fallback에 들어있는 컴포넌트를 잠시 렌더링한다.fall

포텐데이로 진행했던 프로젝트 코드를 리팩토링 중프로젝트 진행 당시에는 API 요청을 React-Query로 관리했는데, 이번에 Redux-saga를 배우면서 한번 사용해보고 싶었다. 그래서 프로젝트 코드 내부 카카오 로그인 파트를 saga로 리팩토링했다.

이게 뭐지...getDefaultMiddleware 을 사용하면 redux toolkit에서 제공하는 기본 미들웨어를 사용하면서 + 내가 원하는 미들웨어 리스트를 따로 커스텀할 수 있다