오늘 해야했던 일
- 3주차 독파 V
- CS스터디 책 읽기 V
- OSI7계층 자료 조사 V
- 메인 페이지, 평점 남기기 페이지 생성
- 라우팅
오늘 배운 것
Route 만들기 순서
- (1) index.js에 BrowserRouter 적용하기
- (2) 세부 화면 만들기
- (3) App.js에서 Route 적용하기
- (4) exact 적용하기
- (5) URL 파라미터사용하기
- (6) 링크 이동 시키기
클래스 컴포넌트 확인 시 render를 먼저 확인하여 무엇이 있는지 확인이 먼저이다.
구독한다 = Event Listener를 추가 한다.
함수형 컴포넌트의 useEffect = 라이프 사이클 메서드 중 componentDidMount + componentDidUpdate + componentWillUnmount
SPA(Single Page Application): 사용자가 안 볼 페이지까지 가져옴 (첫번째 로딩이 느림). 전통적인 라우팅 방식이 아닌 쪼개서 필요한 것만 보여줌.
MPA(Multi Page Application): DOM -> DOM. 상태값 유지 안됨 (옛날 회원가입 페이지 비유)
index.js: 사실상 프로젝트의 시작점. BrowserRouter 등 리액트 요소들 선언하는 곳
리액트에서 화면 만듬 = 컴포넌트 만듬
'react-router-dom' 패키지에서 동적 파라미터 가져오기: ':' 사용 ex) /cat/:cat_name 이것은 Cat.js 컴포넌트의 const cat_name을 useParams({})라는 리액트 훅으로 파라미터화 함.
Link 컴포넌트를 사용할 수 없을 때 : history 라는 객체(리액트 요소) 사용.
history 객체 사용 => 컴포넌트 방식 아닌 리액트 훅으로 씀 : useHistory
Route 사용시 BrowserRouter, index.js에 필수로 넣어주는거 잊지 말기.
Switch: 1,2,3,4 순서의 주소가 있을 때 처음 조건에 맞는 주소를 뜨게 하는 기능. 다 안 맞으면? 제일 마지막 주소를 뜨게 함.
'쌀 팔다' 개발자 특강
-
포폴 내용은 항해 마무리 후 정리 하는게 좋다.
-
스타트업 신입은 유지보수만 열심히 하면 된다.
마일스톤 1.
- 예제를 많이 보고 아는 소스코드를 따라해라
- 남들이 이해 할 수 있는 코드를 짜라.
- 가상돔 = component. 리액트는 모두 가상돔에서 이뤄진다. 진짜 돔은 오직 index.html 하나.
오늘 공부 키워드
<Route>
Event Listener :
{props}
