같이 성장하는 프로그래밍

자바스크립트 변수 Part 1

프설남 — Thu, 27 May 2021 00:25:24 +0900

안녕하세요.

일이 너무 바쁘고 해외에서 살고 있다가 귀국하느라 (귀찮음의 변명)
수개월만에 새로운 글을 씁니다.

자바스크립트 변수 part 1 에서는

자바스크립트 엔진 속에서 메모리에는 어떻게 해서 변수가 생성되고 변경되는가에 대한 기본적인 개념들을 설명하고자 합니다.

1. 변수 생성 과정

2. 해당 변수가 가지고 있는 값을 찾아가는 과정

3. 변수의 값을 변경하는 과정

1. 변수 생성 과정

그럼 먼저 자바스크립트의 변수 생성 과정을 알아봅시다.

const a = 10;

<1-1 코드>'a' 변수 선언과 동시 할당

a라는 식별자로 변수를 생성합니다.

변수(Variable)라는 것은 식별자(Identifier)와 값(Value)으로 이루어져있습니다.

식별자는 변수를 지칭하는 이름표라고 생각하시면 됩니다. <1-1 코드>에서는 식별자가 'a'로 해당됩니다.

값은 할당하는 값으로 생각하시면 됩니다. <1-1 코드>에서는 값이 10으로 해당됩니다.

이 식별자 'a'와 값 10을 합쳐서 우리는 보통 변수 'a' 라고 말합니다.

그래서 식별자와 변수를 혼용해서 쓰이는지만 정확히는 조금 다른 개념인 것입니다.

다시 본론으로 돌아와서 변수 a 를 메모리에 생성하는 과정을 상세히 설명하겠습니다.

자바스크립트는 먼저 변수를 저장할 곳을 만듭니다.

(※ 여기서 이후의 변수 메모리 공간과 값 메모리 공간은 이해를 시키기 위해 임의로 명명하여 분리 시킨겁니다. 실제로 메모리에 변수 메모리 공간과 값 메모리 공간이 따로 명확히 구분되어져서 존재하는 것이 아닙니다.)

주소	1002	1003
이름	a
값

<1-1 표> 변수 메모리 공간

<1-1 표>와 같이 변수를 저장할 공간을 만들어놓고 거기에 이름(=식별자)에다가 <1-1 코드>의 const a에서 a를 저장합니다. 저도 공부하기 전까지는 그냥 여기 값에다가 10을 저장하는 줄 알았습니다. 그러나 값의 자리는 일단 비워놓습니다.

주소	5201	5202
값	10

<1-2 표> 값 메모리 공간

신기하게도 자바스크립트는 변수를 만드는 메모리 공간과 할당하려는 값의 메모리 공간을 따로 만듭니다. 이것은 지금은 왜 그러신지 이해가 안 가시지겠지만 자바스크립트를 설계하면서 효율적으로 관리하기 위해서 이렇게 되도록 만들었다고 합니다.

정리하자면, 이렇게 해서 변수의 공간을 <1-1 표>처럼 만들고 값의 공간을 <1-2 표>처럼 만들었습니다.

이제 마지막으로 해야할 일은 이어줘야하는 일이죠. 이게 바로 할당이 됩니다.

주소	1002	1003
이름	a
값	@5201

변수 메모리 공간

주소	5201	5202
값	10

값 메모리 공간

<1-3 표> 할당된 모습

할당을 하게 되면 <1-3 표>와 같이 「값 메모리 공간」에서 10의 값을 가진 공간의 주소값(여기선 주소값 5201)을 「변수 메모리 공간」의 값에 값에 할당을 합니다.

2. 해당 변수가 가지고 있는 값을 찾아가는 과정

그럼 이제 역으로 어떻게 자바스크립트는 변수의 값을 찾아내는 지 거꾸로 찾아가 보겠습니다.

console.log(a);

<2-1 코드> 선언했던 변수 'a'를 콘솔창에 출력

주소	1002	1003
이름	a
값	@5201

주소	5201	5202
값	10

<2-1 표> 1-3 표 복사

1. 식별자 a 에 해당하는 변수의 공간을 찾습니다.
2. 주소 1002의 공간을 찾았습니다.
3. 주소 1002의 값을 찾습니다.
4. 주소 1002의 값이 @5201인 것을 알아냈습니다.
5. 주소값이 5201인 공간으로 갑니다.
6. 주소값이 5201인 공간의 값을 알아냅니다.

7. 주소값이 5201인 공간의 값은 10입니다.

8. 10을 출력합니다.

이렇게 주소값을 따라서 찾아가서 종착역인 값의 공간의 값을 찾아내면 끝인 것입니다.

3. 변수의 값을 변경하는 과정

여기서는 변수의 값을 변경할 때 어떠한 과정으로 변경이 되는 지를 알아보겠습니다.

새롭게 변수를 선언해 보겠습니다.

let b = 20;

<3-1 코드> 새로운 변수 'b'를 선언함과 동시에 할당

주소	2010	2011
이름	b
값	@7522

주소	7522	7523
값	20

<3-1 표> 변수 'b'에 대한 메모리 공간

b = 10;

<3-2 코드> 변수 'b'의 값을 변경

이렇게 변수 b의 값을 20에서 10으로 변경했을 때는 어떤 과정이 이루어지는가.

저는 이렇게 생각했었습니다.

주소	2010	2011
이름	b
값	@7522

주소	7522	7523
값	20 -> 10

<3-1 표> 변수 'b'의 값이 변경되었을 때의 글쓴이의 상상

당연히 현재 값을 가지고 있는 주소를 찾아가서 해당 값을 20에서 10으로 변경시키는 줄 알았습니다.

하지만 아니였습니다.

값을 변경하는 순서를 차례대로 설명드리겠습니다.

주소	2010	2011
이름	b
값	@7522

주소	7522	7523
값	20

<3-2 표> 변수 'b' 의 공간

1. 값의 메모리 공간에서 10을 찾는다.

주소	・・・	7522	7523	・・・
값		20

<3-3 표> 값의 메모리 공간

2. 10이라는 값이 값의 메모리 공간에 없으므로 새롭게 만들어낸다.

주소					・・・	7522	・・・	7681	・・・
값						20		10

<3-4 표> 값의 메모리 공간

3. 새롭게 만든 10의 값의 메모리 공간을 변수 b에 할당시킨다.

주소	2010	2011
이름	b
값	~~@7522~~ -> @7681

<3-5 표> 변수의 메모리 공간

4. 값의 메모리 공간에서 참조되어지지 않는 값은 자동으로 삭제해줍니다.

주소					・・・	7522	・・・	7681	・・・
값								10

<3-6 표> 값의 메모리 공간

즉, 결론적으로는 이미 존재해있던 메모리 공간의 값을 변경시키는 것이 아니라

메모리 공간에 내가 변경하고자 하는 값이 이미 존재하는 가를 검색을 한 후,

있다면 바로 변경하고자 하는 값의 주소값을 할당하고 없다면 새로 생성한 후에 새로 생성된 값의 주소값을 할당시킵니다.

좀 더 명확하게 하나의 예시를 더 보여드리겠습니다.

let a = 10;
let b = 10;
let c = 15;

<3-3 코드> 조금 더 복잡한 예시

주소	・・・	1520	1521	1522	・・・
이름		a	b	c
값		@5749	@5749	@5748

주소	・・・	5748	5749	・・・
값		15	10

<3-7 표> 새로운 예시의 메모리 공간

a = 20;
b = 15;
const d = 20;

<3-4 코드> 3-3 코드에서 재할당

과정설명을 보시기 전에 스스로 어떤 순서로 이루어지는 지 생각해보시는 것도 좋을 것 같습니다!

1. 변수 a에 재할당하기 위해 메모리 공간에서 20의 값을 갖는 공간을 찾는다.

주소	・・・	5748	5749	・・・	6725	・・・
값		15	10		20

<3-8 표> 값 20에 해당하는 공간이 없으므로 새로 생성

2. 재할당할 20의 공간을 새로 만들었으니 재할당을 수행.

주소	・・・	1520	1521	1522	・・・
이름		a	b	c
값		~~@5749~~ -> @6725	@5749	@5748

<3-9 표> 변수 a를 재할당한 메모리 공간

3. 변수 b에 재할당하기 위해 메모리 공간에서 15의 값을 갖는 공간을 찾는다.

<3-8 표>에서 주소값 5748에 값 15가 할당되어 있으므로 이 주소값 5748을 변수 b에 재할당한다.

주소	・・・	1520	1521	1522	・・・
이름		a	b	c
값		@6725	~~@5749~~ -> @5748	@5748

<3-10 표> 변수 b를 재할당한 메모리 공간

4. 값의 공간에서 10의 값을 갖는 공간을 참조하는 곳이 전혀 없으므로 메모리 수거

주소	・・・	5748	5749	・・・	6725	・・・
값		15			20

<3-11 표> 참조되는 곳이 없는 메모리 수거

5. 새로운 변수 d를 생성

주소	・・・	1520	1521	1522	・・・	2698	・・・
이름		a	b	c		d
값		@6725	@5748	@5748

<3-12 표> 새로운 변수 d를 생성한 변수 메모리 공간

6. 변수 d에 값 20을 할당하기 위해 값 메모리 공간에서 값 20을 가지고 있는 공간을 검색 후 할당

<3-11 표>를 보시면 주소값 6725에 값이 20으로 생성되어있으므로 새롭게 생성할 필요없이 변수 d에 주소값 6725를 할당

주소	・・・	1520	1521	1522	・・・	2698	・・・
이름		a	b	c		d
값		@6725	@5748	@5748		@6725

<3-12 표> 새로운 변수 d에 할당한 변수 메모리 공간

이렇게 메모리에 자바스크립트는 변수에 대해 어떻게 작동하는 지
1. 변수는 어떻게 선언되는가
2. 선언된 변수에는 어떻게 값이 할당되는가
3. 변수의 값을 어떻게 변경되는가
4. 참조되는 곳이 없는 메모리는 어떻게 되는가
에 대해서 알아보았습니다.

끝까지 읽어주셔서 감사합니다.
항상 그렇듯 부족한 부분이나 잘못된 부분이 있다면 지적부탁드리겠습니다.

1-4 리액트 라우터 API 문서 (useParams)

프설남 — Sun, 25 Oct 2020 02:31:48 +0900

useParams

useParams returns an object of key/value pairs of URL parameters. Use it to access match.params of the current <Route>.

useParams

useParams는 URL 인자들의 key/value(키/값) 짝들의 객체를 반환한다. 현재 <Route> 의 match.params에 접근하기 위해 사용한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

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();                //비구조화 할당으로 sulg 변수에 useParams의 객체를 할당
  return <div>Now showing post {slug}</div>; //slug변수에 담은 값을 div태그에 출력
}
 
ReactDOM.render(
  <Router>
    <Switch>
      <Route exact path="/">          //정확히 url의 pathname이 "/"일 때
        <HomePage />                  //HomePage 컴포넌트를 반환
      </Route>
      <Route path="/blog/:slug">      //url의 pathname이 "/blog/:slug" 일 때
        <BlogPost />                  //BolgPost 컴포넌트를 
      </Route>
    </Switch>
  </Router>,
  node
);
Colored by Color Scripter

cs

(코드 1) 공식문서 useParams 의 예제

21번째 행부터 설명하겠습니다.

