📌 Redux-toolkit 활용

<aside>

Redux-toolkit이라는 상태 관리 라이브러리를 사용한 이유는

1. props-drilling 방지 : 컴포넌트를 세분화하게 되면서, 매개변수를 계속해서 전달해줘야 하기 때문에 코드 작성도 비효율적이고 유지/보수도 힘들게 된다. Redux-toolkit을 활용하면 매개변수를 넘겨주지 않고도 해당 컴포넌트에서 즉시 원하는 데이터를 store로부터 받아올 수 있어 훨씬 효율적이다.

2. Redux보다 훨씬 간편한 사용성 : createSlice( )를 사용하여 action과 reducer를 한 번에 생성

3. createAsyncThunk( ) 활용: 일반적으로 api 호출을 별도로 관리하였지만, createAsyncThunk를 사용하여 비동기 액션과 리듀서(즉 API호출)을 한곳에서 관리할 수 있다.

    ⇒ 유지보수가 쉬워지고 코드 가독성 향상
   

</aside>

<aside>

위의 slice는 영화와 관련된 데이터를 담은 slice로, slice 내부의 데이터를 수정할 일은 없어서 reducers는 비어있는 상태이다.

extraReducers 부분이 영화 api 호출 코드인데,

• pending : API 요청이 시작됨.
• fulfilled : API 요청 성공
• rejected : API 요청 실패 (에러 처리)

status(로딩,에러,성공) 값에 따라, 각각에 알맞은 return 값을 설정하여 관리한다.

</aside>

📌 useQuery 활용

<aside>

useQuery는 get요청과 동일한 기능을 수행하는데, 차이점이 있다면 Loading/Error 상태를 받을 수 있다는 것이다.

일반적으로 axios를 활용할 경우, 내가 자체적으로 loading/error를 나타내는 일련의 과정을 만들어내야 했다. 그러나 useQuery를 활용하면 너무나 간편하게 loading/error처리를 할 수 있게 된다.

</aside>

📌 styled component에 애니메이션 적용

<aside>

해당 keyframes는 360도 회전을 하게 만드는 애니메이션이다. 코드에는 0%와 100%만 설정 되어 있지만 중간 단계를 추가하여 다양한 애니메이션을 구현할 수 있다.

</aside>