react
1.react-router-dom : loader, actions, fetchers
3가지 data api : 서버의 작업들을 클라이언트 측으로 옮겨왔다고 생각하면 된다컴포넌트 생성 전에 컴포넌트에 데이터 전달loader의 호출 시점은 컴포넌트가 랜더링 되기 전 즉 컴포넌트가 렌더링 되기 전에 api와 통신후 응답을 받고나서 렌더링에 들어감\-> 이를
2.React | useRef | ref | useState와 비교 | 사용자 지정 컴포넌트에서 ref 프롭을 바로 사용하기
사용자 지정 컴포넌트에서 ref 프롭을 바로 사용하기(원래는 안돰), ref를 받고싶은 컴포넌트(Input컴포넌트)로 가서 컴포넌트 함수를 React.forwardRef로 감싸고 매개변수 추가. 그러면 Input 컴포넌트는 forwardRef의 인수가 되는 것이고, 그
3.<div/> soup이란?
루트 jsx 요소는 1개여야만 한다.jsx가 js로 변환하면서 값 하나만 반환 가능하기 때문이다.그래서 인접한 요소들을 <div>로 감싸게 되는데, 불필요한 div요소가 중첩되어 <div> soup이 발생한다.출처: Udemy - React 완벽 가이드 wi
4.React Portals 리액트 포탈
두개의 컴포넌트가 나란히 프래그먼트로 둘러싸여 있다.문제는 없지만 DOM에 랜더링 되는 이 모달 코드는 모달처럼 보이긴 한다.하지만 의미적으로 보거나, 간결한 HTML구조를 갖췄는지의 관점으로 보면 별로 좋지 않다.왜냐면 '모달'은 기본적으로 전체 페이지 위에 표시되는
5.useEffect, useReducer 간단 정리 | react side-effect의 처리에 대해
의존성이 변경된 경우에만 실행 된다.컴포넌트 함수에서 직접 실행하지 않고 모든 컴포넌트가 재평가 된 후에 리액트에 의해 실행된다.그냥 \[]로 의존성을 지정한다면 앱이 시작될 떄 한 번만 실행한다. 이후로 의존성이 바뀔 일이 없기 때문.useState보다 복잡한 sta
6.React 컨텍스트 활용: 두 가지 접근 방법으로 상태 관리하기
📍src>store>auth-context.js이곳에는 컴포넌트를 만들것이 아니기에 케밥케이스로 작명📍src>App.js => 근데 나중에 auth-context.js로 옮겨서 한번에 관리할수있게 만들어줄 것컨텍스트를 공급하는 컴포넌트로 전체를 감싸준다. AuthC