path="/blog/:slug" 에서 :slug 가 생소할 것입니다. path="/blog" 까지는 앞에서 보셨듯이 url의 pathname이 "/blog"일 때 라우터가 작동합니다.

그럼 :slug는 무슨 일을 하느냐 예를 들어서 (코드 1)에서 url에 "https://도메인/blog/Korea" 라고 접속을 시도합니다.

그럼 <Route path="/blog/:slug"> 여기가 통과가 됩니다. 그리고 나서 useParams 객체에 slug라는 키값에 대해 Korea 라는 값이 할당이 됩니다. 즉, 11번째 행의 slug의 변수에는 Korea가 담길 것이고, 12번째 행에는 <div>태그의 내용이 "Now showing post Korea" 가 될 것입니다.

어디에 쓰느냐? history.push("/blog/korea") 등으로 화면이동을 하신 후에, blog 페이지에서 국가 종류마다 보여줄 페이지를 slug 키값의 값에 따라 korea, usa, japan 등으로 나눈다든지에 쓰일 것 같습니다.

21번째 행에서 <Route path="/blog/:slug"> 꼭 :slug이어야 합니까? 아닙니다.

: (콜론)은 꼭 필요합니다 다만, 뒤의 slug는 키값의 이름이므로 자유롭게 정하고 싶으신대로 정하시면 됩니다.

21번째 행을 <Route path="/blog/:country"> 라고 정했다면 useParams의 객체이 {country : 값} 이렇게 될 것이고,

11번째 행은 비구조화 할당으로 인해 let { country } = useParams(); 가 되며,

12번째 행은 return <div>Now showing post {country}</div>; 가 될 것입니다.

리액트 라우터 공식문서에 useParams에 관한 예제가 있습니다. EXAMPLES에 URL Parameters 예제가 useParams에 관한 예제입니다. 이 예제를 한 번 훑어보겠습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  useParams
} from "react-router-dom";
 
export default function ParamsExample() {
  return (
    <Router>
      <div>
        <h2>Accounts</h2>
 
        <ul>
          <li>
            <Link to="/netflix/usa">Netflix</Link>
          </li>
          <li>
            <Link to="/zillow-group/canada">Zillow Group</Link>
          </li>
          <li>
            <Link to="/yahoo/japan">Yahoo</Link>
          </li>
          <li>
            <Link to="/modus-create/greece">Modus Create</Link>
          </li>
        </ul>
 
        <Switch>
          <Route path="/:id/:kk" children={<Child />} />     //id라는 키값과 kk라는 키값으로
                                                             //URL의 인자를 받아냅니다.
//children 속성은 별도로 설명

        </Switch>
      </div>
    </Router>
  );
}
 
function Child() {
  // We can use the `useParams` hook here to access
  // the dynamic pieces of the URL.
  let useParam = useParams(); //useParams의 객체를 useParam에 할당
  
  console.log(useParam); //useParams의 객체를 로그에 출력
 
  return (
    <div>
      <h3>ID : {useParam.id} kk : {useParam.kk}</h3> //useParams의 객체 속 id와 kk의 값 출력
    </div>
  );
}
 
Colored by Color Scripter

cs

(코드 2) 리액트 라우터 URL Parameters 예제의 변형

일단 예제를 그대로 퍼 오기전에 궁금증이 생겨서 코드에 살을 덧붙여봤습니다. 그리고 useParams를 좀 더 자세하게 표현해보았습니다.

궁금증이란 useParams는 한 개만 가능한가? 였습니다. 그래서 32번째 행을 보시면 path="/:id/:kk"로 바뀌어있습니다.

결과론적으로는 id라는 키값과 kk라는 키값을 가지는 useParams의 객체가 생기므로 몇 개든 생성할 수 있다는 것을 알게 되었습니다.

그리고 43번째 행은 본래의 예제는 let { id } = useParams(); 로 비구조화 할당으로 되어있었으나, 비구조화 할당을 모르시는 분들을 위해 그냥 변수에다가 할당을 하고 콘솔로그에 출력하도록 했습니다.

아래에 콘솔로그 그림을 보시겠습니다.

(그림 1) 코드를 약간 변형시킨 URL Paramteres 예제 코드 실행화면

보시면 Link가 4가지 Netflix, Zillow Group, Yahoo, Modus Create가 보이고 Netflix를 눌러보았습니다. <Link to="/netflix/usa">Netflix</Link> Netflix를 누르면 pathname이 "/netflix/usa"가 되고 31번째 행 <Route path="/:id/:kk" children={<Child />} /> 라우트를 통과해서 id와 kk의 키를 가진 <Child />컴포넌트가 렌더링되며 <Child /> 컴포넌트에서 useParams의 객체를 useParam 변수에 할당하고 useParam을 로그에 출력하면 (그림 1)의 로그 처럼 { id : "netflix", kk : "usa" } 가 출력이 됩니다. 그리고 렌더링될 50번째 행을 보시면, useParam의 id와 useParam의 kk를 출력시킵니다.

<Route path="/:id/:kk" children={<Child />} />

여기에서 children 속성에 대해 설명을 하겠습니다. 모든 컴포넌트는 children이라는 속성을 가지고 있습니다. Parent(부모) 컴포넌트 Child(자식) 컴포넌트라는 용어를 많이 들어보셨을 겁니다.

Parent(부모) 컴포넌트로 쌓여져있는 컴포넌트가 Child(자식) 컴포넌트이죠. 코드로 설명해보겠습니다.

1
2
3
4
5

<Route path="/:id/:kk" children={<Child />} />
 
<Route path="/:id/:kk">
    <Child />
</Route>
Colored by Color Scripter

cs

(코드 3) children 속성 설명을 위한 코드
  보시는 바와 같이 두개의 코드는 같습니다. 3번째 행부터 5번째 행을 보시면 <Route>라는 컴포넌트 사이에 <Child />컴포넌트가 둘러쌓여져있습니다. 

  <Route> 컴포넌트가 Parent(부모) 컴포넌트이고 <Child> 컴포넌트가 Parent(부모) 컴포넌트에 둘러쌓여져있으므로 Child(자식) 컴포넌트가 되는겁니다.  

  그래서 1번째 행의 코드는 <Route>컴포넌트의 Child(자식) 컴포넌트를 <Child> 컴포넌트로 지정한다라는 뜻이며, 하나의 태그 안에 표현할 수 있는겁니다. 
 

정리

1. <Route> 컴포넌트에 path속성에서 URL을 파라미터로써 값을 받는 객체를 useParams()를 통해 접근할 수 있다.

2. 파라미터 개수는 여러개여도 상관없다. ex) <Route path="/:id/:abc/:country" />

맺음말

useParams에 관한 글을 써보았습니다. 머리로는 이해하면서도 글로 쓰려고 하니 적으면서도 뭔가 설명이 부족하다고 느꼈습니다. 보충해야할 부분 이해가 가지 않는 부분이 있으시다면 글 남겨주시면 감사하겠습니다.

언제나 읽어주셔서 감사합니다!

다음글은 useRouteMatch에 대해 글을 써보도록 하겠습니다.

1-3 리액트 라우터 API 문서 (useLocation)

프설남 — Mon, 19 Oct 2020 05:09:57 +0900

useLocation

The useLocation hook returns the location object that represents the current URL. You can think about it like a useState that returns a new location whenever the URL changes.

This could be really useful e.g. in a situation where you would like to trigger a new “page view” event using your web analytics tool whenever a new page loads, as in the following example:

useLocation

useLocation 훅은 현재의 URL을 대표하는 location 객체를 반환한다. 너는 URL이 바뀔 때마다 새로운 location이 반환되는 useState 처럼 생각할 수 있다.

다음의 예시와 같이, 이것은 예를 들어 새로운 페이지가 로드될 때마다 web analytics tool(웹 분석 도구)를 사용하는 새로운 "페이지 모습" 이벤트를 작동시키고 싶어하는 상황에서 정말로 유용할 수 있다.

--설명을 보시려면 더 보기를 눌러주세요--(스크롤 길이 주의)

--loaction 객체란?

useLocation이 location 객체를 반환한다고 하니 직접 불러오고 콘솔창에 찍어보겠습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  useLocation
} from "react-router-dom";
export default function BasicExample() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
        </ul>
        <hr />
        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/about">
            <About />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}
function Home() {
  
  return (
    <div>
      <h2>Home</h2>
    </div>
  );
}
function About() {
  let locationObj = useLocation(); //useLocation()은 location 객체를 반환하므로
                                //locationObj 변수에 location 객체를 저~장
  
  console.log(locationObj);
  
  return (
    <div>
      <h2>About</h2>
    </div>
  );
}
 
Colored by Color Scripter

cs

(코드 1) location 객체를 알아보기 위한 코드
 
  (코드 1)을 보시면 7행에 react-router-dom의 useLocation을 import 하였고,
42행 About 컴포넌트에 location 객체를 locationObj 변수에 저장하고, 
46행에서 loactionObj에 무엇이 담겨있는 지 확인하기 위해 콘솔 창에 출력하는 코드입니다.
 
  즉, About링크를 누르면 locationObj에 location객체가 저장되고 locationObj가 콘솔에 출력됩니다.

(그림 1) locationObj 를 확인하는 그림

(그림 1)은 About 화면으로 이동시키니 URL은 "bnpsd.csb.app/about" 여기로 이동을 하게 되었고 이 페이지가 가지고 있는 location 객체의 정보는 locationObj가 저장하고 그걸 콘솔 창에 출력하고 있습니다.

그럼 이제 가장 중요한 location 객체는 도대체 무엇을 가지고 있는 지 하나하나 살펴보도록 합시다.

1. pathname : 보시면 URL의 도메인 다음의 /를 식별자로써 /부터의 문자열이 pathname으로 들어갑니다.

여기선 "/about" 이 됩니다.

1
2
3
4
5
6
7
8

        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about?id=10">About</Link> //"/about"에서 "/about?id=10"으로 변경
          </li>
        </ul>
Colored by Color Scripter

cs

 

(코드 2) '코드 1' 에서의 18번 행 코드 변경

(그림 2) location 객체의 search를 설명하기 위한 그림

URL 주소가 "bnpsd.csb.app/about?id=10" 으로 변경되었습니다. 여기서 search의 역할을 알 수 있습니다.

2. search : URL에서 ?가 식별자로써 ?부터 나오는 문자열 전부입니다. 여기선 '?id=10' 가 해당됩니다.

여기서 주의하셔서 보실 부분은 pathname이 /로부터 끝까지가 아니라 도중에 ?라는 식별자를 만날 때까지 이라는 겁니다.

그렇다면 여기서 이 녀석이 하는 일은 무언인가? pathname은 페이지 이동을 위한 state입니다.

search는? 예시를 들어서 설명을 해보겠습니다.

(예시)

게시판이 있습니다.

게시판 목록 URL : /board

게시물 내용 화면 URL : /content

게시물 번호의 변수명 : id

라고 가정하고 1번 게시물부터 10번 게시물까지 있는 예시입니다.

그리고 3번 게시물을 선택했습니다. 그럼 이동하는 URL "/content"에 ?id=3 를 뒤에 붙입니다.

"/content?id=3" 이렇게 보냅니다.

그럼 content의 컴포넌트에서 이 loaction 객체의 search를 읽고 ? 다음의 id=3 을 읽어내서 아! 게시물 번호가 3번인 게시물을 렌더링 하겠습니다. 라고 코드를 짜는 데 이용됩니다.

