오늘도 학습 주제는 React!
컴포넌트를 만드는 기준과 조립이 어려웠다. 나머지는 재밌다!
학습 내용
✓ BrowserRouter의 위치
<BrowserRouter>는 App.js의 최상위 엘리먼트로 작성해주어도 되지만, index.js 파일에 작성해주는 것이 좋다. useNavigate등 훅을 쓸때 의도대로 작동하지 않을 우려가 있다.
// 여기에 작성해서 렌더링시 적용함
ReactDOM.render(<BrowserRouter><App />, document.getElementById('root')</BrowserRouter>);✓ index.js
index.js파일은 React에서 JavaScript의 시작점이다. 그래서 BrowserRouter 등의 기본 세팅은 여기서 해준다.
✓ React stric mode
JavaScript의 'use strict' 모드와 비슷한 기능을한다. 하지만 문법 오류 점검을 위해 렌더링을 2번하기 때문에 state가 렌더에 따라 변하는 경우에는 의도와 다른 결과를 만드는 원인이 된다. 그래서 상황에따라 지운다.
✓ react-router-dom 라이브러리는 객체다.
그래서 import할 때, 구조분해할당을 사용하여 원하는 프로퍼티를 가져온다! 따라서 정확한 프로퍼티명으로 불러와야한다.
// BrowserRouter은 react-router-dom 객체의 프로퍼티 키임!
import { BrowserRouter } from 'react-router-dom';✓ Link와 useNavigate
둘다 페이지 이동 기능을 하지만,
Link는 특정 주소로 이동을useNavigate는 어떤 행동을 했을 때 특정 주소로 페이지를 이동시켜준다.
따라서 로그인을 했을 때 마이페이지로 이동, 안 했을 때 로그인 화면으로 이동과 같은 기능은 useNavigate로 가능하다.
✓ MPA, SPA는 개발자도구를 보면 알 수 있다.
개발자도구의 Network 탭에서 docs만 체크를 하면, 웹이 MPA인지 SPA인지를 알 수 있다. 유튜브, 넷플릭스 등 SPA에서는 아무리 눌러도 리로드가 되지 않아 doc이 변하지 않는다.
오늘의 고민
- 어디까지가 컴포넌트일까?
뒤로가기 버튼을 추가하기 위해 BackButton 컴포넌트를 만들어서 사이드바의 하위 컴포넌트로 넣어주었다. (지금 생각하니 사이드바의 하위 컴포넌트로 넣은 것 부터가.. 잘못되었네 🫠)
아무튼! 나는 뒤로가기 컴포넌트를 만들었지만, 라이브세션에서 엔지니어님은 App 컴포넌트 내에서 뒤로가기 기능을 추가해 주었다.
그래서 깊어진 고민... 어디까지가 컴포넌트일까. 이 고민을 가지고 리액트의 전체 범위를 학습해 나가야겠다.
