230621

useState : 단점 컴포넌트 밖에서 사용할 수 없음

useReducer : 컴포넌트 밖으로 꺼내서 사용, 상태변화 코드를 분리시켜서 사용할 수 있는 리액트 훅 기능 중 하나

 

useReducer 사용방법

const [count, dispatch] = useReducer( reducer, 0 )

*두개의 인자값 리듀서(상태변화함수), 초기값

*reducer : 역시 두개의 인자값을 받음 reducer( state, action) 

*dispatch 상태변화의 촉발함수 인자값은 무조건 객체타입

 

---

useMemo( ) 기능을 활용한 방법을 "메모이제이션" 기법

useMemo( callback,  의존성배열) 

상태최적화 : 어떠한 상태를 최고의 단계로 업그레이드 해놓는 것.

 

---

리액트는 SPA(single page application) 방식 사용 (csr (client side rendering) )

<-> MPA(multi page application) (여러개의 html파일 -> ssr(server side rendering) 서버에서 해당 페이지 요청)

 

*라우터 : 데이터 경로를 실시간으로 지정해주는 역할을 하는 무언가

라우팅이란 어떤 네트워크내에서 통신 데이터를 보낼 경로를 선택하는 일련의 과정 

리액트 라우터 사이트 참고 

https://reactrouter.com/en/main

Home v6.13.0

 

 

설치

터미널에 npm i react-router-dom 입력

inde.tsx에 import BrowerRouter.

그리고 렌더 부분최상단에 브라우저라우터.

app.tsx

 

>동적 경로 라우팅

특정페이지에 값을 부여해서 url을 생성해준다.

>동적경로라우팅 만드는방법

> url 파라미터 

> 쿼리스트링 (일반적사용) url?key=value&key=value&

> useParams url 파라미터로 전달한 id 값을 가져올떄 사용

> useSearchParams( ) : url