즉, URL에 정보를 포함해서 화면이동을 하는 역할입니다.

1
2
3
4
5
6
7
8

        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about#id=10">About</Link> // ? 를 # 으로 변경 
          </li>
        </ul>
Colored by Color Scripter

cs

(코드 3) '코드 2'에서 ? 를 #으로 변경

(그림 3) location 객체의 hash를 설명하기 위한 그림

URL 주소가 "bnpsd.csb.app/about#id=10" 으로 변경되었습니다. 여기서 hash의 역할을 알 수 있습니다.

3. hash : URL에서 #가 식별자로써 #부터 나오는 문자열 전부입니다. 여기선 '#id=10' 가 해당됩니다.

여기서도 주의하셔서 보실 부분은 pathname이 /로부터 끝까지가 아니라 도중에 #라는 식별자를 만날 때까지 이라는 겁니다.

hash의 쓰임새도 짐작이 가듯이 search와 같은 쓰임새입니다.

다만, 차이점은 식별자가 ? 냐 # 냐 차이입니다.

※ search와 hash는 동시에 사용하실 수 있으십니다.

예시) "bnpsd.csb.app/about?date=20201019#id=10"

4. state : search나 hash처럼 표면적으로 URL에 붙여서 보내는 정보가 아닌 숨겨서 또는 코드로 보내는 정보정도로 이해하시면 되겠습니다.

4-1. Link 태그를 쓰거나 history.push, history.replace 등으로 페이지 이동을 하실 때 쓰실 수 있습니다.

먼저 Link부터 형태를 보겠습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

         <ul>
          <li>
            <Link to={{                      // to 속성에 넣는 값을 변경
                pathname: "/",
                search: "?sort=name",
                hash: "#the-hash",
                state: { 
                         key1: "value1", 
                         key2: "value2" 
                       }
              }}>Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
        </ul>
Colored by Color Scripter

cs

(코드 4) Link 태그의 to 속성 변경 코드
  (코드 4)는 (코드 1)의 15번 행의 Link 태그를 변경한 것 입니다.
  (코드 1)에서는 to 속성에 그냥 string을 넣었습니다.
  하지만 이번에는 location 객체를 내가 각각 지정해서 넣습니다.
  이렇게 보내면 URL은 "도메인/?sort=name#the-hash" 가 될 것이고 location 객체안의 state에는 
{ 
   key1 : "value1",
   key2 : "value2"
}
  가 채워질 겁니다.
  다음 결과 그림을 보시겠습니다.
 
 
(그림 4) location 객체의 state를 설명하기 위한 그림
 
  보시는 바와 같이 URL이 "bnpsd.csb.app/?sort=name#the-hash" 로 이동이 되었고 location 객체도 위에서 예상했듯이 결과가 표시되었습니다. 이렇게 코드 상으로 state를 보낼 때 사용하게 됩니다.
 

4-2. history.push와 history.replace는 이전 글의 설명과 같이,

history.push(path,[state]), history.replace(path,[state]) 로 사용됩니다.

그러므로 보시기에도 [state]을 이용하기 싶으시죠?? 네 맞습니다.

(코드 4)와 똑같은 기능을 하도록 코드를 짜보겠습니다.

history.push(

"/?sort=name#the-hash",

{

key1 : "value1",

key2 : "value2"

}

)

history.replace(

"/?sort=name#the-hash",

{

key1 : "value1",

key2 : "value2"

}

)

이렇게 사용하면 (그림 4)와 같은 결과를 얻으실 수 있으십니다.

마지막으로, 그럼 왜 state를 사용해서 보내냐입니다. 제가 아는 지식에서는 첫번째로는 URL에 보여서는 안되는 중요한 정보를 넘겨줄 때 state로 숨겨서 보낸다. (애초에 엄청 중요한 정보면 이렇게 보내지 않겠지만요..)

두번째로는 URL은 글자 수 제한이 있습니다. 255자였던가.. 검색해보니 2083자라는 군요!

그러므로 state로 보낼 때는 글자 수 제한이 없습니다!

5. key : 이전 글과 이어지는 내용입니다. 간단히 history stack에서 이 해당하는 location 객체를 찾기위한 고유의 문자열 키입니다.

(그림 4)의 Home 링크를 3번 누른다고 해봅시다. 화면의 내용은 바뀝니까? 바뀌지 않습니다.

페이지 이동은 합니까? 네 합니다. 즉, 새로고침이라고 하죠.

그럼 여기서 3번 같은 페이지로 페이지 이동이 되었습니다. 그럼 history stack에는 차례대로 이 3번의 Home 정보가 쌓입니다. 그래서 History가 몇 번째 스택에 있는 history 객체인지 알기 위해서는 이 key이용한다고 합니다.

(그림 5) Home 링크를 3번 누른 그림

보시는 바와 같이 모든 state들은 같은 값을 가지지만 오직 key만 랜덤의 6글자 문자열을 가지게 됩니다.

그리고 마지막으로 location 객체는 어디서 많이 보신 모습 아닙니까?

이전 글인 "1-2 리액트 라우터 API 문서 (useHistory의 state)" 에서의 (그림 10)과 거의 같습니다!

(그림 6) 이전 글에서의 (그림 10)의 history 객체 안의 location

친절히 또 복사해왔습니다. 헤헤

이전 글을 안 보신 분들은 (그림 2)가 history 객체 안에 있는 location이고 (그림 1)은 location 객체 안에 있는 겁니다. 직관적으로 보셔도 key를 제외하고는 모두 같죠?

같지만 따로 있는 이유가 있을 겁니다. 계속 저와 함께 알아가보십시다. : )

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

import React from "react";
import ReactDOM from "react-dom";
import {
  BrowserRouter as Router,
  Switch,
  useLocation
} from "react-router-dom";
 
function usePageViews() {
  let location = useLocation(); //location 객체를 location 변수에 저~장
 
 
  React.useEffect(() => {                      //react hooks의 하나인 useEffect
 
    ga.send(["pageview", location.pathname]);  //ga 라는 건 google Analytics (구글 분석)
                                               //으로써 웹 분석 도구입니다.
                                               //간단히 트래픽 등 관리하기 위한 도구입니다.
  }, [location]);                              //location 값이 변경될 때마다 useEffect가 실행됩니다.                                            
}
 
function App() {
  usePageViews();
  return <Switch>...</Switch>;
}
 
ReactDOM.render(
  <Router>
    <App />
  </Router>,
  node
);
Colored by Color Scripter

cs

(코드 5) useLocation 예시 코드 1

먼저 코드를 보시면 React.useEffect() 가 있습니다. 이건 react에 내장되어있는 react hooks의 하나인 useEffect() 입니다.

간단한 사용처는 react의 생명주기(life cycle)의 기능과 같은 기능을 하는 녀석입니다. 절대 같은 건 아닙니다! 함수형 컴포넌트에서 생명주기를 사용하기 위해 만들어진 기능입니다.

그리고 ga.send() 는 먼저 ga 라는 건 google analytics 의 약자이며, web analytics tool(웹 분석 도구) 중 하나입니다. 저도 잘 몰라서 직접 들어가서 만들어봤습니다.

(그림 7) 구글 분석 도구 화면

처음에 회원가입처럼 정보 입력하고 내가 분석할 사이트를 입력해서 들어갑니다. 그러면 처음에 이렇게 추적 코드라는 걸 보여줍니다. 이걸 내가 분석하고 싶은 해당 사이트 html 소스에 붙여넣으면 된답니다.

(그림 8) 구글 분석 도구 홈 화면

홈 화면을 보니 이렇게 내가 맨 처음 설정할 때 입력한 사이트에 대한 트래픽 분석이 가능합니다. 사용자 위치 등등이요. ㅎㅎ 여기서 트래픽이라는 용어는 서버의 전송량을 뜻합니다. 내가 개인 사이트를 열려면 24시간 작동하는 서버 컴퓨터가 필요할거고 그 서버의 성능은 한정적입니다. 즉 내가 구성해놓은 서버는 동시 접속이 100명까지만 가능한데 200명이 접속하게 되면 서버가 터지는거죠 ㅠㅠ 즉, 사용자가 많아져서 트래픽이 증가한다가 됩니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

import React from "react";
import ReactDOM from "react-dom";
import {
  BrowserRouter as Router,
  Switch,
  useLocation
} from "react-router-dom";
 
function usePageViews() {
  let location = useLocation(); //location 객체를 location 변수에 저~장
 
 
  React.useEffect(() => {                      //react hooks의 하나인 useEffect
 
    ga.send(["pageview", location.pathname]);  //ga 라는 건 google Analytics (구글 분석)
                                               //으로써 웹 분석 도구입니다.
                                               //간단히 트래픽 등 관리하기 위한 도구입니다.
  }, [location]);                              //location 값이 변경될 때마다 useEffect가 실행됩니다.                                            
}
 
function App() {
  usePageViews();
  return <Switch>...</Switch>;
}
 
ReactDOM.render(
  <Router>
    <App />
  </Router>,
  node
);
Colored by Color Scripter

cs

(코드 5) useLocation 예시 코드 1 복사

그래서 ga.send() 함수를 이용해서 내 사이트안에서 location 값이 바뀔 때마다 구글 분석 도구에 지금의 location.pathname을 보내는 거고 이 정보를 토대로 누가 어디서 방문을 했고 몇 명이 방문하고 있는 지를 알 수 있는 것 같습니다.

그러므로 URL의 정보를 가지고 있는 loaction 객체가 유용하게 쓰인다는 뜻입니다.

location

Locations represent where the app is now, where you want it to go, or even where it was. It looks like this:

location

location은 앱이 지금 어딨는지, 너가 location이 어디로 가길 원하는 지, 어디에 있었는 지를 나타낸다. 다음과 같은 모습이다.

1
2
3
4
5
6
7
8
9

{
  key: 'ac3df4', // not with HashHistory!
  pathname: '/somewhere',
  search: '?some=search-string',
  hash: '#howdy',
  state: {
    [userDefined]: true
  }
}
Colored by Color Scripter

cs

(코드 6) Location 예시 코드 2

맨 위에 useLocation에 대해 알아보실 때 location 객체가 무엇을 가지고 있는 지 찾아봤습니다.

(코드 6)은 위에서 보신 것처럼 loaction 객체가 가지고 있는 state들을 보여주는 겁니다.

The router will provide you with a location object in a few places:

Route component as this.props.location
Route render as ({ location }) => ()
Route children as ({ location }) => ()
withRouter as this.props.location

It is also found on history.location but you shouldn’t use that because it’s mutable. You can read more about that in the history doc.

A location object is never mutated so you can use it in the lifecycle hooks to determine when navigation happens, this is really useful for data fetching and animation.

라우터는 몇 군데에서 location 객체를 너에게 제공할 것이다.

<Route> 컴포넌트에서는 this.props.location 으로 접근
<Route>의 render 속성에서는 ({ location }) => () 으로 접근
<Route>의 children 속성에서는 ({ location }) => () 으로 접근
<withRouter> 에서는 this.props.location 으로 접근

location 객체는 history.location에서도 발견된다. 그러나 history.location을 사용해서는 안된다! 왜냐하면 history.location은 변하기 때문이다. history 문서에 있는 그것에 대해 더 읽어볼 수 있다.

