221206_TIL

오늘 공부한 내용

• 항해99 4주차

• redux 개념 보충 공부
• react-router-dom (useParams,useLocation) 공부

 

어려웠던 내용

• Router에 대한 개념은 솔직히 처음 시작할 때 가벼운 정도로만 생각하고 들어갔었다. 하지만 너무 가볍게만 사용하려고 했던 걸까? 많은 에러를 겪게 되었다.
• 이번 에러는 정말 천만다행이라고 생각한다. 이번 트러블 슈팅 덕분에 리액트 라우터의 기본 개념에 대해 잘 알게 되었던 것 같다.

 

react-router-dom 트러블 슈팅

항해 99에서 제공해 준 router에 관한 강의를 듣고 만들고 있던 todolist에 적용을 해보기 위해 시도.

 

//App.js

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />}></Route>
        <Route path="/:id" element={<About />}></Route>
      </Routes>
    </BrowserRouter>
  );
}

App.js에 Route에 관한 값들을 미리 적어 놓는다. path는 이동할 페이지의 url 그리고 이동할 페이지를 element에 Component를 jsx문법에 맞게 표현하는 방식으로 넣어준다.

※ path="/:id"에서 ':'의 의미는 어떤 고정된 값이 아닌 유동적인 값을 받을 때 사용한다고 한다.

 

 

Card 컴포넌트에서 상세보기 버튼을 누를 경우 페이지이동을 하려고 시도.

<Link to={`/${id}`}  className="detail_btn"> 상세보기 </Link>

 

export default function Card({ todo, deleteHandler, toggleHandler }) {
  const { id, order, title, content, isDone } = todo;

  return (
    <StCard>
      <div className="content_container">
        <div className="title_container">
          <span className="todo_title">{title}</span>
        </div>
        <span className="todo_content">{content}</span>
      </div>
      <div className="btn_container">
        <Link to={`/${id}`} className="detail_btn">
          <StButton className="detail_btn">상세보기</StButton>
        </Link>
        <StButton className="delete_btn" onClick={() => deleteHandler(id)}>
          삭제하기
        </StButton>
        {isDone ? (
          <StButton className="confirm_btn" onClick={() => toggleHandler(id)}>
            완료하기
          </StButton>
        ) : (
          <StButton className="cancle_btn" onClick={() => toggleHandler(id)}>
            취소하기
          </StButton>
        )}
      </div>
    </StCard>
  );
}

 

 

첫번째 시도

 

상세보기 버튼을 누르면 About 컴포넌트로 페이지 이동을 하게 된다. 

렌더링 이후 useParams를 사용하여 url의 파라미터 값을 읽어온다. 

다음코드는 파라미터 값을 확인해보고자 시도 한 내용이다.

export default function About() {
  let param = useParams();

  console.log(param);
  return <div>현재 파라미터는{param} 입니다.</div>;
}

 

 결과 페이지 ↓

 

console.log은 id값이 잘 나오는데 이상하게 return에서는 param을 가져오지 못했다.

이게 왜이러지? 하며 생각해 본 결과,

지금 뜬 에러는 useParams로 받아온 반환 값에는 객체가 담겨있기 때문에, 객체를 리턴하는 곳에 그대로 사용해 버리는 경우 브라우저에 어떻게 반환을 시키냐는 것 내용이었다.

객체 형태가아닌 params.id로 정확하게 값을 찍어주어야 했다.

 

return <div>현재 파라미터는{param.id} 입니다.</div>

 

 

 

두번째시도

 

useparams함수를 쓰면 url에 있는 id값을 객체로 들고 오는건 이해 됬다. ok!

param.id라고 사용하는 것을 그냥 param으로 사용하려면 브레이스({})안에 변수를 담아서 설정하면 param으로 사용하면 되지 않을까? (비구조화 할당&구조분해할당의 의미로 해석)

이런 생각을 가지고 코드를 작성해보고 슈웃~

 

export default function About() {
  let { param } = useParams();

  console.log(param);
  return <div>현재 파라미터는{param} 입니다.</div>;
}

 

결과페이지 ↓

 

롸?

console.log도 렌더되는 곳에서도 undefined가 나왔다.

이게 도대체 어떻게 왜 값을 가져오지 못하는 걸까? 

분명 구글링해서 Router에 대한 개념정리를 해놓은 블로그들에는 {params} 의 형태로 사용해서 설명을 해놓은 것 같았는데?

 undefined라는 것은 애초에 값자체가 담기지 않았다는 의미.

 

너무 이해가 가지 않았던 부분이었기도 했고,  예상하지 못했던 부분이었기 때문에 생각보다 오랜시간이 걸렸던 것 같다.

KeyPoint는 Router 설정을 처음 해놓았던 App.js였다.

 

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />}></Route>
        <Route path="/:id" element={<About />}></Route>
      </Routes>
    </BrowserRouter>
  );
}

 

 분명 About 컴포넌트로 넘어갈 때 path는 /:id로 정해줬다. 바로 이게 KeyPoint 였던 것.

 

우선 path에 id는 어떤 변수의 데이터가 들어간 것이 아닌 상징적인 의미로 정해놓은 것이기 때문에(변수의 네이밍의 의미와 비슷), good이라던지 pass라던지 params 라던지 어떤 값이든 상관은 없다.

그저 개발자들 스스로가 이해하기 쉽게 키 값을 적은 것.

다음으로 중요한 점은 useParams는 redux로 상태관리를 하는 것도 아니고 useState로 props로 전달하는 것이 아닌 url로 값을 전달한다는 점.

 

그럼 About 컴포넌트에서도 전달받은 키 값을 그대로 사용해줘야한다. id로 키 값을 부여하였으니 사용할 때에도 id로 사용해야 한다는 것.

 

export default function About() {
  let { id } = useParams();

  console.log(id);
  return <div>현재 파라미터는{id} 입니다.</div>;
}

 

결과페이지 ↓

 

사실 useParams를 어떻게 사용하는지는 개발자 본인들의 편한 방식으로 사용하는 것이다. 변수를 구조분해할당을 하여 사용할 것인지, 아니면 그냥 변수 그자체로 받아 사용 할 것인지.

 

 

 

궁금한 내용 / 부족한 내용

•  리덕스와 라우터에 관한 개념은 안다고 아는 것이 아니였던 것 같다. 아직 많이 미숙하고 부족한 점들이 많기 때문에 계속해서 코드를 작성해보면서 익숙해져야 한다고 생각했다.

 

느낀점

처음 숙련주차를 시작할때만해도 개념들이 너무 헷갈려서 힘들었던 것 같은데, 어느 사이 자연스럽게 이해가 되기 시작했고 코드를 분석하고 작성하는게 즐거워졌던 것 같다.

진짜 배움의 연속은 멘탈의 갈림과 행복을 찾아 떠나는 것일까

이 내용을 쉽게 이해하시고 다루는 분들이 부럽기도 했고 잘 사용하겠노라 의욕이 나기도 하는 날이었다.

앞으로 새롭게 배울 내용들도 물론 많이 힘들것이라 생각되기 때문에 쉽게 지칠 수 있겠다는 생각이 든다.

하지만 성장 할 수 있는 기회를 얻음에 감사하고 새로운 경험을 하면서도 그 안에서 얻는 행복이 있을 것이라 믿으며 힘을 내보도록 하자! 화이띵~

 

내일 할 일

• 리덕스 개념은 잃어버리지 않게 다시 한번더 복습해보기
• 시간이 나면 다음 주차에 배울 과정을 미리 예습해보기
• 해보고 싶은 공부 해보기
• 프로그래머스 문제 풀어보기