Liner(라이너 클론코딩) 3일차

1. Detail 페이지 구현!

오늘의 소박한 TODO

먼저 이런식으로 FakeList를 변경해주었다.

원래 list에서만 쓰려고 만들었는데 detail에서도 쓰는 항목들이 거의 비슷해서 directUrl, description, authors을 추가했다.

 

코드 색이 왜이러지?

그리고 p태그로 해두었던 title을 누르면 해당 detail페이지로 넘어갈 수 있게 Link태그로 변경해주었다.

 

app.js도 이렇게 변경! 파라미터를 받아 구현할 수 있도록 해주었다.

 

Detail.js

그 다음에는 Detail 페이지를 나타내는 컴포넌트를 만들었다.

match로 파라미터를 받아왔고, FakeList에서 id가 일치하는 데이터를 뽑아서 리턴값에 지정해주었다.

아마 for문 작업은 fakedata를 썼기 때문에 사용한 것 같다. 만약 서버와 통신한다면 id를 보내주고 서버에서 걸러낸 데이터를 보내주면 그걸 리턴값에 지정만 해주면 되겠지!

 

그리고 directUrl로 보내주는 태그는 해당 웹사이트에서 이동하는 것이 아닌 아예 새로운 웹페이지를 띄워주는 것이기 때문에 Link가 아닌 a태그를 사용했다. 

 

 

 

2. Highlight 페이지 구현!

 

오늘의 소박한 TODO 22

 

app.js

- 하..접속하자마자 /home으로 가게 하는법 아직도 모르겠다 눈물난다. 그래서.. 주먹구구식으로 코딩해놓았다.

- useEffect랑 useHistory로 렌더 되자마자 /home으로 가게 해두었는데, 이게 스카치테이프 식의 코딩이라 그냥

<Route path='home' component={ContentsList} />

이렇게만 하면 최초 접속 시에 저 컴포넌트는 안나오고 새로고침을 해야만 나타났다.

- 다시한번..정말 맘에안드지만 위의 상황 때문에 최초 접속 시, /home 이동 시 전부 ContentsList가 나오게 해뒀다.

- 그리고 foryou, highlight는 표현되는 데이터만 다를 뿐이지 형식은 비슷하기에 컴포넌트는 재활용하고 조건부렌더링을 위해 rout라는 props를 내려줬다.

 

ContentsList.js

- props로 받아온 rout로 조건부 렌더링을 해줬다. list도 하이라이트 메뉴인경우에는 하이라이트 해놓은 목록만 따로 매핑해야 함(아직 안해서 p태그로 해놨다)  하이라이트가 아닐경우(home)에는 이전에 만들어놓았던 fakelist매핑!

- 리턴값도 조건부렌더링을 걸어놨다. 상단 메뉴가 둘이 많이 달라서 상단 메뉴버튼들!

- app.js에 있던 rightMenu도 contentsList로 가져왔다. 내가 구현안할 more에 들어가면 안보일뿐더러 저것 또한 들어가있는 페이지에 따라 다르게 렌더되어야해서 props로 rout 그대로 내려줬다.

- 같은 이유로 Detail.js에도 RightMenu 컴포넌트 추가!

 

 

남은것들 - 모달, 드롭다운, CSS, sessionStorage도전

 

 

오널의 인사이트~