넷플릭스 만들기 리뷰 및 복습

Page 라는 컴포넌트 만들어서 레이아웃을 전부 일정하게 유지.

• 페이지로 디자인 통일하는데 컴포넌트마다 다르게 주고 싶으면 props로 내려주기

컨텍스트 API

1. 컨텍스트 만들기 createContext()

const initialValue = {
  nickname: "",
  updateNickname : () => {}
  likedMovies: () => {}, //좋아요를 누른 영화 목록을 저장한다. movieId 들 저장.
};

const ProfileContext = createContext(initialValue);

2. 만든 컨텍스트 사용한다

export const useProfile useContext(ProfileContext)

3. 컨텍스트를 적용할 범위를 설정해 준다.(Provieder 주입)

export function ProfileProvider({ children }) {
  const [nickname, setProfile] = useState();
  const [likedMovies, setLikedMovies] = useState(); 

  const setNickname = (newNickName) => {
    setProfile(newNickName);
  };

return 안에 onChange 로 닉네임 변경되는거 다 받으면, 마이페이지에 모든게 리렌더링돼.
=> 복잡한 페이지면 부하.. => 리렌더링이 계속 되지 않는 UserRef() 를 이용하자!

useRef()

-리렌더링과 무관하게 유지가 됨.

• 기존 state 와 차이는 useRef는 참조를 보관만 해서 리렌더링만 됨.

• 저장은 하는데 값이 아닌 객체의 주소값을 담고만 있어

• ref 아래 current 아래에 값이 들어있어.

• 이것을 이용해, 버튼을 누를때만 inputValue 를 꺼내서 저장하게!

const nicknameInputRef = useRef();

리렌더링의 조건 1. 스테이트가 바뀌었을때 2. props 가 바뀌었을 때 3. 부모 컴퍼넌트가 리렌더링 되었을 때.

• 페이지 컴포넌트 안에 요소가 5000개 있어.

• 기존 Page 안에 있던 input 컴포넌트를 분리해 (스테이트를 분리하기만 하면) Page 에서 과부하 안일어나!

• 못 분리할때는 useRef 쓰는편

---

배열을 업데이트 해줄때는 불변성 제어로

배열을 삭제할때는
새로운 배열을 내보내는 filter를 사용한다

findIndex 는 있으면 인덱스, 없으면 -1 리턴.
-1은 falsy 값이 아님으로 !! 할때 못써.

---

링크가 감싸고 있어서 좋아요 눌러도 이동하는데, 이를 막기 위해
e.preventDefault 를 사용한다.

---

좋아요 버튼의 중복을 처리하는 방법

• 중복이 발생하는 순간 컴포넌트 분리를 의심하자 => 좋아요 버튼이 지금 중복임으로, LikeButton 을 컴포넌트 분리!

movie 객체 통채로 넘겨도 메모리 낭비 없나?

• 객체는 참조타입이기때문에 객체를 통채로 넘긴다 해도 메모리 걱정 안해도돼.

---

전역 상태 관리

Redux

• 단방향으로 데이터가 흘러가게 만들었어. 명세서도 필요하고 복잡... 용어가 너무 많아.. 관계도 어려움..ㅜ => 비유를 통해 암기하자.

비유

• store 라는 저장소를 만든다.

• 유튜브로 비유하면 store 안에 있는 컴포넌트가 구독한 store 안에 채널만 변경함.

• Redux는 데이터를 아무대서나 못바꾸게 해놨어.

• 데이터는 반드시 공장에서만 바꿀 수 있어. 공장의 작업지시서에 따라서만 이것대로 데이터를 바꿔줘. 이 작업지시서는 요청한 쪽(컴포넌트) 에서만 쓸 수 있어.

• 이 과정에서 우체부 같은게 작업지시서를 공장으로 보내줘.

• 공장에서는 아무 작업이나 받지 않아. 공장이 받는 작업지시서 목록이 있어.이 작업들만 해주지. ex) 1번 해줄수있고 2번 해줄수 있고. 여기에 있는것만 요청할 수 있어.

• 작업지시서에 숫자를 N만큼 올리게 하고 싶어. 컴포넌트는 작업지시서를 작성하고 여기에는 작업명, 작업에 필요한 정보 등등 필요한것도 넣고 우체부를 통해서 공장으로 보내.

데이터 저장소(상태를 저장하는곳) = 스토어 store
공장(변화시키는곳) = reducer
받아주는 작업명(공장이 가능한 작업들) = Action type
작업지시서 = Action
작업지시서를 쓸때는(컴포넌트가 지시서만들때) = Action creater
요청서에 쓰는 작업명은 = Action type
작업에 필요한 정보들 = payload

우체부(전달하는 행위) = dispatch

Zustand

• 간단하게 만들어놓은것.

• 잠깐만 해도 쓸 수 있어서 혼자 공부하기.

• 클라이언트 state 관리 용.

React Query (중요!)

• 리액트 쿼리를 요청하면 서버에서 불러와 보관하고 있고, 캐시처럼 사용하면됨.

• redux 였으면 fetch 하고 뭐하고 했는데 얜 서버의 상태와 동기화를 해줌

• 닉네임을 바꾸면 업데이트 요청을 하고 석세스 됐으면, 기존 정보 날리고, 새로운 값을 서버에서 받아오기.

• 서버 사이드 상태관리를 위해 사용함.

---

git reset --hard 로 다 지우고 pull

---

Redux 설치

https://redux.js.org/introduction/installation

순서대로 설치하자.

---

//store 안에 있는 값 꺼낼때는 useSelector 를 사용

---

컨텍스트 vs 리덕스

컨텍스트

• 컨텍스트는 저장소가 여러개. + 스코프를 지정해줘야함. + 따로따로 관리하면서 써야함.

리덕스

• store 는 하나, 공장은 여러개

• 스코프를 하나만.

리덕스를 써야할때는?!

• useSelector

공장을

• reducer

useSelector

• store에서 getState

공장에는 action 이 들어가야하고, type에 따라 switch 해서
action(type, payload) + state =>reducer

---

사용 순서

index.js 에 Provider 넣어주고. store를 생성한다음에

• reducer를 작성을 해서 action 마다 reduce 를 적용하고, 사용할때는 selector

Provider 를 빼서 index.js 에 둔 이유는?

• 최상단으로 빼려고. App return 안에 넣으면 App.js 자체에서