후롱트 8주차 세션 회고

컴포넌트의 라이프사이클

• 모든 리액트 컴포넌트는 라이프 사이클을 지닌다.
• 컴포넌트 수명은 페이지에 렌더링 되기 전에 시작해 페이지에서 사라지면 끝
• 마운트
  • DOM이 생성되고 웹 브라우저상에 나타남
• 업데이트
  • 컴포넌트 업데이트
• 언마운트
  • 컴포넌트를 DOM에서 제거

라이프사이클 메서드

• CLASS 형에만 사용 가능
• BUT 지금은 함수 컴포넌트에서 Hooks 기능을 사용하여 비슷한 작업 처리 가능
• Will 접두사
  • 어떤 작업을 작동하기 전에 실행되는 메서드
• Did 접두사
  • 어떤 작업을 작동한 후에 실행
• 아~ 그렇구나 하고 넘어가시면 됩니다.

useEffect

import { useEffect } from "react";

useEffect(() => {
	return () => {};
}, []);

첫 렌더링 때는 아무것도 넣지 않음

마운트될 때는 두번째 인자로 비어 있는 배열 넣기

특정 값이 업데이트될 때는 두 번째 인자로 배열 안에 검사하고 싶은 값 넣기

뒷정리를 할 때는 cleanup 함수 반환하기

Routing

웹 앱에서 라우팅이란

• 요청한 url에 따라 알맞은 페이지를 보여주는 것!
• 라우팅 시스템은 페이지마다 컴포넌트들을 분리해가면서 프젝 관리 위해 필요
• 시스템 구축을 위해 리액트 라우터를 사용

리액트 라우터

• 링크를 눌러서 다른 페이지로 이동 시 서버에 다른 페이지의 html을 요청하는 것이 아니라
• api를 사용하여 주소창 값만 변경하고 기존 웹 앱 유지, 라우팅 설정에 따라 또 다른 페이지를 보여줌

SPA

• single page app
• 리액트를 사용하면 손쉽게 spa 제작 가능(html을 하나만 사용하여 서버에 계속해서 요청할 필요가 없음)
• spa란 하나의 페이지로 이루어진 앱
• html은 한 번만 받아와서 앱 실행 후 이후에는 필요한 컴포넌트만 받아와서 화면에 렌더링

리액트 라우터 적용 법

• Route 컴포넌트를 설정해 사용자의 브라우저 주소 경로에 따라 원하는 컴포넌트 렌더링⬇️

<Routes>
     <Route path="/" element={<Home />}></Route>
     <Route path="/:username" element={<Profile />}></Route>
     <Route path="/books" element={<Books />}>
          <Route path=":id" element={<Book />}></Route>
     </Route>
</Routes>

• a태그를 클릭해 페이지를 이동하면 브라우저는 페이지를 새로 부름
• Link 컴포넌트는 api를 통해 페이지를 새로 불러오는 것을 방지⬇️

import { Link } from "react-router-dom";

<Link to="/about">소개</Link>

 

 

URL 파라미터

• github.com/@@@@@
  • @@@@@에 유동적인 값을 넣는 형태
  • ID 또는 이름을 사용해 특정 데이터 조회 시에 사용
  • useParams를 사용해 객체 형태로 조회 가능

const Profile = () => {
	const params = useParams();
	const profile = data[params.username];
}

• URL 파라미터의 이름은 Route 컴포넌트의 path props를 통해 설정
• URL 파라미터는 경로에 :를 사용하여 설정

쿼리스트링

• 주소의 뒷부분에 ? 이후 key=value로 값을 정의하며 &로 구분하는 형태
• 데이터 조회에 필요한 옵션을 전달할 때 사용
• 리액트 라우터에서는 useSearchParams를 통해 쿼리스트링 사용 용이

useSearchParams

• 배열 타입의 값을 반환
• 1번 원소엔 조회 및 수정 메서드가 담긴 객체 반환
• 2번 원소엔 객체 형태로 업뎃 가능한 함수 반환

const [searchParams, setSearchParams] = useSearchParams();

  const detail = searchParams.get("detail");
  const mode = searchParams.get("mode");

  const datialToggle = () => {
    setSearchParams( {mode, detail: detail === 'ture' ? false : true });
  };

• get메서드를 통해 특정 쿼리파라미터 조회
• set메서드를 통해 특정 쿼리파라미터 업뎃

 

중첩된 Route와 Outlet 컴포넌트

• Route 컴포넌트들을 서로 중첩시켜 상위의 Route 컴포넌트는 항상 화면에 렌더링될 수 있도록 설정
• Outlet 컴포넌트는 중첩된 Route 컴포넌트 중에서 하위 Route 컴포넌트가 렌더링될 때 중첩된 UI 표시하도록 설정
• 중첩 라우터 안에서는 / 를 넣지 않아도 이미 상위 컴포넌트가 무엇인지 알 수 있기 때문에 생략

 

useNavigate

• Link컴포넌트를 대체하는 Hook이다. 다른 페이지로 이동할 때 사용한다.
• 사용할 때 replace 옵션을 사용하면 페이지 이동 시 현재 페이지를 페이지 기록에 남기지 않는다.

const navigate = useNavigate();

  const goBack = () => {
    navigate(-1);
  };

  const goArticles = () => {
    navigate("/articles");
  };

• goBack 함수를 button에 onClick으로 넣으면 버튼을 눌렀을 때 뒤로가기 버튼과 같이 작동한다.(전 페이지로 이동)
• goArticles를 넣으면 해당하는 주소로 이동하도록 작동한다.(해당 페이지로 이동)

const navigate = useNavigate();

  const goBack = () => {
    navigate(-1, { replace: true });
  };

  const goArticles = () => {
    navigate("/articles", { replace: true });
  };

• replace 옵션을 true로 넣어주면 브라우저 이동 히스토리에 새로운 항목을 추가하지 않고 이동할 수 있다.

 

❤️느낀점❤️

너무 어렵습니다.

전 기말고사 안보니까 그동안 JS랑 React 공부 열심히 하겠습니다.

Hook들이 어떤 기능을 하는지는 알았지만, 적재적소에 잘 활용하지를 못하고 있는 것 같습니다.

공부 많이 하겠습니다.