2024-11-11(개발뉴스,react router,useEffect,전역상태관리)

https://velog.io/@sehyunny/split-js-into-two-languages

(번역) 자바스크립트를 두 개의 언어로 분리해야 할까요? 구글이 주도하는 새로운 제안에 대해

구글의 한 엔지니어가 공식 표준화 위원회에서 자바스크립트를 두 가지 언어로 분리하는 제안을 발표

=> 런타임 엔진이 구현하는 코어, 이 코어로 컴파일되는 도구에 의존하는 확장된 변형 언어

제안된 솔루션은 대부분의 새로운 기능이 자바스크립트 엔진이 아닌 툴에 구현되도록 앞으로의 접근 방식을 바꾸는 것

 

react router

path="*" : 위에 설정한 path외에 모든경로

<Routes>
    <Route path="/" element={<Home />} />
    <Route path="/detail/:id" element={<Detail />} />
    <Route path="*" element={<h1>없는 페이지입니다.</h1>} />
</Routes>

path="~/id? " : id가 있어도 되고 없어도 될때

<Route path="/detail/:id?" element={<Detail />} />

useNavigate : 페이지 이동 전에 처리할 이벤트 핸들링이 있을 때만

import React from 'react';
import { useNavigate } from 'react-router-dom';

function ProfilePage() {
  const navigate = useNavigate();

  const handleSaveAndNavigate = () => {
    // 페이지 이동 전에 수행해야 하는 작업
    console.log("데이터 저장 중...");
    // 작업 완료 후 이동
    navigate('/dashboard');
  };

  return (
    <div>
      <h1>Profile Page</h1>
      <button onClick={handleSaveAndNavigate}>
        작업 후 Dashboard로 이동
      </button>
    </div>
  );
}

export default ProfilePage;

 

useEffect

• useEffect 의 콜백안에서의 return 은 unmount 또는 clean up 을 의미할 때만 사용
• return 뒤에는 함수가 오도록 하기

로컬스토리지에 초기 상태 저장할 때는 초기화 함수를 사용

const initState = () => localStorage.getItem("text") || [];
const [texts, setTexts] = useState(initState);

 

Context API

• React 자체적 전역상태관리 API
• Context Provider의 모든 children 컴포넌트들에게 context value 를 공유

 

*리액트에서 구독 : 대상이 바뀌면 컴포넌트를 리랜더링, 주솟값 가져오기(랜더링시 주소 변경)

---

redux 

• 선택적 사용 구독 가능(context는 value가 변경되면 모두 리렌더링됨, 물론 따로따로 context만들어서 가능하나,.,,,)
• DevTools 를 이용한 디버깅 용이
• 압도적인 사용률 및 가장 오래된 역사

Store

모든 전역 state들을 관리하는 단 하나의 상태 저장소 (→ 단 하나의 객체)

const store = configureStore({
  reducer: {
    todos,
    auth,
  },
});

Reducer

• state 변경 함수
• 매개변수로 기존상태와 액션객체를 받음
• 상태 변경 후 최신 상태를 Store에 제공 (리턴)
• slice : 액션 생성자(addTodo), 리듀서(addTodo의 value)를 합침

const todoSlice = createSlice({
  name: "todos",
  initialState,
  reducers: {
    addTodo: (state, action) => {
      console.log("addTodo 실행");
      state.push(action.payload);
    },
  },
});

Action

• { type, payload } 형태의 객체
• 리듀서 함수에게 전달되는 인자 → dispatch(액션)
• 리듀서에게 요구할 상태변경 작업에 대한 정의를 나타내는 객체 (상태 변경 요청서)
• type 은 필수 속성, payload는 선택 속성
• action.type은 중복절대 안됨

Dispatch

• 액션 객체를 인자로 받아 리듀서를 호출시키는 함수
• dispatch(액션객체) 가 실행되면 리듀서 함수의 매개변수로 action 객체를 전달하며 호출
• 액션 객체를 리듀서에게 전달하는 방법

const onSubmitTodo = (event) => {
    event.preventDefault();
    dispatch(addTodo(newTodo));
    setContent("");
  };