[개발 공부 27일차] useParams, useNavigate, Batch

 

 

아 분명 배웠는데 다시 보는 듯한 이 새로운 짜릿함... 이제 그만 느껴도 좋을 텐데..

오늘은 헷갈린다기보단 내가 설명할 수 없겠는 개념과 기능 위주로 작성해보았다. 리마인드 + 개념을 정확히 아는 데에 도움이 되리라 생각한다.

 

 

< 목차 >

1.  React와 선언형 라이브러리?

2.  모르는 Hook 정리

   (1) useHistory

   (2) useNavigate

   (3) useParams

3.  모르는 개념 정리

   (1) 프레임워크와 라이브러리의 차이

   (2) Batch  |  [자료구조] Stack, Queue 차이

4.  금일 소감

 

 

 

1.  React와 선언형 라이브러리?

• 선언형 프로그래밍 = 추상적인 코드
• [React rendering 특징] 실제 화면을 업데이트하는 게 아닌, 업데이트를 위한 과정이다.
• React는 선언형 렌더링 라이브러리이며 router와 같은 것 없이 단지 rendering만을 해주는 라이브러리다.

 

 

2.  모르는 Hook 정리

   (1) useHistory

: URL 주소를 변경할 때 사용하는 Hook

useHistrory를 사용하여 '뒤로 가기', '앞으로 가기' 기능을 쉽게 구현할 수 있다.

 

• history에 push 해서 원하는 경로로 이동하게 만들 수도 있다.
• 버튼에 연결하여 사용한다.
• 버튼을 Link로 감싸면, 오류가 발생하기에 버튼에서 SPA를 구현하고자 한다면, history를 사용한다.
• 경로의 시작에 '/' 를 붙이지 않으면 버튼 클릭 시, 경로가 중첩된다.
  [ex] history.push(search/a); 와 같이 작성 시, 버튼을 클릭할 때마다 /search/search/search/search/a 와 같이 경로가 쌓인다.
  [ex] history.push(/search/a); 와 같이 작성하면 버튼을 여러 번 눌러도, /search/a 경로로만 이동한다.
• react-router-dom ^6 이상에서 useHistory가 사라졌다.. useNavigate를 대신 사용해야 한다.

 

▼  예문

import { useHistory } from 'react-router-dom';

const history = useHistory(); 
console.log(history);

// history가 어떤 기능을 가지고 있는지 확인할 수 있다.
<Button onClick={history.goBack}>뒤로 가기</Button>
<Button onClick={history.goForward}>앞으로 가기</Button>

 

 

 

   (2) useNavigate

: 페이지를 이동시킬 때 사용

 

• Link를 써도 페이지 이동을 시킬 수 있다. 단순하게 이동만 시켜야 하는 경우, Link를 사용하면 좋다.
• useNavigate는 특정 이벤트가 실행됐을 때, 동작하도록 하거나 추가적인 로직이 필요한 경우에 사용

 

▼  예문

import { useNavigate } from 'react-router-dom';

const navigate = useNavigate();

<button onClick={() => { navigate('/about'); }}>
  about page로 이동하기
</button>

// 음수는 이전 페이지, 양수를 넣으면 다음 페이지
<button onClick={() => { navigate(-1); }} >
이전 페이지로 이동하기
</button>

 

 

 

   (3) useParams

: URL에 포함돼 있는 Key, Value 형식의 객체 반환

 

• Route 부분에서 Key를 지정해주고, 해당하는 Key에 적합한 Value를 넣어 URL을 변경시키면 useParams를 통해 Key, Value 객체를 반환받아 확인 가능
• 반환받은 Value를 통해 게시글을 불러오거나, 검색 목록을 변경시키는 등 다양한 기능으로 확장시켜 사용 가능

 

▼  예문

import React from "react";
import ReactDOM from "react-dom";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  useParams
} from "react-router-dom";

function BlogPost() {
  let { slug } = useParams();
  return <div>Now showing post {slug}</div>;
}

ReactDOM.render(
  <Router>
    <Switch>
      <Route exact path="/">
        <HomePage />
      </Route>
      <Route path="/blog/:slug">
        <BlogPost />
      </Route>
    </Switch>
  </Router>,
  node
);

 

 

 

[Reference]

1) https://v5.reactrouter.com/web/api/Hooks/usehistory

2) https://velog.io/@citron03/React-Router%EC%9D%98-history-useHistory-Hook

3) https://velog.io/@reasonz/2022.07.13-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%9D%BC%EC%9A%B0%ED%84%B0-useNavigate

4) https://phsun102.tistory.com/92

 

 

 

3.  모르는 개념 정리

 

   (1) 프레임워크와 라이브러리의 차이

: '제어 흐름'이 어디에 있는가

 

• 프레임워크: 제어권이 전적으로 프레임워크에게 있음
• 라이브러리: 제어권이 전적으로 개발자에게 있음

