계속 복습하기
prop.children
강의노트
State란 컴포넌트 안에서 변할 수 있는 값
불변성이란 메모리에 있는 값을 변경할 수 없는 것
자바스크립트의 데이터 형태중에
원시 데이터는 불변성이 있고,
객체타입 = 객체, 배열, 함수는 불변성 없습니다.
useEffect는 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook
useEffect(()=>{
// 실행하고 싶은 함수
}, [의존성배열])어떤 함수를 컴포넌트가 렌더링 될 때 단 한번만 실행하고 싶으면 의존성 배열을 [ ] 빈 상태로 넣으면 됨.
전역상태관리 라이브러리인 Redux
Global state(전역상태)와 Local state(지역상태)
-
Local state (지역상태) 란?
- 컴포넌트에서 useState를 이용해서 생성한 state 입니다. 좁은 범위 안에서 생성된 State 라고 생각하시면 됩니다.
-
Global state (전역상태)란?
- Global state는 컴포넌트에서 생성되지 않습니다. 중앙화 된 특별한 곳에서 State들이 생성됩니다. 좀 더 쉽게 얘기해서 “중앙 state 관리소” 라고 생각하면 됩니다.
useState로 생성한 State는 Local State이고, 리덕스에서 생성한 State는 Global State이다.
Dynamic Route
<Route path="works/:id" element={<Work />} />useParam을 이용하면 같은 컴포넌트를 렌더링하더라도 각각의 고유한 id 값을 조회할수있음
=> Dynamic Route를 설정할때는 :id 로 설정하고, id 값은 useParams을 이용해서 각 컴포넌트에서 조회할 수 있다.
리덕스툴킷 (RTK)
코드는 더 적게, 그리고 리덕스를 더 편하게 쓰기 위한 기능들을 흡수해서 만든 것이 리덕스툴킷
=>리덕스의 전체 코드의 양을 줄이기 위해 새로운 API가 추가되었고 우리가 일일히 손으로 만들어 줘야 했던 ducks 패턴의 요소들이 어느정도 자동화됨. 바뀐 부분은 그저 모듈 파일
Slice 라는 API를 사용하여 Action Value, Action Creator, Reducer를 한번에 만들어준다!
const counterSlice = createSlice({
name: '', // 이 모듈의 이름
initialState : {}, // 이 모듈의 초기상태 값
reducers : {}, // 이 모듈의 Reducer 로직
})비동기
React Query
🌱