React #6

• 13장
• 라우터란?
  • 웹 애플리케이션에서 라우팅이라는 개념은 사용자가 요청한 URL에 따라 알맞은 페이지를 보여주는 것을 의미 합니다
  • 여러페이지로 구성된 웹 애플리케이션을 만들 때 페이지 별로 컴포넌트들을 분리해가면서 프로젝트를 관리하기 위해 필요한것이 라우팅 시스템이다
  • 라우터 종류
    • 리엑트 라우터
    • Next.js
    • 리액트 프로젝트의 프레임워크 입니다. 프로젝트 설정기능, 라우팅 시스템, 최적화, 다국어 시스템 지원, 서버 사이드 렌더링 등 기능 제공
• 싱글페이지 애플리케이션이란?
  • 하나의 페이지로 이루어진 애플리케이션이란 의미 입니다
  • 히스토리까지 관리해준다
  • 터미널
    • yarn create react-app router-tutorial
    • cd router-tutorial
    • yarn add react-router-dom
    • index.js
      • <BrowserRouter>로 수정
• Link
  • <Link to=”경로”> 링크이름</Link>
  • 내부적으로 a태그를 사용한다
  • 새로 불러오는것이 아니고 History API를 통해 브라우저 주소의 경로만 바꾸는 기능이 내장되어 있다.
• URL파라미터
  • 주로 ID 또는 이름을 사용하여 특정 데이터를 조회 할 떄 사용
  • useParams라는 Hook을 사용하여 객체 형태로 조회
  • key-value형태로 담아두었을때 Profile컨포넌트에서는 username URL파라미터를 통하여 프로필을 조회
• 쿼리스트링
  • 키워드 검색, 페이제네이션, 정렬방식 등 데이터 조회에 필요한 옵션을 전달할 때 사용
  • 문자열 앞에 있는 ?를 지우고 & 문자열로 분리한 뒤 key와 value를 파싱하는 작업 이작업은 npc에서 qs또는 qeuryString패키지를 설치해 처리할 수 있다
  • useLocation Hook을 사용할 수있다
  • pathname : 현재 주소의 경로
  • search : 맨 앞의 ? 문자를 포함한 쿼리스트링 값
  • hash : 주소의 #문자열 뒤의 값
  • state : 페이지로 이동할 때 임의로 넣을 수 있는 상태 값
  • key : location객체의 고유값 초기에는 default이며 페이지가 변경될 때마다 고유값이 생성됨
  • useSearchParmas는 배열 타입의 값을 반환 하며, 첫번째 원소는 쿼리 파라미터를 조회하거나 수정하는 메서드들이 담긴 객체를 반환
  • get메서드를 통해 특정 쿼리파라미터를 조회 할 수 있고, set메서드를 통해 특정 쿼리 파라미터를 업데이트 할 수 있다.
  • 쿼리파라미터를 사용할 때 주의 사항은 무조건 문자열 타입이다
• 중첩된 라우트
  • 게시글 목록을 보여주는 페이지에 게시글 본론을 보여주는 느낌이다
• 공통 레이아웃 컴포넌트
  • 중첩된 라우트와 Outlet은 페이지끼리 공통적으로 보여줘야하는 레이앗이 있을떄도 유용하게 사용한다 쉽게 생각해서 header라고 생각하면 된다.
• index props
  • Route path=”/” 대신 index를 사용할 수 있다.
• useNavigate
  • Link를 사용하지 않고 다른페이지를 이동해야 하는 상황에서 사용하는 Hook이다
  • navigate함수를 사용할 때 파라미터가 숫자 타입이라면 앞으로 가거나, 뒤로 갑니다
• NavLink
  • 링크에서 사용하는 경로가 현재 라우트의 경로와 일치하는 경우 특정 스타일 또는 css클래스를 적용하는 컴포넌트 입니다.
  • 코드
  • <NavLink to="/articles/1" style={({ isActive }) => (isActive ? activeStyle : undefined)} > 게시글 {id} </NavLink>
• NotFound페이지
  • 사전에 정의되지 않는 경로에 사용자가 진입했을때 보여주는 페이지 입니다.
  • 코드
  • import React from "react"; const NotFound = () => { return ( <div style={{ display: "flex", alignItems: "center", justifyContent: "center", fontSize: 64, position: "absolute", width: "100%", height: "100%", }} > 404 </div> ); }; export default NotFound;
• Navigate 컴포넌트
  • 사용자가 로그인이 필요한 페이지를 요청했는데 로그인이 하지 않았다면 로그인페이지로 보내는 것
  • 코드
    • Login.js
    • import React from "react"; const Login = () => { return <div>로그인 페이지</div>; }; export default Login;
    • Mypage.js
    • import React from "react"; import { Navigate } from "react-router-dom"; const MyPage = () => { const isLoggedIn = false; if (!isLoggedIn) { return <Navigate to="/login" replace={true} />; } return <div>마이페이지</div>; }; export default MyPage;
• 정리
  • 페이지에 사용자가 들어왔을때 지금 당장 필요하지 않는 페이지들은 불러오지 않고 필요한 컴포넌트만 불러오면 효율적입니다.
• 14장
• 비동기 작업의 이해
  • 시간이 걸리는 작업을
• 콜백함수
  1. 동기 : 하나의 요청이 오면 완료가 된 후 다음 요청을 실행하는 방식 - 순차적 로직흐름
  2. 비동기 : 어떤 요청이 오면 완료가 되기 전에 다음 요청을 실행하는 방식
  3. 콜백함수는 때로는 가독성이나 코드 재사용 면에서도 사용 된다.
  4. 비동기 방식으로 작성된 함수를 동기 처리하기 위해 필요 하다.
• Promise
  • 콜백함수의 가독성 때문에 사용하는데 콜백함수가 부하는 덜 걸린다
• async/await
  • promise의 개량 느낌으로 사용 되고 가독성이 더 좋고, 반복적인 처리(?)가 더 좋다
• 터미널