한 location 객체는 절대 변하지 않는다. 그래서 너는 location 객체를 화면이동을 결정하는 생명주기 훅스안에서 사용할 수 있다. 이것은 정말로 데이터를 수집하거나 애니메이션에 유용하다.

1
2
3
4
5

componentWillReceiveProps(nextProps) {
  if (nextProps.location !== this.props.location) { // 다음 화면의 location과 
// 현재 화면의 location을 비교 
    // navigated!
  }
}
Colored by Color Scripter

cs

(코드 7) location 예시 코드 3

여기서 가장 중요하게 보셔야할 부분은 생명주기입니다. 리액트의 생명주기에서 history.location은 화면이 완전히 이동할 때까지 유지가 안되고 바로 변하기 때문에 쓰지말아야하고 location 객체는 화면이 완전히 이동하기 전까지 유지되므로 다음 이동할 location과 현재 location을 비교하는 데 적합하다는 내용입니다.

You can provide locations instead of strings to the various places that navigate:

Web Link to
Native Link to
Redirect to
history.push
history.replace

Normally you just use a string, but if you need to add some “location state” that will be available whenever the app returns to that specific location, you can use a location object instead. This is useful if you want to branch UI based on navigation history instead of just paths (like modals).

화면을 이동케하는 여러가지 장소들에게 문자열 대신에 location 객체를 제공할 수 있다.

Web Link to <Link to={location} />
Native Link to <NavLink to={location} />
Redirect to <Redirect to={location} />
history.push history.push(location)
history.replace history.replace(location)

보통 너는 그냥 문자열을 쓴다. 그러나 너가 앱이 특정한 location으로 반환되어야 할 때마다 조금의 "location state"(여기서는 pathname, search, hash, state 등을 뜻함) 추가하기를 필요로 한다면 그냥 문자열을 쓰는 것 대신에 location 객체를 사용할 수 있다.

이것은 (모달과 같은) 단순한 path 대신에 화면이동 history에 기초한 UI를 갈라지게 원한다면 유용하다.

--설명을 보시려면 더 보기를 눌러주세요--

--모달이란?

모달이란 간단히 다이얼로그 창이라고 생각하시면 됩니다. alert 알림창 같은 팝업 창이라고 생각하시면 됩니다.

즉, 여기서는 모달이 단순한 path를 입력해서 팝업 창이 뜬다고 설명하는 겁니다.

--UI를 갈라지게 원한다면?

location 객체의 search의 게시판 예시를 설명했었습니다. (그림 2)의 밑부분에 적혀있습니다.

그러니까 Route에서 받는 url 형식은 같습니다.

그러나 게시판의 번호에 따라 search의 id 값이 다를겁니다.

3번 게시물 <Link to="/content?id=3" />3번 게시물 <Link to={ {pathname : "/content" , search : "?id=3" } } />

5번 게시물 <Link to="/content?id=5" />3번 게시물 <Link to={ {pathname : "/content" , search : "?id=5" } } />

이렇게 말입니다. 즉 이럴 때 location의 state를 이용해서 어디선가 변수를 받아와서 search나 hash에 그 받아온 변수를 넣을 수도 있을 것이고 등등 화면이동을 갈라지게 만들 수 있다는 겁니다.

1
2
3
4
5
6
7
8
9
10
11
12
13

// usually all you need
<Link to="/somewhere"/>
 
// but you can use a location instead
const location = {
  pathname: '/somewhere',
  state: { fromDashboard: true }
}
 
<Link to={location}/>
<Redirect to={location}/>
history.push(location)
history.replace(location)

cs

(코드 8) location 예시 코드 4

(코드 8)은 마찬가지로 location 객체를 이용해서 Link, NavLink, Redirect, history.push, history.replace 등에 사용할 수 있다는 예시 코드입니다.

Finally, you can pass a location to the following components:

Route
Switch

This will prevent them from using the actual location in the router’s state. This is useful for animation and pending navigation, or any time you want to trick a component into rendering at a different location than the real one.

마지막으로 너는 다음 컴포넌트들에 location을 통과시킬 수 있다.

Route
Switch

이것은 router의 state에 있는 실제 location을 사용하는 것을 막을 것이다. 이것은 애니메이션 그리고 화면이동 보류에 유용하거나 언제든 너가 컴포넌트를 실제가 아닌 다른 location에 렌더링하도록 속이고 싶을 때 유용하다.

이 말을 해석하자면 먼저 react는 SPA(Single Page Application)입니다. 페이지가 한 개인 어플리케이션이라는 뜻입니다.

어?! 아니 Home 버튼 About 버튼 만들어서 화면이동하고 하잖아 페이지가 벌써 2개구먼!!! 라고 이해하셨다면 '속이고 싶을 때 유용하다.' 에 글을 읽고 계시는 분도 속으신겁니다. ㅎㅎ

실제로는 하나의 페이지로 이루어져있는데 Route, Switch 덕분에 이 싱글페이지 안에서 화면이동이 나는 것처럼 보여주는 겁니다.

정리

1. useLoaction 은 location 객체를 반환한다.

2. location 객체에는

2-1. pathname : URL에 도메인다음의 / 부터의 문자열

2-2. search : pathname다음의 ?부터의 문자열

2-3. hash : pathname다음의 #부터의 문자열

2-4. state : location 객체로 화면이동을 시킬 때 코드 상으로 보내는 객체

2-5. key : history stack에서 해당 location 객체를 찾기위한 고유키

3. 화면이동 시 보통 단순한 문자열 path를 통과시키지만 세세하게 컨트롤하기 위해 location 객체를

통과시킬 수도 있다.

4. 리액트의 생명주기에 관해서 location을 비교할 때는 history의 location은 현재 location값이 유지되지

않고 변하므로 변하지 않고 유지되는 location 객체를 사용해야한다.

5. location 객체로 화면이동을 시키는 건 Route와 Switch 덕분에 화면이동이 되어지는 것처럼 보일 뿐이다.

맺음말

일주일이 지나서 토, 일요일 하루에 1개씩 한 주에 2개씩 블로그 글을 쓰려고 했습니다만, 일이 바쁜 관계로 이번 주에는 1개의 글만 올리게 되었습니다 ㅠ

그리고 제 글을 끝까지 읽어주셔서 감사합니다!

다음 글은 useParams()에 대해 설명하는 글을 써보도록 하겠습니다!!

지적과 오타 등 댓글로 남겨주시면 감사하겠습니다!

1-2 리액트 라우터 API 문서 (useHistory의 state)

프설남 — Mon, 12 Oct 2020 06:49:52 +0900

history

The term “history” and "history object" in this documentation refers to the history package, which is one of only 2 major dependencies of React Router (besides React itself), and which provides several different implementations for managing session history in JavaScript in various environments.

The following terms are also used:

“browser history” - A DOM-specific implementation, useful in web browsers that support the HTML5 history API
“hash history” - A DOM-specific implementation for legacy web browsers
“memory history” - An in-memory history implementation, useful in testing and non-DOM environments like React Native

history

이 문서에서 "history" 와 "history 객체"라는 용어는 history 패키지를 가르킵니다.

history 패키지는 (리액트 자체 외에) 리액트 라우터의 오직 2개뿐인 중요한 의존성들 중 하나입니다.

그리고 history 패키지는 다양한 환경에 있는 JavaScript 안에 있는 session history를 관리하기 위한 몇 가지 다른 구현들을 제공합니다.

다음 따라오는 용어들이 사용됩니다 :

“browser history” - HTML5 history API를 지원하는 웹 브라우저에서 유용한 특정한 DOM 구현
“hash history” - 기존 웹 브라우저들을 위한 특정한 DOM 구현
“memory history” - 테스트를 하거나 React Native 같은 DOM 환경이 없는 곳에 유용한 in-memory history 구현

--설명을 보시려면 더 보기를 눌러주세요--(스크롤 길이 주의)

--history package (history 패키지)란?

If you wish to understand React Router, you must first study history. More specifically, the history package, which provides the core functionality for React Router. It enables projects to easily add location based navigation on the client-side, which is essential for single page applications.

출처 : medium.com/@pshrmn/a-little-bit-of-history-f245306f48dd

너가 리액트 라우터를 이해하길 원한다면 너는 history를 첫번째로 공부해야만 합니다.
좀 더 자세하게는, 리액트 라우터를 위한 핵심기능을 제공하는 history 패키지.
그것은 싱글 페이지 어플리케이션(SPA)에 필수인 클라이언트 측에서의 화면이동을 기반한 location을 쉽게 추가할 수 있게 해줍니다.

=> 즉, 리액트 라우터를 공부하기 위해서는 첫번째로 알아둬야만 하는 것이 history 패키지입니다.
공식문서에 적혀있는 hisotry, history 객체는 그냥 history 패키지를 뜻합니다.
그리고 history 패키지는 리액트 라우터가 실행되는 데에 핵심기능을 제공한다는 뜻입니다.
클라이언트 측( 즉, 홈페이지에 접속해서 사용하는 컴퓨터 측 )에서 화면이동을 하는데 필요한 게 location이고 이 location을 추가하는 데 쉽게 추가할 수 있게 도와준다는 말입니다.

=>> 더더 줄여서 설명을 하자면 history 패키지는 화면이동을 하는 데 도와주며 brower history, hash history, memory history 이 3가지를 합쳐서 부르는 말입니다.

--dependency (의존성)이란?

dependency는 아래의 그림부터 보여드리고 설명을 하겠습니다.

(그림 1) 리액트 폴더 속 package.json

(그림 2) package.json 속 dependencies

(그림 1)의 위치에 (그림 2)와 같이 "dependencies"(dependence의 복수형)가 있습니다. 제가 개발하고 있는 프로젝트의 dependencies들입니다. 여기서 예를 들어서 설명하겠습니다.

react의 가장 큰 특징은 JSX라고 생각합니다.

1
2
3
4
5

import React from 'react';
 
function Example () {
    return <div>example</div>;
}

cs

1번 째 행을 보시면 'react' 로 부터 import(수입)을 해왔으니까 JSX식인 return <div>example</div>; 가 에러가 나지 않습니다.

(그림 3) 에러가 난 코드

첫번째 행을 삭제해봅니다. 그럼 이제 JSX식을 해석해 줄 'react'가 없어졌으니 (그림 3)과 같이 당연히 순수자바스크립트에서는 이 코드를 해석하지 못하고 에러가 발생하게 됩니다.

즉, 어떻게 개발을 해나가겠다는 생각의 순서가 이상할 수 있지만 나는 JSX식을 사용해서 개발을 할 거고 그러면 JSX식을 해석해줄 react가 필요해! 그러니 이 프로젝트는 react에 의존하게 되는 거죠 react가 없으면 JSX식을 쓸 수가 없기 때문입니다. 그리고 이 프로젝트를 배포를 할 때 이 프로젝트는 반드시 react가 있어야 해석이 가능하다는 걸 알리기 위해 (그림 2)의 dependencies에 입력해줍니다.

즉, (그림 2)에서 보이는 material-ui/core 부터해서 'react-scripts' 까지 제가 개발하고 있는 프로젝트에 무조건 필요한 녀석들인 겁니다. 이 녀석들에게 의존(dependence)하고 있습니다.

그러니 다시 원점으로 돌아와서 history 패키지는 리액트 라우터의 오직 2개뿐인 중요한 의존성들 중 하나이다.의 해석은 리액트 라우터를 실행시키기 위해서는 반드시 있어야하는 2개의 dependencies가 있는데 그 중에 하나가 history 패키지라는 겁니다.

