프로젝트 일자별로 블로그를 작성하려 하였지만, 페이지 구현하는 것에 신경쓰다보니 일자별로 작성하는게 엄청 힘들다는 일이라는 것을 다시 한번 깨닫고 있다..

그래서 프로젝트를 진행하면서 배운 기술에 대해 블로그를 통해 나도 다시 한번 상기한다고 생각하면서 정리를 해보려고 한다.

지금 내가 정리하는 것은 홈페이지를 보면 흔히 볼 수 있는 TAB 버튼에 대한 기술이다.

내가 사용할 때는 상당히 단순해보이지만 실제로 구현하려니 이게 뭐지... 하다가 결국 친구를 통해 배웠고, 이 배움을 같이 공유하고자 블로그를 작성한다는 것을 다시 한번 강조한다.

1. Tabs.js 상수데이터 생성하기

• 일단 제일 먼저 해야하는 것은 TABS.js 상수데이터 파일 생성이었다. TAB은 몇 개의 이동 관련 탭이 생길지 모르고, 변하지 않는 값이기 때문에 먼저 파일을 생성해놓고 끌어쓰는 것이었다.

• 나는 3개의 TAB을 이용할 것이기 때문에 3개의 상수데이터를 생성했다.
  

• 상수데이터에는 id, 내가 라우터를 이용해 이동할 url, 탭의 title 이 3가지 내용이었다.

2. Tab.js Component 생성하기

• 상수데이터를 배열 로 만들었기때문에 이제 이걸 map을 이용해 데이터를 가져오면 되기 때문에 Tab.js Component를 하나 새로 만들어주었다.

• 상수데이터는 실제 탭 버튼이 들어갈 메인페이지에서 받아 props로 넘겨주어야 하기 때문에 TABS라는 props를 받아주고, 그 받은 Tabs의 데이터를 이용하여 map 함수를 사용해주었다.

• map 함수를 사용하지 않는다면 <li> 태그를 3개를 사용해주어야하지만, map 함수를 이용하여 반복해 줄 것이기 때문에 <li> 를 하나만 사용하고, <li> 안에는 map함수를 사용할 때 꼭 부여해줘야하는 key값을 객체안에 만들어둔 id로 가져오고, <Link> 태그를 이용해 이동할 url, Tab의 Title 을 각각 props를 이용해 가져왔다.

• 저 3가지 props로 받아오는 것들이 1번에서 생성해두었던 TABS 상수데이터 객체의 각각의 키 값이라는 것을 잊지 말도록 하자.

3. Router 지정해주기

• Tab 버튼을 누르면 페이지에 대한 랜더링만 일어나고 실제로 페이지를 이동할 것이 아니기 때문에 동적라우팅을 사용해주었다.

• 나는 마이페이지 에서 탭을 이용해 각각 다른 데이터를 불러올 것이기 때문에 /mypage 만 있었던 라우터에 /:tabId 를 추가로 붙여주었다. 내가 TAB 을 누를 때마다 해당 tabId를 붙여준다는 것인데 그 것말고도 바로 아래에 또 하나가 추가된 것을 볼 수 있을 것이다.

• 저 위의 /mypage/:tabId 만 있다면 일반적으로 /mypage path 이후에 / 뒤에 무언가의 값이 들어가지 않으면 아무것도 뜨지않는 현상이 발생하기 때문에 추가한 것이라고 설명할 수 있었다.

• 처음 mypage라는 곳에 들어왔을 때 Navigate를 이용해 userinfo 링크로 바로 이동하도록해서 무조건 처음 mypage를 들어가게되면 userinfo Tab으로 들어가도록 한 것이다.

• 뭐라 설명해야 이해가 잘 될지는 잘 모르겠지만, 친구 말로는 아래에서 Navigate를 이용해 userinfo로 바꾼 뒤 useEffect 로 인해 새로 랜더링 되면서 /mypage/:tabId 여기 조건에 만족되어 페이지가 랜더링 된다고 한다. (Navigate 기능 자체에 useEffect가 내장되어있다고 한다?)

4. useParams

• useParams는 내가 Router에서 지정해두었던 /:tabId의 값을 가져와준다. 이 값을 실제로 가져올 메인페이지인 마이페이지 컴포넌트에서 params를 선언하고 console.log 를 찍어보면 탭을 누를 때마다 내가 원하는 값이 불러와 지는 것을 볼 수 있다.

• 일반적으로 params로 가져오면 객체로 들어와 key 와 value 로 값이 받아와지는데, 이걸 tabId로 useParams를 받아오면 value 만 들어오는 것을 확인할 수 있다.

5. Tab.js 에 props 넘기기

• 아까 2번 에서 만들었던 Tab.js 에 상수데이터를 넘겨주기 위해서 Tab 컴포넌트에 props를 넘겨주었다.

6. tabId에 따라 Component 랜더링 시켜주기

• 아까 useParams를 이용하여 받아왔던 tabId가 있었는데, 이 내용을 이용해 이제 컴포넌트만 불러와주면 이 기능에 대한 설명은 끝이다.

• 내가 만들어둔 정보에 맞는 컴포넌트 넣어주기.. 아직 나는 컴포넌트를 다 만들어두기 전에 기능을 먼저 구현해놓은 거기 때문에 2 가지의 예를 화면으로 첨부할 생각이다.

• 컴포넌트화가 아직 되지않은 태그들 붙이기, 컴포넌트화 된 컴포넌트 붙이기.

6-1. 컴포넌트화가 아직 되지않은 태그를 조건에 맞게 띄워주기.

• 조건을 풀어보면 tabId가 userinfo 인 경우 &&를 이용하여 회원정보를 불러오는 창이다. 이 아이는 아직 컴포넌트로 만들어두지 않았기에 태그 그 자체를 붙여놓았다. (나중에는 데이터들도 하드코딩이 아닌 백엔드에서 받아오는 데이터로 바꿀 것이다.

6-2. 컴포넌트화 된 컴포넌트 붙이기

• 짧고 간결하다. 이미 UI를 구현해둔 채로 만들어둔 컴포넌트이기 때문에 tabId가 recentorder 라면 컴포넌트에 있는 것들을 불러온다.

---

이렇게 하면 탭 관련 기능에 대한 설명이 끝이난다. 아직 나는 동적라우팅이라는 개념을 완벽하게 이해하지 못했지만, 계속 계속 써가고 공부하며 익숙해지는 방법밖엔 없을 것 같다.