TIL : 23.02.13

23.02.10-23.02.16 주특기 숙련 주차 / React

Dispatch

Component에서 CRD를 만들겠다 = dispatch를 사용한다.
dispatch를 사용해 reducer에게 쪽지를 남긴다고 생각하자!

Redux

: 상태관리 라이브러리
: 중앙데이터 관리소를 사용할 수 있는 패키지 (yarn/npm을 통해 추가해주어야 함)

useState의 경우 부모에서 자식으로 각각에 해당하는 props를 받고 받아 데이터를 이용하는 방식으로써 props drilling이 일어날 수 있다.
하지만 Redux의 경우 중간관리자로 한번에 데이터를 모아두었기때문에 중간에 컴포넌트를 거치지않아도, 데이터를 사용할 수 있다.

또한 각 컴포넌트가 나뉜 것이 아니므로 오류가 날 경우 각각의 컴포넌트를 관리하기보단, redux store 한가지만 확인하여 관리가 가능하다. 또한 변수를 선언해 관리할 수 있어 휴먼에러를 방지할 수 있다. (단, 모든 데이터가 아닌 꼭 필요한 데이터에만 사용함을 주의하자.)

❓useContext와 redux의 차이?
모두 Component tree에서 props를 내려주는 것이 아니라 전역에서 접근할 수 있다는 공통점이 있다. Context가 더 큰 개념에 속하지만 기능면에서 큰 차이가 있지는 않다.
단, Redux를 사용하는 이유는 Context의 경우 사용이 많아지면 Provider 또한 많아지므로 이럴 경우 Redux를 사용하는 것이 좋다.

사용예시

import {createStore} from "redux";
import { combineReducers } from "redux";
import todos from '../modules/Todos';

//reducer의 묶음
const roofReducer = combineReducers({
  todos,
});
const store = createStore(roofReducer); 
// 인자는 reducer 묶음인 Rootreducer 들어가야 함
// 여기있는 todos가 useSelector로 선택

export default store;

중앙 데이터 관리소를 redux/config/configStore.js로 만들어주고 위와 같이 정의해준다.

Reducer

이전 상태와 동작을 받아 새 상태를 리턴하는 순수 함수로 동일한 인자가 들어오면 항상 같은 값이 나와야하고, return 값으로만 소통하는 함수이다.
리듀서는 할 일을 정의하는 Action, 애플리케이션의 모든 데이터를 저장하는 State, Action과 State를 받아 새 상태를 리턴하는 Reducer를 포함한다.

사용 예시

const ADD_TODO = "ADD_TODO";
const DELETE_TODO = "DELETE_TODO";
// 변수에 할당해줌으로써 휴먼에러 방지

// Add 액션크리에이터
export const AddTodo = (payload) => {
  return {type : ADD_TODO, payload};
};
// Delete 액션크리에이터
export const DeleteTodo = (payload) => {
  return {type : DELETE_TODO, payload};
};

const initialState = {
  todos : [],
  todo: {
    id: '0',
    title : '',
    content : '',
    isDone : false
  },
};
const todos = (state = initialState, action) =>{

  switch (action.type) {
	// Add 액션크리에이터일때 하는 일
    case ADD_TODO :
      return {
        ...state,
        todos : [...state.todos, action.payload],
      };

      case DELETE_TODO :
	// Delete 액션크리에이터일때 하는 일
      return {
        ...state,
        todos : state.todos.filter ((todo) => todo.id !==action.payload),
    };
        default :
      return state;
  }
};

export default todos;

action을 ~를 ㅇㅇ해 할 때 에서 ~를이 payload이고 ㅇㅇ해 가 action객체인 셈으로 이때 ~를의 이름은 payload가 아니라 number, data와 같이 다른 이름이어도 된다.

Router

라우트 = 주소
기본 구조는 다음과 같으므로 해당 구조를 세트로 익혀두자.

const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path ="/" element={<Home />}/>
        <Route path ="/:id" element={<About />}/>
      </Routes>
    </BrowserRouter>
  )
}

export default Router;

BrowserRouter > Routes > Route 순서

React-router-dom-hooks

useNavigate

A페이지에서 B로 이동하고 싶다 할때 이용, 버튼에 적용이 가능하며 <a> 와 유사하다.
함수나, 조건을 넣어 해당 함수, 조건을 만족해야 이동이된다.

사용 예시

const navigate = useNavigate();
...
<Stprebtn onClick={()=> {navigate("/");}}> 이전으로 </Stprebtn>

이때, ("/")는 기본이 되는 메인의 주소로 설정해두었다.

useLocation

페이지의 정보, 페이지 내에서 조건부 렌더링이 가능하다.

Link (API)

useNavigate와 달리 조건없이 클릭하면 이동하는 방식

사용 예시

<StLink to={`/${todo.id}`} key={todo.id}>

Link to={"/"} 안에 주소를 넣어 사용한다.