[수풀] 조건부 렌더링, component composition

 💻  들어가며

메인 프로젝트를 진행하면서 웹 서비스를 제작하면서 상태관리가 점점 더 중요해지는 것 같다

Nav바에 있는 상태를 형제관계에있는 컴포넌트에 전달해야하는 상황을 구현하기 위해 

Context API 공부를 하면서 새롭게 알게된 사실도 있었다

 

- context 사용하면 컴포넌트 재사용 어려워짐

- prop drilling 피하기 위한 목적이라면 component composition을 먼저 고려해보자

---

📚구현기능 

nav 조건부 렌더링

로그인 상태

로그아웃 상태

로그인 상태에 따른 조건부 렌더링 로컬스토리지에 토큰을 저장해놓은 후

토큰 유무에 따라 다른 nav바가 렌더링되도록 구현

 

---

특정 페이지 Nav 숨김 처리

import { useLocation } from "react-router-dom";
const locationNow = useLocation();

function Nav() {
  const locationNow = useLocation();

  if (locationNow.pathname === "/board") return null;
  
  return (<>화면에 띄울 nav 컴포넌트</>)

게시판 페이지에서 다른 nav바를 적용하기 위한 코드를 작성했음

---

컴포넌트 compostion

전체 게시글 조회

프로젝트 게시글 조회

형제 관계에 있는 컴포넌트끼리 상태를 prop로 주고받을 수 없어 

전역상태를 이용할건지, 컴포넌트를 합쳐 부모관계로 만들건지 선택지에서 

nav바의 재사용성을 위해서 컴포넌트의 상하관계를 주고 props를 통해서 상태관리를 코드작성

---

🤔  느낀점

프로젝트를 진행하는 도중에 새로운 지식을 배워서 적용하는 게 쉽지않다는 것을 느꼈고

구글링을 잘하는 게 중요하다고 느꼈다 내가 겪었던 문제를 이미 겪었고 해결한 사람들이

블로깅을하거나 스택오버플로우에 답변하거나 하는 경우가 굉장히 많았는데 

프로젝트를 진행하면서 이런 상황을 반복하다보니 내가 지금 필요한 것이 뭐고 어떤 것을 모르고

어떤 문제에 마주한 건지 잘 파악하는 능력이 중요한 것 같다고 생각하게 되었다.