--session history 란?

The sequence of Documents in a browsing context is its session history.

출처 : www.w3.org/TR/2010/WD-html5-20101019/history.html

해석해보면 browsing context(브라우징 맥락)안에서의 Documents 의 순서가 session history 이다.

(그림 4) 이미지 그대로 제목

하나씩 뜯어서 찾아봅시다. ㅠㅠ

1. browsing context :

A browsing context is the environment a browser displays a Document. In modern browsers, it usually is a tab, but can be a window or even only parts of a page, like a frame or an iframe.

출처 : developer.mozilla.org/en-US/docs/Glossary/Browsing_context

브라우징 맥락은 브라우저가 Document 객체를 보여주는 환경이다. 현대 브라우저들에서는, 그것은 보통 탭이다. 그러나 윈도우가 될 수 있거나 frame 또는 iframe 과 같은 페이지의 부분들 조차도 될 수 있다.

(그림 5) 예전의 Internet Explorer의 모습

즉, 예전에는 이렇게 윈도우 브라우저가 큰 하나의 화면 입니다.

(그림 6) 지금 작업 중인 저의 화면

지금은 (그림 6)의 빨간색 선 표시와 같이 탭이라는 이름으로 하나의 브라우저가 여러개로 동시에 묶여있을 수 있습니다.

(그림 7) iframe 예시 출처 : http://tcpschool.com/examples/tryit/tryhtml.php?filename=html_space_iframes_01

그리고 (그림 7)의 빨간색 선과 같이 브라우저 창안 속의 또 하나의 브라우저 창이 iframe요소로 만들어진 창입니다.

윈도우 브라우저, 탭, iframe 공통점이 무엇입니까? 네 모두 다 하나의 브라우저 창입니다.

즉, 다시 돌아가서
브라우징 맥락은 브라우저가 Document 객체를 보여주는 환경이다. 현대 브라우저들에서는, 그것은 보통 탭이다. 그러나 윈도우가 될 수 있거나 frame 또는 iframe 과 같은 페이지의 부분들 조차도 될 수 있다.

이 말은 그냥 browsing context(브라우징 맥락)은 그냥 간단히 브라우저 창이라고 생각하시면 됩니다.

휴.. 이 한 문장 때문에 몇 십분을 찾아서 해석을 하고 다녔는지... ㅋㅋ

2. Documents :

The Document interface represents any web page loaded in the browser and serves as an entry point into the web page's content, which is the DOM tree. The DOM tree includes elements such as <body> and <table>, among many others. It provides functionality globally to the document, like how to obtain the page's URL and create new elements in the document.

Document 인터페이스는 브라우저에 실행된 모든 웹 페이지를 나타냅니다. 그리고 웹 페이지의 내용인 DOM tree(돔 트리)로 들어가는 진입점 역할을 제공합니다. DOM tree(돔 트리)는 그 중에서도 <body> 태그 그리고 <table> 태그 같은 요소들을 포함합니다. DOM tree(돔 트리)는 어떻게 페이지의 URL을 얻고 어떻게 document에 새로운 요소들을 생성하는 지 것과 같이 document에 전체적으로 기능을 제공합니다.

즉, Document 인터페이스는 그냥 웹 페이지 그 자체입니다. 끝.

그리고 여기서 이상한 거를 느끼셨을 지는 모르겠지만 맨앞에 Document는 대문자 D 인데 중간 중간의 document는 모두 소문자 입니다. 보통 Document는 인터페이스이고 document는 객체랍니다.

그럼 인터페이스랑 객체는 또 뭐냐? ㅠㅠ 예를 들어서 설명드리겠습니다.

의자라는 사물로 설명하겠습니다.

우리가 의자라고 생각하면 어떤 물건을 의자라고 합니까?
붙여서 앉을 수 있는 판이 있어야 겠죠?
그리고 그 판을 어느정도의 높이에 있게 해주는 다리가 필요합니다.
이렇듯 의자라고 불릴 수 있는 규격(?)을 인터페이스라고 합니다. 추상적인 겁니다.

그럼 객체는 뭐냐 의자라고 불릴 수 있는 이 추상적인 규격에 맞춰서 실제로 만든 의자가 객체입니다.
그 객체는 등받이가 있을 수도 없을 수도 있고, 앉을 수 있는 판이 네모이거나 원이거나 세모일 수도 있고, 판을 받드는 다리가 길 수도 있고 짧을 수도 있고 엄청 다양하게 만들 수 있습니다.

즉, Document 인터페이스는 웹 페이지라고 불릴 수 있는 꼭 있어야 하는 규격을 뜻하는 거고, document 객체는 그 규격에 맞추어서 구글이라든지 네이버, 다음 등 여러가지 웹 페이지들을 뜻하는 겁니다.

다시 원점으로 돌아가 보겠습니다.

The sequence of Documents in a browsing context is its session history.

출처 : www.w3.org/TR/2010/WD-html5-20101019/history.html

해석해보면 browsing context(브라우징 맥락)안에서의 Documents 의 순서가 session history 이다.

위의 해석대로 다시 해석하면 브라우저 창에서 웹 페이지의 연속이 session history 이다!
와... 저도 처음에 이게 무슨 말인지 정말 몰랐는데 쓰면서 보니 이렇게 이해가 가네요 ㅠㅠ

즉, 지금 보고 계시는 블로그의 웹 페이지, 또 다른 탭들의 웹페이지의 연속들이 session history인 겁니다.
단순히, Crtl + H 누르시면 자신의 웹 페이지 방문 기록이 뜹니다. 방문한 웹 페이지 하나하나들의 정보(?)를 모으는 곳이 session history 라고 이해하면 될 것 같습니다. (확실하지 않습니다 ㅠㅠ)

--implementations (구현)이란?

구현이라는 것은 어떠한 것을 만드는 것의 모든 과정을 뜻합니다.

즉, IT의 한 프로젝트를 구현한다고 하면 의뢰자와의 회의부터 시작해서 설계, 공정, 테스트, 배포, 판매, 유지보수까지로서 프로젝트 처음부터 끝까지 싹 다 포함해서 구현이라고 표현합니다.

'그리고 history 패키지는 다양한 환경에 있는 JavaScript 안에 있는 session history를 관리하기 위한 몇 가지 다른 구현들을 제공합니다.'

이 문장은 브라우저의 웹 페이지들을 관리하기 위한 모든 것들을 제공한다는 뜻이 됩니다. 웹 페이지들을 관리하기 위한 처음부터 끝까지 모든 것들을 제공한다는 뜻이 되겠습니다. 강력한 녀석이군요...

--in-memory 란?

음 in-memory history 라는 건, history 패키지는 3개로 구성되어 있습니다. brower history, hash history, memory history 이렇게 있습니다. 다른 두 brower history랑 hash history 는 DOM에서 구현을 하는데 memory history는 in-memory history 즉, 메모리를 사용해서 구현을 하는 것 같습니다.

여기까지 쓰는 데 찾으면서 이해하고 쓰는 데 4시간 반이 걸렸습니다 ㄷㄷ;; 바로 다음으로 가겠습니다.

history objects typically have the following properties and methods:

length - (number) The number of entries in the history stack
action - (string) The current action (PUSH, REPLACE, or POP)
location - (object) The current location. May have the following properties:
- pathname - (string) The path of the URL
- search - (string) The URL query string
- hash - (string) The URL hash fragment
- state - (object) location-specific state that was provided to e.g. push(path, state) when this location was pushed onto the stack. Only available in browser and memory history.
push(path, [state]) - (function) Pushes a new entry onto the history stack
replace(path, [state]) - (function) Replaces the current entry on the history stack
go(n) - (function) Moves the pointer in the history stack by n entries
goBack() - (function) Equivalent to go(-1)
goForward() - (function) Equivalent to go(1)
block(prompt) - (function) Prevents navigation (see the history docs)

history 객체는 일반적으로 다음과 같은 속성들과 메소드들을 가집니다 :

length - (number) history stack 안에 있는 항목들의 수
action - (string) 현재 행동 (PUSH, REPLACE, or POP)
location - (object) 현재 위치. 아마도 다음 속성들을 가집니다. :
- pathname - (string) URL의 경로
- search - (string) URL의 쿼리 문자열
- hash - (string) URL의 해시 조각
- state - (object) 이 location가 스택으로 push 되어졌을 때 제공되는 특정한 location의 state
  예를 들어 push(path, state)가 사용되었을 때
push(path, [state]) - (function) history stack으로 새로운 항목을 넣습니다.
replace(path, [state]) - (function) history stack에 현재 항목을 교체합니다.
go(n) - (function) history stack안에서 n번째 항목으로 포인터를 움직입니다.
goBack() - (function) go(-1)와 동일합니다.
goForward() - (function) go(1)와 동일합니다.
block(prompt) - (function) 화면이동을 막습니다. (hisotry 문서를 보시면 됩니다.)

--설명을 보시려면 더 보기를 눌러주세요--(스크롤 길이 주의)

--history stack이란?

history stack이란 건 stack부터 설명하겠습니다. 자료구조의 하나로서 한 쪽으로만 넣거나 뺄 수 있는 구조입니다.
요즘 가짜사나이를 즐겨 보기 때문에 탄창을 예시로 들어보겠습니다.

(그림 8) stack 설명을 위한 탄창 그림

탄창에 1번부터 10번까지 숫자가 적혀있는 탄약을 1번부터 차례대로 집어 넣습니다.

다 집어넣은 다음에 다시 빼냅니다. 여기서 빼내면 몇 번이 적힌 탄약부터 빠져나옵니까?

네. 10번 9번 8번 7번 ・・・ 1번 이렇게 넣은 순서의 역순서로 빠져나오게 됩니다.

이러한 구조를 가지고 있는 것이 stack입니다.

그럼 history stack이라는 건 history 객체에 어떠한 정보들을 가지는 stack 구조라는 뜻입니다.

--Length

Length는 history stack안에 있는 항목들의 수입니다. 즉 (그림 8)과 같이 10개의 탄약을 넣으면 이 항목의 수는 10개되는 것입니다.

--action

현재 history 객체가 행동하고 있는 상태입니다.

하나씩 봅시다. 1. PUSH : history.push()를 실행했을 때입니다.

2. REPLACE : history.replace()를 실행했을 때입니다.

3. POP : history.push()와 history.replace()를 제외한 모든 메소드들을 실행했을 때입니다.

( 초기화도 포함 )

--location

history 객체가 가지고 있는 state로서 이 location 안에 다음과 같은 속성들을 가집니다.

1. pathname : URL 경로입니다. 지금 현재 블로그 페이지 "explain-programming.tistory.com/manage/newpost
/?type=post&returnURL=%2Fmanage%2Fposts" 이거 그 자체입니다.

2. search : URL의 쿼리 문자열이라고 되어있습니다. 쿼리 문자열라는 것은 간단히 정보를 요청하는 문자열입니다.
URL속에 있는 정보를 요청하여 얻는 것입니다.
"explain-programming.tistory.com/manage/newpost/?type=post&returnURL=%2Fmanage%2Fposts"

현재 URL에서 search에 해당하는 부분은
"?type=post&returnURL=%2Fmanage%2Fposts" 여기입니다.

