[TIL] 중첩라우팅 및 전역 상태 관리 (상태올려서 props drilling, Context API) (24.01.31 - 34일차)

배열 상태의 불변성 관리

추가: 새 요소를 배열에 추가할 때는 스프레드 연산자(...)를 사용해 기존 배열을 복사하고 새 요소를 추가해요.

const [items, setItems] = useState(['사과', '바나나']);

const addItem = (item) => {
  setItems([...items, item]);
};

제거: 특정 요소를 제거할 때는 filter 메서드를 사용해 해당 요소를 제외한 새 배열을 생성해요.

const [items, setItems] = useState(['사과', '바나나']);

const removeItem = (targetItem) => {
  setItems(items.filter(item => item !== targetItem));
};

수정: 특정 요소를 수정할 때는 map 함수를 사용해 해당 요소만 업데이트된 새 배열을 생성해요.

const [items, setItems] = useState(['사과', '바나나']);

const updateItem = (targetItem, newItem) => {
  setItems(items.map(item => item === targetItem ? newItem : item));
};

객체 상태의 불변성 관리

const [user, setUser] = useState({ name: '지수', age: 20 });

const updateUser = (newValues) => {
  setUser({ ...user, ...newValues });
};

⇒ name 속성을 저기서 빼고 싶다면??

const newUser = {…user};

delete newUser.name;

setUser(newUser);

React Router

---

라우팅: 갈곳을 매핑시켜주는것

(우리처럼) 웹에서의 표준적인 라우터 시스템을 구현할땐

⇒ BrowserRouter

path, element 두가지가 필요 (경로와 보여줄것)

클론 받은다음에 리스트가 안불러와지면 거의 env 문제이다.

.env.template파일에 토큰 주소 넣어주고, env파일로 파일

동적 라우팅

---

movieListItem.jsx
<Link to={`/movies/${movie.id}`} className={styles.wrapper}>
      <img
        src={"https://image.tmdb.org/t/p/w500" + movie.backdrop_path}
        alt={movie.title}
      />

      <h6>{movie.title}</h6>
    </Link>

App.jsx에서

<Route
          path="/movies/:movieId"
          element={<div>이건 영화 상세페이지에요.</div>}
        />

★ Props drilling실습 & 상태 올리기.

---

로그인 상태시 listItem컴포넌트에 좋아요 버튼 생기도록 하기.

• isLoggedIn상태를 Lifting한다 (상태올리기)
• 그리고 상태를 필요로 하는 지점까지 drilling하여 내린다.

전역 상태 관리기법

---

Redux

Flux라는 단방향 아키텍처 이후로 Redux가 나왔다.

Redux란 외부에 저장소 하나의 store를 만든다. 그리고 거기에 상태를 저장. 상태A등

⇒ 필요한 상태를 애들이 Store에서 가져가도록 하는 방식

Zustand

외부에??

★Context API

전체를 감싸버린다.

redux와의 차이는 context api는 컴포넌트 트리와 분리되는것이아니라, 내부에 같이 존재하긴한다.

오늘의 이슈

영화 fetching 오류

useparams오류 react-router-dom에서 import해야하는데 react에서 받아오는걸로 코드작성 되어잇엇음

컴포넌트는 인자를 한개를 받는다.(props객체) ⇒ 그 객체를 구조분해해서 여러개로 받는것이다.

Provider에서 주는 value값(객체)의 프로퍼티가 isLoggedIn, signIn, logOut 인데, 없는 값인 setIsLoggedIn()을 호출하니까 에러가 뜨는거.

에러가 발생했다면 함수가 아니라고 나온 저 set함수의 근원지를 찾아가라.

Provider 중첩

---

두개일 경우

AuthProvider

ProfileProvider

⇒ 어떤 걸 부모로 놓을지

부모에서 쓰는 것을 자식이 쓸수있다.

자식이 쓸수있는걸 위에선 쓸수X