TIL. React. 리액트 기초반 3주차. <22.03.21>

오늘 해야했던 일

• 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}