네. ?부터 시작하는 부분입니다. 여기서 무슨 정보를 요청해서 받느냐 자세히 보시면 type=post와 &
returnURL=%2Fmanage%2Fposts가 보이실 겁니다.
이 URL 주소는 지금 웹 페이지에 type 변수에 post라는 값 &(와/과 라는 뜻과 일맥상통합니다.)
returnURL변수에 %2Fmanage%2Fposts라는 값을 보내고 있고 그걸 search가 받습니다.

(그림 9) search 설명을 위한 URL

(그림 10) '그림 9'에 해당하는 history 객체 속 location의 search 값

(그림 9)와 (그림 10)을 보시는 바와 같이 history 객체는 URL에서 ?를 식별자로써 ?뒤의 모든 문자열을 쿼리 문자열로 판단하여 search에 할당합니다.

3. hash : URL의 해시 조각입니다. search와 다를 바가 없습니다. 다만 식별자가 ?가 아니라 # 해시태그가 됩니다.

(그림 11) hash 설명을 위한 URL

(그림 12) '그림 11'에 해당하는 history 객체 속 location의 hash 값

(그림 10)과 (그림 11)을 보시는 바와 같이 history 객체는 URL에서 #를 식별자로써 #뒤의 모든 문자열을 해시 조각으로 판단하여 hash에 할당합니다.

4. state : state는 메소드들을 설명한 후에 설명드리겠습니다. ㅎㅎ

--push(path, [state])

history stack으로 새로운 항목을 넣습니다. 이전글 1-1 리액트 라우터 API 문서 (Hooks, useHistory)에서도 잠깐 나왔습니다. 조금 더 자세히 설명을 해보겠습니다. ㅎㅎ

</p

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  useHistory,
} from "react-router-dom";
 
 
export default function BasicExample() {
  
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/dashboard">Dashboard</Link>
          </li>
        </ul>
 
        <hr />
 
        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/dashboard">
            <Dashboard />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}
 
 
function Home() {
  let history = useHistory();
  console.log(history);
  
  const handleClick = () => {
    history.push('/about');
  }
  
  return (
    <div>
      <h2>Home</h2>
      <button onClick={handleClick}>go about</button>
    </div>
  );
}
 
function About() {
  let history = useHistory();
  console.log(history);
  
  return (
    <div>
      <h2>About</h2>
    </div>
  );
}
 
function Dashboard() {
  let history = useHistory();
  console.log(history);
  
  return (
    <div>
      <h2>Dashboard</h2>
    </div>
  );
}
 
Colored by Color Scripter

cs

(코드 1) history.push()를 설명하기 위한 코드
 
 
(그림 13) '코드 1'에 해당하는 출력된 화면
 
 
'https://bnpsd.csb.app/'이라는 URL로 접속을 하면 처음에는 초기화가 진행됩니다.
그래서 history stack에 history 객체가 action이 POP인 상태로 1개가 쌓이게 됩니다.
그리고 여기 go about 버튼을 누른다면 52번째 줄의 history.push('/about') 코드로 인하여
URL은 'https://bnpsd.csb.app/about'으로 입력이 될 것이고 history stack에는 history 객체가 action이 PUSH인 상태로 또 1개가 쌓여서 총 2개가 쌓여있게 됩니다.
아래 결과 그림을 보여드리겠습니다.
 
(그림 14) '그림 13' 화면에서 go about 버튼을 누른 결과 그림
 
 
(그림 14)를 보시면 length가 1에서 2로 action이 POP에서 PUSH로 바뀐 것을 보실겁니다.
즉, history.push(path, [state]) 는 path의 위치로 이동하고 그에 해당하는 history 객체를 history stack에 저장시킵니다.
그리고 [state] 의 [] 대괄호는 생략해서 함수를 호출해도 된다는 의미입니다. (코드 1)의 52번째 줄 history.push('/about')을 보시면 history.push('/about', state에 관한 값)의 형식이 아닙니다.
즉, 상황에 따라 넣어도 되고 안 넣어도 되는 옵션입니다. 대신 반대로 []대괄호가 없으면 필수로 넣어야하는 인수(parameter)가 되는겁니다. 여기선 path가 필수로 넣어야하는 인수가 되는 겁니다.

--replace(path, [state])

history stack에 현재 항목을 교체합니다. 이번엔 교체입니다.

바로 예시 보시겠습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  useHistory,
} from "react-router-dom";
 
 
export default function BasicExample() {
  
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/dashboard">Dashboard</Link>
          </li>
        </ul>
 
        <hr />
 
        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/dashboard">
            <Dashboard />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}
 
 
function Home() {
  let history = useHistory();
  console.log(history);
  
  const handleClick = () => {
    history.replace('/about');
  }
  
  return (
    <div>
      <h2>Home</h2>
      <button onClick={handleClick}>go about</button>
    </div>
  );
}
 
function About() {
  let history = useHistory();
  console.log(history);
  
  return (
    <div>
      <h2>About</h2>
    </div>
  );
}
 
function Dashboard() {
  let history = useHistory();
  console.log(history);
  
  return (
    <div>
      <h2>Dashboard</h2>
    </div>
  );
}
 
Colored by Color Scripter

cs

(코드 2) history.replace()를 설명하기 위한 코드
 
 
(코드 2)에서 바뀐 코드는 (코드 1)의 52번째 줄 history.push('/about')이 history.replace('/about')으로 바뀐 것 뿐입니다.
마찬가지로 'https://bnpsd.csb.app/'이라는 URL로 접속을 하고 처음에는 초기화가 진행됩니다.
그래서 history stack에 history 객체가 action이 POP인 상태로 1개가 쌓이게 됩니다.
그리고 여기 go about 버튼을 누른다면 어떻게 되겠습니까?
바로 결과 화면 보시겠습니다.
 
(그림 15) '코드 2'의 화면과 실험 결과 그림
 
(그림 15)를 보시면 (그림 14)와는 많이 다릅니다. 일단 length가 1에서 그대로 1입니다.
그리고 action도 POP에서 REPLACE입니다.
action이 REPLACE가 되는 건 action에 대한 설명을 했는 거 그대로 입니다.
그럼 length는 어떻게 1이 되었는가 입니다.
처음에 초기화가 시작될 때는 (그림 14)와 똑같습니다. 초기화된 history 객체가 history stack에 들어가게 된 것입니다.
그럼 go about 버튼을 누르고 나서는 어떤 현상이 일어났는가에 대해서는 history stack구조는 (그림 8)의 탄창과 같은 것이기 때문에 초기화한 history 객체가 먼저 들어가 있고, 그 다음 REPLACE history 객체를 넣은 다음 초기화한 history 객체를 빼내는 건 있을 수 없는 일입니다.
즉, history stack에 현재 항목을 교체합니다. 이므로 먼저 초기화한 history 객체를 빼냅니다 그럼 length가 0인 history stack이 되겠습니다. 그리고 이제 REPLACE history 객체를 집어넣어서 교체를 합니다.
즉, history.replace(path, [state]) 는 path의 위치로 이동하고 그에 해당하는 history 객체를 history stack에 맨 위에 있는 history 객체와 교체시킵니다.
state 설명은 나중에 하겠습니다.
 

--go(n)

history stack안에서 n번째 항목으로 포인터를 움직입니다.

숫자 n 만큼 설정하신 만큼 화면을 이동하는 겁니다.

예를 들어 history.go(1)을 실행시키면 앞으로 가기 1번을 실행한 것과 같습니다.

history.go(-3)이면 뒤로가기 3번과 같은 결과를 보여줍니다.

여기서도 조금 더 자세한 설명을 해보겠습니다. history stack이 어떻게 되는지 말입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  useHistory,
} from "react-router-dom";
 
 
export default function BasicExample() {
  
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/dashboard">Dashboard</Link>
          </li>
        </ul>
 
        <hr />
 
        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/dashboard">
            <Dashboard />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}
 
 
function Home() {
  let history = useHistory();
  console.log(history);
  
  const handleClick = () => {
    history.go(-2);
  }
  
  return (
    <div>
      <h2>Home</h2>
      <button onClick={handleClick}>go(-2)</button>
    </div>
  );
}
 
function About() {
  let history = useHistory();
  console.log(history);
  
  return (
    <div>
      <h2>About</h2>
    </div>
  );
}
 
function Dashboard() {
  let history = useHistory();
  console.log(history);
  
  return (
    <div>
      <h2>Dashboard</h2>
    </div>
  );
}
Colored by Color Scripter

cs

(코드 3) history.go()를 설명하기 위한 코드

history.go()의 실험을 할 코드입니다. 바뀐 것은 역시 마찬가지로 52번째 줄 history.replace('/about') 에서 history.go(-2) 로 바뀌였고 58번째 줄 <button>태그의 텍스트가 go about에서 go(-2)로 바뀌었습니다.

(그림 16) '코드 3'에 해당하는 출력 화면

여기서 실험은 Home 화면을 초기화시킵니다. => About으로 갑니다 => Dashboard로 갑니다 =>

마지막으로 Home으로 옵니다. 그리고 go(-2) 버튼을 누릅니다. 각각 history stack이 어떻게 쌓여가는 지 보여드리겠습니다.

(그림 17) '코드 3'에 대한 실험 결과

length : 1 action : POP 초기화된 Home 화면
length : 2 action : PUSH 초기화된 About 화면
length : 3 action : PUSH 초기화된 Dashboard 화면
length : 4 action : PUSH 초기화된 Home 화면
length : 4 action : POP 초기화된 About 화면

이게 결과입니다.

실험은 Home 화면을 초기화시킵니다. => About으로 갑니다 => Dashboard로 갑니다 =>

Home으로 옵니다. => go(-2) 버튼을 누릅니다. 이였습니다.

여기서 알 수 있는 점은 크게 2가지입니다.

1. <Link to="/about"></Link>의 링크태그로 화면 이동을 한 것은 history.push('/about')과 같은 기능을 한다 입니다.

2. history.go(-2)를 하면 history stack의 수가 줄지 않고 그냥 포인터만 이동을 한다. 즉, 여기 실험에서는 4번째 스택까지 쌓여있었는데 거기서 -2만큼 했으니 2번째 스택인 About 화면이 보이게 되는 것입니다.

그럼 갑자기 여기서 궁금해졌습니다.

go(-2)로 스택 2번째인 history 객체를 가리키게 되었습니다. 여기서 replace를 하면 어떻게 될 것 같습니까? 저도 모릅니다. 한 번 해보겠습니다. ㅎㅎ

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  useHistory,
} from "react-router-dom";
 
 
export default function BasicExample() {
  
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/dashboard">Dashboard</Link>
          </li>
        </ul>
 
        <hr />
 
        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/dashboard">
            <Dashboard />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}
 
 
function Home() {
  let history = useHistory();
  console.log(history);
  
  const handleClick = () => {
    history.go(-2);
  }
  
  return (
    <div>
      <h2>Home</h2>
      <button onClick={handleClick}>go(-2)</button>
    </div>
  );
}
 
function About() {
  let history = useHistory();
  console.log(history);
  
   const handleClick = () => {
    history.replace('/dashboard');
  }
  
  return (
    <div>
      <h2>About</h2>
      <button onClick={handleClick}>go dashboard</button>
    </div>
  );
}
 
function Dashboard() {
  let history = useHistory();
  console.log(history);
  
  return (
    <div>
      <h2>Dashboard</h2>
    </div>
  );
}
 
