1. 리엑트
ㄱ. useState
- 컴포넌트의 상태를 관리할 수 있음
- props로 부모컴포넌트에서 자식컴포넌트로 데이터를 전달해줄수있음
ㄴ. useEffect
- 렌더링 이후에 실행할 코드를 만들어줌
useEffect(감시 대상이 변하면 동작 할 콜백, [감시대상])
으로 작동함
- 렌더링될때마다 실행시키고싶으면
useEffect(() => { console.log("렌더링 될때마다 실행"); });
- 맨처음 렌더링될때만 한번실행시키려면
useEffect(() => { console.log("맨 처음 렌더링될 때 한 번만 실행"); },[]);
- 업데이트가 될때마다 실행시키려면
useEffect(() => { console.log("name이라는 값이 업데이트 될 때만 실행"); },[name]);
ㄷ. useRef
- 컴포넌트나 HTML의 DOM의 요소를 ref로 관리할 수 있다.
ㄹ. useMemo & useCallback
- 의존성 배열에 적힌 값이 변할 때만 값, 함수를 다시 정의할 수 있다.
- 주로 렌더링 성능을 최적화해야 하는 상황에 사용한다.
- 렌더링마다 새롭게 함수가 추가되는 것을 방지하고 감시 대상이 변하지 않는 이상 함수를 새롭게 생성하지 않는다.
2. 리덕스
- action : action은 상태(state)를 바꾸는 방식이다. 반드시 type필드가 있어야 한다.
- dispatch : action을 발생시키는 것으로 action 객체를 파라미터로 받는다.
- reducer : 변화를 일으키는 함수로 action의 결과로 상태를 어떤 식으로 바꿀지 구체적으로 정의하는 부분
- store : 리덕스를 적용하기 위한 중앙 저장소 이며, 단 한 개만 가질 수 있다. 상태를 읽을 때는 getState() 상태를 바꿀 때는 dispatch()를 호출한다.
- 상태를 전역적으로 관리하기 때문에 어느 컴포넌트에 상태를 둬야할지 고민할 필요가 없게 한다.
- 비동기 처리시 redux-saga나 redux-thunk같은 미들웨어가 필수이다.
-단점 : Redux는 클라이언트 데이터를 관리하기에 적합하지만 서버데이터를 관리하기엔 적합하지않고, Redux로 서버관리를 하려면 Redux-saga/Redux-thunk등 비동기 처리를 위한 라이브러리를 설치해야하고, 불필요한 Action 호출, 캐싱 처리 및 관리 문제 등이 생김 즉 보일러플레이트가 커짐!
3. 리엑트쿼리
- React Query는 서버 데이터관리를 관리하기에 적합함.
- 그래서 클라이언트 데이터를 관리할때는 Recoil, Redux 등과 같이 사용함!
- Redux에 비해 보일러플레이트구조가 단순해지고 onSuccess/onError 핸들링을 간편하게
4. 리코일
- 초기 세팅이 정말 간편하고 recoil 라이브러리 외에 따로 설치해야 될 것들이 없어서 좋다.
- atom, selector 기능만 알고있다면 쉽게 구현할 수 있다.