2023.12.04 (월) TIL

진민용·2023년 12월 4일

> ### React 개인 프로젝트 심화 피드백

Q. Router에 조건문을 통해 로그인시에만 홈 화면에 접근하도록

  const [isLogin, setIsLogin] = useState();
   {isLogin ? (
        <Routes>
          <Route path="/" element={<Login />} />
          <Route path="/" element={<Layout />}>
            <Route path="/detail/:id" element={<Detail />} />
            <Route path="*" element={<Navigate replace to="/" />} />
            <Route path="/home" element={<Home />} />
            <Route path="/profile" element={<Profile />} />
          </Route>
        </Routes>
      ) : (
        <Route path="/" element={<Login />} />
      )}

isLogin이 true 일때만 보여주는 Route와 false일때만 보여주는 Route를 설정
setState가 작동시 다시 처음 app.js 부터 Refresh 된다.
true일때만 true의 조건에 설정된 Route를 랜더링, 접근 가능하며, 다른 컴포넌트는 true안의 컴포넌트에 접근 할수없다.

setState의 가장 큰 역할은 Refresh

강조: 우리 component를 반드시 보여주는 UI관점으로만 생각하지말고, 하나의 기능을 하는 TREE구조로 생각하여야 한다.(많은 수강생들이 이 부분을 처리하지 못하였다) 왜?->Component를 UI적으로만 생각하여서.

UI관점이 아닌 하나의 END_TAG <..../>로 우리는 기억해야 한다.

non-serizable 에러

데이터 값이 문자열로 들어오지 않았을 때 생기는 오류

 const newLetter = {
      id: uuid(),
      nickname: localStorageData.nickname,
      content,
      avatar: null,
      writedTo: member,
     // createdAt: new Date(),
   createdAt: new Date().toString(),
   
      userid: localStorageData.id,
    };

보기와 같이 createdAt의 new Date()가 문자열이 아닌 숫자로 Redux의 store에 들어가게 되어 non-serizable에러가 생겼다.

왜 생긴걸까?

redux라는 외부 tool을 사용하고 있음으로, 데이터(값)을 이동시기키기 위해서는 type을 문자열로 변경해야한다.toString()을 통해 문자열로 변경하여 데이터의 입출력을 형식에 맞게 구성하여 문제를 해결하였다.

어떻게 "리액트관점" 으로 사고할 것인가?

먼저 정적인 코드를 통해 보여줄UI를 고려하여 정적인 컨텐츠를 구성한다.
보여줄 부분을 하나의 부분으로 조각조각 구성한다.
무조건적인 컴포넌트화는 좋은 것이 아니며, DEPTH가 깊지 않다면 나눌필요X , 컴포넌트의 변화가 많거나, 여러조건을 충족한 공통적, 공용화할 수 있는 점이 있다면 컴포넌트화 처리한다.

우리는 언제 State로 관리 해야할까?

시간이 지나도 변하지 않는것은 State로 관리할 필요가 없다
또한 state안에 배열로 처리하는 것은 절대 권장 되지 않는다
EX)

const [isTable,setIsTable]=useState([]);

Redux

기존의 컴포넌트를 감싸고, 외부 라이브러리인 toolkit과 서로 값을 주고 받을 수 있도록 하는 것이 Redux

컴포넌트를 어떻게 생각해야 할까?

생각해봐야할 조건들

코드가 같아 보이더라도 코드가 수정되는 이유가 다르다면 같은 코드가 아니므로 분리한다
컴포넌트는 하나의 책임을 갖고 독립적인 기능을 하는 것을 말한다. 그러므로 사용되는 컴포넌트 안에서 제어되는 것이 바람직하다.
보편적으로 인정하는 하나의 기능을 하는 추상적인 비지니스 로직이 포함되어 있다면 컴포넌트 변경이 어렵다