이제 하위 컴포넌트들을 관리하는 최상위 컴포넌트 Nav 를 정리해보자. 처음 Nav 를 설계할 때, 생각 이상으로 상위에서 props 로 전달해주어야 할 변수 및 함수가 많을 것이라 예상되었다. 그도 그럴 것이 실시간으로 조건에 맞는 Nav 를 랜더링 해야하며, 그 각각의 Nav에 대해 따른 모달 컴포넌트도 정상적으로 랜더링 되어야 하기 때문이며 또한 사용자가 편리하게 사용할 수 있도록 신경써야 하였기에 Nav 가 유기적으로 움직이기 위해 좀 더 체계적으로 설계했어야 했다. 이로 인해 Nav 의 코드는 직관적이지 않게 코드가 짜여졌다. import React, { useState, useRef, useEffect } from 'react'; import LoginModal from '../Modal/Lo..
갑작스럽게 일들이 많아져서 작성이 좀 늦어졌다. 조금만 시간이 지나도 다시 가물가물해지는게 내 기억력의 한계인가 싶기도 하고, 원래 다 이런건가 스스로에게 위안을 삼아본다. 검색바를 클릭함에 따라 2가지의 형태로 나뉘게 되는 Nav 이전 글에서 이미 확인을 하셨겠지만, 다시 사진을 참조하자면 아래와 같다. 원래 에어비엔비 사이트가 어떤식으로 Nav 가 형성되어있는지 까지는 모르겠다. 에어비엔비 사이트에서는 마치 검색창을 클릭할 시 가운데 검색바가 확대되면서 밑 Nav 처럼 변하는 식으로 되었는데, 시간도 부족하고 아직 방법을 잘 모르겠어서 나의 경우는 opacity 의 변화로 부드럽게 전환되도록 표현하였다. 파일은 2가지로 컴포넌트를 나누어 놨는데, 상위 Nav 컴포넌트에서 조건부 랜더링을 하지 않고, ..
왜인지 모르겠지만, 코드를 짜다보면 어느순간 아무것도 진행이 되지 않은 시기가 온다. 이번 프로젝트에서 가장 당황하였던 것은 그 시기가 프로젝트 시작부터 찾아와버렸다는 점이다. 지친거였을까.. 시간은 흘러가는데 무엇인가 하고 싶진 않은 마음을 진정시키려 하는데, 에어비엔비 검색창을 보니 조급함만이 살아나버렸다.. 적어도 지금까지 만들어온 nav 와는 사뭇 다른 느낌이었다. 동적이면서도 절제된듯한 UI 에 놀랍기도, 욕심도 나기 시작했다. (근데 왜 의욕이 안생기는거지). 사라진 의욕만 돌아와 준다면 좀 더 재미있게 작업할 수 있을 것 같은데! 왠지 비슷하게라도 구현하지 못할거 같은 느낌때문에 시작을 못하는게 아닐까 생각이 들어서, 동기들도 열심히 하는데 이리저리 생각만 하지말고 일단 시작하자라고 굳건히 ..
