막상 내 상황을 객관적으로 쓰려고 하니까 부끄럽기도 하고 스스로도 아쉬운 점이 많다. 사실 파이널 프로젝트을 시작할 때쯤 나에게 기대했던 모습들이 있었는데 생각보다 한참 모르는 것 같아서 불안하기만 했던 것 같다. HTML, JS, REACT 모두 유기적으로 연결이 되어있지만 본격적으로 리액트에서 욕심이 커지게 되면서 (아무래도 곧바로 결과가 바로 보이는 장점은 크게 깨달았지만 그 구현에 어려움을 겪으면서 괴리가 커졌던 것 같다) 그리고 실습을 직접 하게 되면서 조금씩 문제점을 하나씩 찾기도 했다. 야무쌤과 팀원들과도 충분히 상의를 거쳤더니 비로소 욕심도 덜고 내가 나아가야 할 방향이 보이기 시작했다.
항상 커다란 틀을 먼저 구현해야 하고 공통 컴포넌트와 상태, 변수 등을 쑥쑥 뽑고 싶었지만 그 방법이 나에게는 아니라는 것을 깨달았다. 리액트 코드를 구현하면서 내가 필요한 컴포넌트가 생기거나 변수 정리가 필요하다고 생각할 때마다 정리를 하니 훨씬 조급함이 덜해졌다. 커다란 숲을 보는 방식보다 지금의 나는 부족했던 HTML, JS 를 채우면서 하나씩 해결하니 훨씬 수월해졌다.
또한 상원님의 말씀대로 수료 후에 JS 코드가 익숙해지기만 해도 정말 대단한 거라고 하셨다. 내 욕심이 너무 컸던 것 같다😂
어제와 오늘 야무쌤께 직접 설명을 들었던 원론과 상원님께 질문하면서 구현해봤던 내 NavBar 구현 과정을 간단하게 남겨두려고 한다. (두 분께 매우매우 감사하다..🤣😂) 그래야 다음 리액트 개발 때도 이런 식으로 따라가다 보면.. 분명 언젠가는 리액트가 친숙해있지 않을까 싶다.
HTML, JS, REACT 모두 유기적으로 연결이 되어있지만 리액트는 한 번에 스타일도 기능도 구현이 다 되다 보니까 가장 흥미가 생겼지만, 막힐 때마다 되게 초조했던 것 같다. 팀원들과 재상의 이후에 최대한 리액트와 친숙해지도록, 그리고 학습의 습에 초점을 두기로 했다.
1. 리스트 렌더링과 원론
공통적으로 네비게이션 바가 우리 팀이 구현하고 싶어했던 모임과 피드에서도 사용되고, 모임에서 내 모임에 들어갈 때 또 네비게이션 바가 바뀌었기 때문에 네비게이션 바를 처음에 내가 구현해서 큰 틀을 잡고 싶었다.
그러나 막상 너무 커다란 유기체부터 생각을 하려고 하니까 어떻게 짜야 할지 감도 오지 않고 수업 때 학습했던 네비게이션 바 코드를 보다가 결국 질문을 드리러 갔다. 우선 함수를 작성할 때 상위 컴포넌트와 하위 컴포넌트의 이름 작성부터 생각해보았다. 현재 바의 상태는 상위 컴포넌트인 NavBar 위에 하위 컴포넌트인 NavItem이 뿌려지는 형태이다. props 객체를 받아서 뿌리면 가장 좋은 형태가 될 것이다.
JSX는 리액트를 통해서 JS 객체로 바꾸어 리액트 돔에 뿌려주는 역할을 한다. 리액트는 또한 선언적 프로그래밍이다. 리액트는 기억을 하지 못한다. 렌더링이 될 때마다 함수 안에 있던 변수와 함수를 기억하지 못한다. 그래서 상태를 통해서 이것들을 잠시 저장해두는 것이다. 그러면 이것을 네비게이션 바에서 생각해보자.
하위 컴포넌트에 들어올 네비게이션 아이템을 리스트 렌더링으로 뿌리게 된다면 피드에 들어갈 때 피드에 관련된 아이템을, 모임에 들어가게 된다면 모임에 관련된 아이템을 뿌릴 수 있게 된다.
1.2. 리스트 렌더링이란?
우선 말 그대로다. HTML 에서 배웠던 <li> 태그로 렌더링을 해주는 것이 맞다. 그런데 우리가 하고 싶은 것은 직접 리스트로 주는 것이 아닌 map 함수를 돌면서 자연스럽게 각 컴포넌트에 리스트 태그를 붙여 리스트로 렌더링 되게, 그러니까 리액트가 실행될 때마다 뿌려질 수 있도록 만들어주고 싶은 것이다.
우선 내가 작성한 대략적인 구조도는 이렇게 된다.
Group.jsx 와 Feed.jsx 에서 각각 경로를 groupPath와 feedPath을 통해서 받아올 수 있도록 했다. 작성할 때 path와 children 요소를 넣어서 각각 뿌려줄 수 있도록 작성했다. 처음에는 그룹과 피드를 변수로 빼지 않고 직접 각각 tolink와 Navlink를 사용해서 뿌려줬는데 사용성을 위해서 변수로 나누게 되었다.
컴포넌트에서 뿌리는 형태는 이렇게 된다. NavBar.jsx를 components 폴더의 molecule에 선언해주었다. 경로는 groupPath 변수에서 불러올 수 있도록 했다.
2. NavBar.jsx
NavBar 은 앞으로도 계속 사용할 수 있기 때문에 빼두었다. 리스트 태그를 활용하여 item.path와 item.children을 사용해서 item 객체에서 빼올 수 있도록 했다. 확실히 이번 컴포넌트를 짜면서 느꼈던 점이 있다면 한 번에 path, children을 써야겠다고 뽑아올 수는 없겠지만 코드를 작성하면서 더 뽑아야 할 게 생기고, 공통으로 묶어야 하는 것이 생기면 그때 조금씩 숲이 아니라 나무를 보면서 기능을 구현해도 좋겠다는 생각이 들었다.
어제 오늘 느낀 점이 많기도 하고 데일리 회고 치고는 무척 길어졌지만 방향성을 잡게 될 수 있는 의미있는 이틀이었다. 내일은 isActive 기능을 구현할 생각인데 오늘 검색하고 원론을 찾아봤지만 아직 조금 어렵다. 클릭했을 때 스타일을 바꾸려면 따로 스타일을 설정해주고 isActive 속성을 직접 부여해줘야 하는 건지.. 내일 같이 팀원분들과 해결해볼 생각이다.
- 지인님께 받았던 깃허브 레포지터리 덕에 초기 설정에 많은 도움을 얻을 수 있었다. (https://github.com/iamjinpark/Final-Project/tree/guide)