Colored by Color Scripter

cs

(코드 4) 궁금한 게 생겨서 만들어 본 코드

지금 오후 10시부터 글 쓰기 시작해서 새벽 5시인데 코드 설명은 간단히 하겠습니다 ㅠㅠ

About 컴포넌트에 68번째 줄 history.replace('/dashboard') 가 되도록 버튼을 추가하였습니다.

마찬가지로 실험 순서는 Home 화면을 초기화시킵니다. => About으로 갑니다. => Dashboard 로 갑니다. => Home으로 갑니다. => go(-2)버튼을 눌러 스택 2번째인 About 화면이 나타납니다 => 여기서 Dashboard로 가는replace버튼을 누릅니다. => 뒤로가기를 누릅니다.

(그림 18) '코드 4'에 관한 실험에 대한 결과

와.. 대박입니다. replace로 Dashboard 화면으로 가서 뒤로가기를 눌렀더니 Home화면이 나오고 더이상 뒤로가기는 되지 않았습니다.

이 말은 즉슨 go()로 이동하여 history stack안에서 가리키고 있는 그 history 객체가 replace로 인해 교체가 된다는 말이 됩니다.

그러면 (그림 8)에서 탄창얘기는 성립이 안되게 됩니다. ㅠㅠ 좀 특수한 탄창이라고 덧붙이면 되겠습니다.
각 탄약층마다 새로운 탄약을 옆에 밀어넣어서 빼낼 수 있는 공간이 있는 탄창이다 라고 말입니다 ㅠㅠ
정리하자면 기본적으로 stack 구조이지만 특수한 경우에 배열처럼 해당 스택을 빼고 교체할 수 있다는 거로 이해가 됩니다.

저는 탄약이 만약에 [ 1 , 2 , 3 , 4 ] 로 있다면 go(-2)를 하면 [ 3 , 4 , 1 , 2 ] 로되고 replace를 하면 [ 3 , 4 , 1 , 5 ] 처럼 history stack안의 history 객체가 순서를 움직여서 2번째 스택이 제일 위가 되니까 replace되는 줄 예상을 했습니다. 근데 저기서 더이상 뒤로가기가 안되는 걸 보고는 [ 1 , 5 , 3 , 4 ] 이렇게 순전히 포인터가 그 스택자리까지 가서 그 스택자리를 교체한다는 것을 깨달았습니다.

--goBack()

go(-1)와 동일합니다. 즉, 뒤로가기 1번과 같습니다. 설명 한 번 더 하면 뒤질 것 같습니다 진짜 ㅠ

--goForward()

go(1)와 동일합니다. 즉, 앞으로가기 1번과 같습니다.

--block(prompt)

화면의 이동을 막습니다. 말 그대로 입니다. 화면의 이동을 막아서 아무것도 일어나지 않습니다.

prompt는 developer.mozilla.org/ko/docs/Web/API/Window/prompt MDN 자료를 보시면 이해가 되실 겁니다.

alert()랑 비슷한 놈입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  useHistory,
} from "react-router-dom";
 
 
export default function BasicExample() {
  
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
        </ul>
 
        <hr />
 
        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}
 
 
function Home() {
  let history = useHistory();
  console.log(history);
  
  const handleClick = () => {
    history.block(prompt("블로그 글 쓰기 어렵니?","네ㅠㅠ"));
     console.log(1);
  }
  
  return (
    <div>
      <h2>Home</h2>
      <button onClick={handleClick}>block</button>
    </div>
  );
}
 
 
Colored by Color Scripter

cs

(코드 5) history.block()을 설명하기 위한 코드
 
history.block()은 어떻게 진행이 되는 지 알아보기 위해 (코드 5)와 같이 코드를 짜봤습니다.
 
(그림 19) '코드 5'에 대한 결과 그림
 
결과는 화면 이동같은 건 되지않고 prompt()를 실행 시킵니다. 그리고 여기서 확인이나 취소버튼을 누르게 되면
 
(그림 20) '그림 19'의 다음 화면
URL을 보시면 화면 이동은 되지않았고, 콘솔에는 1이 찍힙니다. 즉, 화면 이동만 안 될뿐이지 뒷 코드는 차질없이 실행이 됩니다.
가장 중요한 쓰임새로는 제가 개인적으로 생각해봤을 때, 화면 이동이 되는 코드인데 특정한 조건에 이 블럭으로 막아줘야할 때 쓰일 것 같습니다...만 솔직히 잘 모르겠습니다 ㅋㅋ
 
--location의 state
 
이 location가 스택으로 push 되어졌을 때 제공되는 특정한 location의 state 예를 들어서 push(path, state)가 사용되었을 때
 
라는 공식문서의 설명입니다. location의 state의 설명을 마지막으로 한 이유는 'location가 스택으로 PUSH되어졌을 때' 이 문장 때문입니다. 이제 이해가 가실 거라 믿습니다 history 객체의 location이 history stack으로 push 되어졌을 때라는 의미입니다. 여기서 push 되어졌을 때라는 말은 action이 PUSH를 가리키는 말이 아닙니다. 순전히 history stack에 새로운 history 객체가 들어왔을 때를 의미하는 것입니다. 그러므로 history 객체의 메소드들 중에서 entry(항목)을 넣는 메소드는 push와 replace 뿐이므로 둘 다 인수로 (path, [state])에서 [state]를 가지는 것입니다.
 
그럼 이것을 어떻게 사용을 하느냐 다음 코드를 보시겠습니다. history.push()로 예시를 보이겠습니다.
 
 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  useHistory
} from "react-router-dom";
 
export default function BasicExample() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
        </ul>
 
        <hr />
 
        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/about">
            <About />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}
 
function Home() {
  let history = useHistory();
  console.log(history);
  
  const handleClick = () => {
    history.push('/about',{key:"value",key2:"value2"})
  }
  
  return (
    <div>
      <h2>Home</h2>
      <button onClick={handleClick}>go about</button>
    </div>
  );
}
 
function About() {
  let history = useHistory();
  console.log(history);
  
  return (
    <div>
      <h2>About</h2>
    </div>
  );
}
Colored by Color Scripter

cs

 
(코드 6) location의 state를 설명하기 위한 코드
 
중요하게 보실 부분은 43번째 행의 history.push('/about',{key:"value",key2:"value2"}) 이 부분입니다.
history.push(path, [state])에서 state부분을 {key:"value",key2:"value2"} 이렇게 객체로 넣었습니다.
그리고 push를 하면 history에 어떤 변화가 생길까요?
 
(그림 21) '코드 6'에 대한 결과 화면
 
보시면 처음 초기화된 history 객체에는 location의 state가 undefined로 비어있습니다.
하지만 history.push('/about',{key:"value",key2:"value2"})로 state에 
{key:"value",key2:"value2"}를 넣어보낸 결과 history 객체의 location의 state에 보낸 그대로의 객체가 표시됩니다.
즉, 어떠한 정보를 다음 화면으로 보낼 때 이 state를 이용해서 보내는 것 같습니다.
어? search랑 hash로도 정보를 받아올 수도 있지 않냐 왜 굳이 state로 보내느냐 라고 생각하실 수도 있겠습니다.
아마 get, post 전송 방식과 같다고 생각하시면 될 것 같습니다. search와 hash는 URL에 붙어있는 정보를 받기 때문에 노출되어 있습니다. 그럼 노출되어서는 안되는 정보들이 있을 겁니다. 그것들을 state로 보낼 때 사용할 것 같습니다.
또한 아마 search와 hash는 글자 제한이 있을 겁니다. 그 글자 제한보다 많은 데이터를 보낼 때도 state로 사용해서 보낼 것입니다.

history is mutable

The history object is mutable. Therefore it is recommended to access the location from the render props of <Route>, not from history.location. This ensures your assumptions about React are correct in lifecycle hooks. For example:

history는 변할 수 있다.

history 객체는 변할 수 있다. 그러므로 history.location으로 부터가 아닌 <Route>의 render 속성으로부터 location에 접근하는 것이 추천된다. 이것은 생명주기 hooks 에서 리액트에 대한 너의 가정들이 올바른 지 보장해준다.

1
2
3
4
5
6
7
8
9
10
11
12
13

class Comp extends React.Component {
  componentDidUpdate(prevProps) {
    // will be true
    const locationChanged =
      this.props.location !== prevProps.location;
 
    // INCORRECT, will *always* be false because history is mutable.
    const locationChanged =
      this.props.history.location !== prevProps.history.location;
  }
}
 
<Route component={Comp} />;
Colored by Color Scripter

cs

 

(코드 7) hisotry는 변할 수 있다에 대한 공식문서의 예시 코드

코드 그대로 해석하자면 <Route>로 화면을 이동할 때 리액트 라우터는 항상 history, location, math 이렇게 3가지 객체를 전송합니다. 그리고 location 객체와 history.location 객체는 가지고 있는 state도 같고 모양이 같습니다.

만약 화면이동하기 전의 location값과 지금 화면의 location 값을 비교해야할 경우가 생겼을 때는 history.location은 값이 변하기 때문에 항상 같지 않을 거랍니다.

그러므로 화면이동하기 전의 location값과 지금 화면의 location 값을 비교할 때는 history.location이 아니라 location 객체를 사용하셔야 합니다.

Additional properties may also be present depending on the implementation you’re using. Please refer to the history documentation for more details

부가적인 속성들은 당신이 사용하고 있는 구현에 따라 존재할 수 있다. 더 자세한 건 history 문서를 참조하시길 바랍니다.

9시간 만에 드디어 길고 긴 하나의 글이 완성이 되었습니다.

생각보다 엄청 길어졌습니다 ㅠㅠ

이렇게 긴 글 끝까지 읽어주신 분들, 필요한 부분만 읽어주신 분들, 그냥 방문해주신 분들 모두들 감사합니다

다음 글은 useLocation 에 관한 글을 적어보도록 하겠습니다.

다음 주말에 뵙겠습니다 ㅎㅎ

이해가 안되시거나 부족한 부분이 있으면 언제든지 댓글 남겨주시면 감사하겠습니다!

1-1 리액트 라우터 API 문서 (Hooks, useHistory)

프설남 — Sun, 11 Oct 2020 00:36:51 +0900

Hooks

React Router ships with a few hooks that let you access the state of the router and perform navigation from inside your components.

Please note: You need to be using React >= 16.8 in order to use any of these hooks!

useHistroy
useLocation
useParams
useRouteMatch

Hooks

리액트 라우터는 당신의 컴포넌트들 안에서부터 라우터의 state에 접근하거나 화면이동(navigation)을 수행하게 해주는 조금의 hooks를 가지고 있습니다.

노트 : 이 hooks들 중 어느것이든 사용하기 위해서는 리액트 16.8버전 이상을 사용할 필요가 있습니다.

useHistroy
useLocation
useParams
useRouteMatch

--설명을 보시려면 더 보기를 눌러주세요--

--라우터란?

라우터(router[a] 혹은 라우팅 기능을 갖는 공유기)는 패킷의 위치를 추출하여, 그 위치에 대한 최적의 경로를 지정하며, 이 경로를 따라 데이터 패킷을 다음 장치로 전향시키는 장치이다. -위키백과 출처-

=> 즉, 여기서는 화면과 화면을 연결시켜주고 이동을 시켜주는 장치라고 이해하시면 될 것 같습니다.

--라우터의 state란?