• [상위 개념] 프레임워크는 라이브러리를 포함
• 프레임워크 위에 개발자가 작성한 애플리케이션 코드가 올라가게 되고, 이 애플리케이션 코드에서는 라이브러리를 호출 가능

 

프레임워크는 제어의 역전(IoC : Inversion of Control) 개념이 적용되어 있다. 즉, 프레임워크에게 제어의 흐름을 넘겨 개발자가 작성하는 코드에서 신경써야 할 부분을 줄인다. 프레임워크는 전체적인 흐름을 쥐고 있으며 애플리케이션의 코드는 프레임워크에 의해 사용된다. 애플리케이션 코드는 프레임워크가 짜놓은 틀 안에서 수동적으로 동작하기 때문에 제어의 흐름은 프레임워크에게 있다. 

 

반면 라이브러리는 개발자가 전체적인 흐름을 만들며 라이브러리를 가져다 쓰게 된다. 즉, 개발자에게 전적으로 제어 흐름이 있으며 필요할 때마다 능동적으로 라이브러리를 호출하여 사용한다. 

 

 

더 깊은 내용은 아래 링크에서 확인할 수 있다.

https://code-lab1.tistory.com/127

 

 

 

   (2) Batch  |  [자료구조] Stack, Queue 차이

 

 

 

Batch

: 데이터를 실시간으로 처리하는게 아니라, 일괄적으로 모아서 처리하는 작업

 

• 대량의 데이터를 처리한다.
• 특정 시간에 프로그램을 실행

 

Stack

 

Stack

: 차곡차곡 쌓아올린 자료구조

 

• 후입선출(LIFO, Last-In-First-Out) 구조
• 같은 구조와 크기의 자료를 정해진 방향으로만 쌓을 수 있음
• 새 자료 or 자료를 삭제할 때, top에서만 가능하다.
• top을 통해 삽입하는 연산: push / 삭제하는 연산: pop
• 비어있는 stack에서 원소를 추출하려는 경우, 'stack underflow'라고 함
• stack이 넘치는 경우, 'stack overflow'라고 함

 

* stack overflow
세계 여러 국가의 개발자들이 프로그래밍하다 막혔을 때 혹은 프로그래밍에 대한 질문을 하고 답변 받는 사이트. 개발자 커뮤니티 중에선 가장 규모가 크고, 웬만한 질문은 거의 다 올라와있어서 구글링하다 보면 매우 자주 볼 수 있는 사이트다.

 

 

* Stack 활용 예시

• 웹 브라우저 방문 기록(뒤로 가기): 가장 나중에 열린 페이지부터 다시 보여줌
• 역순 문자열 만들기: 가장 나중에 입력된 문자부터 출력
• 실행 취소(undo): 가장 나중에 실행된 것부터 실행 취소

 

Queue

 

Queue

: 줄을 서서 기다리는 것처럼 먼저 들어온 순서대로 나감

 

• 선입선출(FIFO, First-In-Firet-Out) 구조
• 한쪽 끝에서 삽입 작업이 이루어지고 반대 끝에서는 삭제 작업이 이루어져 양쪽에서 진행됨
• 삭제 연산만 수행되는 곳: Front(프론트), 삽입 연산만 이루어지는 곳: Rear(리어)
• 삽입 연산: enQueue(인큐), 삭제 연산: deQueue(디큐)라고 함

 

 

* Queue 활용 예시

 

: 주로 데이터가 입력된 시간 순서대로 처리해야 하는 작업에 활용됨

• 우선순위가 같은 작업의 예약 (ex. 프린터기 인쇄 대기열)
• 은행 업무
• 콜센터 고객 대기 시간
• Cache(캐시) 구현

 

 

[Reference]

1) https://code-lab1.tistory.com/284

2) https://velog.io/@jch9537/%ED%95%9C-%EC%A4%84-%EC%9A%A9%EC%96%B4%EB%B0%B0%EC%B9%98Batch%EB%9E%80

3) https://devuna.tistory.com/22

4) https://ko.react.dev/learn/queueing-a-series-of-state-updates

 

 

 

4.  금일 소감

아 거.. 분명 배웠는디.. 배웠는디 하면서 막상 설명하려니 제대로 할 수가 없길래 다시 정리했다. 내 생각엔 복습이 부족한 것 같다. 블로그 글을 작성한 뒤에 당일과 이튿날, 그리고 7일 뒤에 다시 보며 리마인드하는 작업이 필요하겠단 생각이 들었다.

 

그리고 오전 시간에 강의를 들으면 자꾸 잠이 오는 마법에 걸려버려서 오전 시간엔 강의를 듣기보단 과제를 하거나 잘 모르는 Hook의 코드를 짜거나 블로그 글을 작성하는 등 참여적 학습법으로 공부해야겠다 싶었다. 그나저나 개인과제 얼른 시작해서 끝내야지.. 파이팅 파이팅!