리액트 React

: 단일 페이지에 다중 페이지로 구현해주는 패키지. 페이지 간 이동이 가능해진다 !설치하기1\. 페이지 컴포넌트들 작성.2\. Router.js 파일 생성. router를 구성하는 설정 코드 작성.(폴더구조 : src > shared > Router.js)3\. Ap

: 다른 페이지로 보내고자 할 때 path로 페이지를 이동 시킬 수 있음.useLocation : 현재 위치하고 있는 페이지의 여러가지 정보를 얻을 수 있음.useParams: 현재 routing 페이지로 넘어온 parameter들에 대한 정보를 얻을 수 있음. ->

React Router dom useParams * * : 라우터 사용시 파라미터 정보를 가져와서 사용하고 싶을 때 Route Path` 와 일치하는 동적 매개변수(:id`) ket/value 쌍의 객체를 반환한다. 페이지의 주소를 정의할때, 유동적인 값을 전

React-Router useNavigate (Hook) : useNavigate는 지정한 경로로 페이지를 이동시키는 기능과 두번째 인자를 통해 이동시킬 페이지에 보낼 데이터를 지정하는 기능도 가지고 있다. 1) 페이지 이동을 위한 경로 지정 - 지난 게시글 참고

-

useEffect : 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook 쉽게 말해 어떤 컴포넌트가 화면에 보여졌을 때 내가 무언가를 실행하고 싶다면? 또는 어떤 컴포넌트가 화면에서 사라졌을 때 무언가를 실행하고 싶다면? useEffect

useRef : DOM 요소에 접근할 수 있도록 하는 React Hook. 설정된 ref 값은 컴포넌트가 계속해서 렌더링 되어도 unmount 전까지 값을 유지된다는 특징을 가지고 있어 저장공간의 역할로도 쓰인다. 사용방법 >#### * 저장공간으로 사용하기

useContext : [공식문서 ] ' context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있습니다. ' 기존 props 를 통한 데이터 전달방식은 부모에서 자식으로 또 그 자식으로 그 자식의 자식으로.

컴포넌트 성능을 최적화(Optimization) 한다? 리액트에서 렌더링은 = 비용으로 최대한 줄여야 한다. 불필요한 리렌더링을 막는 작업을 최적화(Optimization)한다고 한다. 리액트에서 불필요한 렌더링이 발생하지 않도록 최적화하는 대표적인 방법은 세가지가

* Recoil Hooks * 1. useRecoilState atom의 상태를 구독. useState Hook과 같이 배열의 첫번째 파라미터로 상태, 두번째로 상태에 대한 setter 함수를 반환. 2. useRecoilValue setter 함수 없이 atom의