라우터의 state에는 기본적으로 history, location, match 라는 객체가 있습니다.

여기서 location 객체를 좀 자세히 보여드리겠습니다.

학교를 예시로 설명해보겠습니다. 3학년 1반(이하 3-1)이 있고 3-2, 3-3 있습니다.

3-1, 3-2, 3-3은 입구부터 차례대로 있습니다.

반 배정이 있는 날입니다. 저는 '/3-2#프설남' 이라는 종이를 받았습니다.

입구와 제일 가까운 처음 3-1로 들어가려고 합니다. 막힙니다 ㅠ 왜냐고요? 저는 3-2 학생이니까요

그래서 다음 학급으로 들어갑니다. 종이에 3-2가 있으니 들어갈 수 있습니다.

여기서 '3-2 프설남'가 URL이 되고 '/3-2#프설남'에서 '/3-2'는 pathname이라는 '#프설남'은 hash라는 라우터의 state 중 하나인 location 객체의 state에 해당한다고 이해하시면 될 것 같습니다.

아래의 그림들을 봐 주세요.

(그림 1) URL

이 URL주소는 리액트라우터돔 공식홈페이지에 EXAMPLE에서 제가 설명하기 위해 만든 임의의 코드에 해당하는 URL주소입니다.

(그림 2) useLocation을 이용한 콘솔 결과

useLocation을 이용하여 (그림 1)에 해당하는 URL에 대한 location을 콘솔 창에 출력했고,
보시는 바와 같이 pathname, search, hash, state 들이 라우터의 state에 해당합니다.

1. useHistory

The useHistory hook gives you access to the history instance that you may use to navigate.

1. useHistory

useHistory hook은 화면이동에 사용할 수 있는 history 인스턴스에 접근하게 해준다.

--설명을 보시려면 더 보기를 눌러주세요--

--history 인스턴스

history 객체입니다.

리액트 라우터에서 화면이동을 할 때 항상 history, location, match 라는 객체에 필요한 정보들을 보내게 되어있습니다.

즉, 공식문서에서 말하는 history 인스턴스는 화면이동을 할 때 보내는 history, location, match 중 history에 해당합니다. 여기에 접근하게 해준다는 거죠.

아래의 그림에서 history 객체를 보실 수 있습니다.

(그림 3) useHistory를 이용한 콘솔 결과

보시면 history 객체는 location, createHref, push, replace, go, goBack, goForward, block, listen 라우터의 state를 가지고 있습니다.

공식문서의 '화면이동에 사용할 수 있는 history 인스턴스'를 보시면 '화면이동에 사용할 수 있는' 여기에 해당하는 것들이 push 부터 block 까지 화면이동하는 데 사용되는 함수들입니다.

예를 하나 들면 goBack() 함수를 사용하면 뒤로가기를 한 번하는 것과 같은 기능을 합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { useHistory } from "react-router-dom";
 
function HomeButton() {
  let history = useHistory();
 
  function handleClick() {
    history.push("/home");
  }
 
  return (
    <button type="button" onClick={handleClick}>;
      Go home
    </button>;
  );
}
Colored by Color Scripter
cs

(코드 1) useHistory 공식문서 예시 코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  useHistory                 // hook 이라서 import React, {useHistory} from "react"; 가 아닙니다.
                             // 절~~대 제가 그래봤다는 건 아닙니다 :)
} from "react-router-dom";
export default function BasicExample() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Index</Link> // html의 <a> 태그와 같은 기능
                                      // 누르면 to="/" 이니 URL이 '도메인/' 로 이동합니다.
          </li>
          <li>
            <Link to="/home">Home</Link> // 마찬가지로 to="/home" 이니 
                                         // 누르면 URL이 '도메인/home' 로 이동합니다.
          </li>
        </ul>
        <hr />
  
        <Switch>
          <Route exact path="/"> // URL을 확인하는 곳입니다.
                                 // path="/" 이니 URL이 '도메인/'로 시작하기만하면 전부 해당합니다.
                                 // 이렇게 되면 '도메인/abc'든 '도메인/efhuiwfheu'든 전부 통과합니다.
                                 // 그러나 exact가 있으므로 정확히 URL이 '도메인/'만 통과합니다.
                                 
            <Index />            // <Route exact path="/">의 검사를 통과하면 <Index /> 컴포넌트가 있으므로
                                 // <Index /> 컴포넌트를 렌더링(화면에 출력)합니다.
          </Route>
          
          <Route path="/home">   // path="/home" 이니 URL이 '도메인/home'으로 시작하기만 하면 전부 해당됩니다.
                                 // '도메인/home/bae'든 '도메인/home/fehuefhj'든 전부 해당되게 됩니다.
                                 // 즉, URL의 앞 '도메인/home'이 일치하므로 다 통과시킵니다.
                                 
            <Home />             // <Route path="/home">의 검사를 통과하면 <Home /> 컴포넌트가 있으므로
                                 // <Home /> 컴포넌트를 렌더링(화면에 출력)합니다.
                                 
          </Route>
        </Switch>
      </div>
    </Router>
  );
}
function Index() {            // Index 컴포넌트
  let history = useHistory(); // useHistory() hook을 사용하여 history 객체를 변수 history에 할당합니다.
  
  function handleClick(){     // 버튼을 클릭했을 때 실행시킬 handleClick 함수
    history.push('/home');    // history안에 있는 push 함수를 실행합니다.
                              // push(path, [state]) : path는 pathname에 해당 즉, URL주소
                              //                       [state] 는 [] 옵션이라는 뜻으로 생략해도 된다는 뜻입니다.
                              //                       반대로 path는 []로 안 감싸져있으니 필수로 넣어야한다는 뜻입니다.
                              //                       위 (그림 2)를 보시면 location 객체 속에 state:undefined 가 보일겁니다.
                              //                       거기에 넣을 정보를 넣을 때 이 옵션에 객체를 넣습니다.
                              // history.push('/home')는 즉, URL '도메인/home'으로 이동시켜줍니다.
                              // 새로고침이 되지 않습니다.(나중에 history.replace()와의 차이점이 됩니다.)
  }
  
  return (
    <div>
      <h2>Index</h2>
      <button type="button" onClick={handleClick}> // Go home 버튼
        Go home
      </button>
    </div>
  );
}
function Home() {               // Home 컴포넌트
  return (
    <div>
      <h2>Home</h2>
    </div>
  );
Colored by Color Scripter
cs

(코드 2) '코드 1'을 설명하기 위한 코드

(그림 4) '코드 2'의 Index 컴포넌트 화면

링크 Index와 Home이 리스트로 표시가 되고

<hr/> 선이 그어지고

어느 <Route>를 통과한 컴포넌트가 출력됩니다.

여기선 <Route exact path="/"></Route>를 통과한 <Index />컴포넌트가 출력됩니다.

URL이 'https://bnpsd.csb.app/'에서 'https://도메인/'의 형식을 가집니다.

즉, 'bnpsd.csb.app'이 도메인입니다. 그리고 'bnpsd.csb.app'의 바로 뒤 '/' 부터 location 객체의 state인 pathname에 해당합니다.

여기서 Go home 버튼을 누르면 history.push('/home')이 실행될 것이고 결과는 어떻게 되겠습니까?

(그림 5) Go home 버튼을 누른 후 결과 화면

URL이 'https://bnpsd.csb.app/home' 로 바뀌었습니다!

즉 pathname이 '/' 였던 것이 history.push('/home')에 의해 pathname이 '/home'로 바뀌게 되었고,

URL의 주소가 바뀌었으니

리액트 라우터가 <Route>에서 다시 검사를 시작합니다.

자바스크립트는 기본적으로 위에서부터 차례대로 소스를 읽기 때문에

<Route exact path="/"> 부터 검사를 시작합니다.

자, 지금 pathname은 '/home' 입니다.

<Route exact path="/"> 에서 path='/'는 통과합니다. 왜냐 '/home'도 '/' 시작하기 때문입니다.

근데 exact가 있습니다? 정확히 path='/'가 아니므로 결국 통과하지 못합니다.

그럼 다음 <Route path="/home"> 으로 넘어가서 검사합니다.

뭐 두말하면 잔소리입니다. 통과하게 되고 <Home /> 컴포넌트가 렌더링됩니다.

다음 글에서는 공식문서와는 순서를 다르게 history 객체의 state (location, createHref, push, replace 등)에 대해 설명하도록 하겠습니다.

긴 글과 글자 수가 많은데도 끝까지 읽어주셔서 정말 감사합니다!

부족한 부분이 있으면 언제든지 댓글 남겨주시면 감사하겠습니다!

1-0 리액트 라우터 공식문서 API부분 해석

프설남 — Sat, 10 Oct 2020 22:06:07 +0900

같이 성장하는 프로그래밍

자바스크립트 변수 Part 1

1. 변수 생성 과정

2. 해당 변수가 가지고 있는 값을 찾아가는 과정

3. 변수의 값을 변경하는 과정

1-4 리액트 라우터 API 문서 (useParams)

useParams

useParams

정리

맺음말

1-3 리액트 라우터 API 문서 (useLocation)

useLocation

useLocation

location

location

정리

맺음말

1-2 리액트 라우터 API 문서 (useHistory의 state)

history

history

history is mutable

history는 변할 수 있다.

1-1 리액트 라우터 API 문서 (Hooks, useHistory)

Hooks

Hooks

1. useHistory

1. useHistory

1-0 리액트 라우터 공식문서 API부분 해석

영어나 프로그래밍을 그리 잘하지는 못하여서 틀린 지식이거나 보완했으면 하는 부분이 있다면 얼마든지 댓글에 남겨주시면 감사하겠습니다!

조금이라도 도움이 되었으면 좋겠습니다 ㅎㅎ

그럼 다음 글 부터 하나하나 시작해 나가겠습니다.
잘 부탁드리겠습니다

같이 성장하는 프로그래밍

자바스크립트 변수 Part 1

1. 변수 생성 과정

2. 해당 변수가 가지고 있는 값을 찾아가는 과정

3. 변수의 값을 변경하는 과정

1-4 리액트 라우터 API 문서 (useParams)

useParams

useParams

정리

맺음말

1-3 리액트 라우터 API 문서 (useLocation)

useLocation

useLocation

location

location

정리

맺음말

1-2 리액트 라우터 API 문서 (useHistory의 state)

history

history

history is mutable

history는 변할 수 있다.

1-1 리액트 라우터 API 문서 (Hooks, useHistory)

Hooks

Hooks

1. useHistory

1. useHistory

1-0 리액트 라우터 공식문서 API부분 해석

안녕하세요. 오늘부터 비주기적으로 react-router-dom 공식문서 중 API 부분을 해석 및 설명에 대해 글을 올려보려고 합니다.글 형식은 공식문서를 가져와서 의,직역을 한 후,개인의 설명을 붙여서 블로그를 작성해 나갈 예정입니다!

영어나 프로그래밍을 그리 잘하지는 못하여서 틀린 지식이거나 보완했으면 하는 부분이 있다면 얼마든지 댓글에 남겨주시면 감사하겠습니다!

조금이라도 도움이 되었으면 좋겠습니다 ㅎㅎ

그럼 다음 글 부터 하나하나 시작해 나가겠습니다.잘 부탁드리겠습니다

그럼 다음 글 부터 하나하나 시작해 나가겠습니다.
잘 부탁드리겠습니다