1. 사건의 발단

• 페이지를 만들었으면 뒤로도 가야 할 것 아닌가...! 응당 그것이 맞는 일이다.
• React Router DOM의 기능으로 주소의 기록을 알려주는 'history'기능이 있다고 한다. 그것을 이용하기로 하였다.

2. 사전 작업

• useHistory
  • useHistory를 import 한다. 이는  React Router DOM의 기능이다.

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

3. 이벤트 핸들

const history = useHistory();

  const handleHistory = () => {
    history.goBack();
  }

• useHistory를 history에 할당한다.
• handleHistory이벤트를 만들어서 안에 history의 goBack을 사용한다.
• goBack은 바로 이전의  주소 history를 읽어 보낸다.

4. 버튼 만들기

<i onClick={ handleHistory } className="far fa-arrow-alt-circle-left" />

• 이처럼 눌렀을때 이벤트가 발생할 수 있도록 만들어 주었다.
• 나는 Font Awesome의 아이콘을 사용하였다. 아이콘을 누르면 뒤로 갈 수 있도록.

리액트를 전반적으로 다시 보았다. 고차 함수를 리액트 안에서 자유롭게 사용할 수 있게 되었다. 주말 동안 state와 Hook을 더 연습하여 자유롭게 사용하게 되면 완벽할 것 같다.

(2022.01.03 수정!)

추가 : 이제는 useHistory 대신 useNavigate를 사용해야 합니다!

V6 부터 (약, 2021.03월 쯤 업데이트 되었다) 이제 useHistory는 이름이 useNavigate로 바뀌었다.

(라우팅을 담당하던 switch도 routes로 개명했다)

사용법은 비슷하다. 오히려 더 간단해졌다.

// history를 사용할 때
const history = useHistory();

history.push('/maps')
history.replace('/maps')

// navigate를 사용할 때
const navigate = useNavigate();

navigate('/maps');
navigate('/maps', {replace: true});

// 이전 페이지로 이동
navigate(-1)

// 앞 페이지로 이동
navigate(1)

1. 정규표현식?

• 특별한 문자를 조합하거나 확인할 때 사용하는 패턴이다.
• 주로 test, String, match, replace, search, split  메서드와 같이 쓰인다.

2. 정규표현식 만드는 법

• 따옴표를 ( " " )를 슬래쉬 ( / / )로 대신한다.
• 특수문자나 영어 알파벳 철자를 넣어서 패턴을 만든다.

const str = /hello world/;
const str = new RegExp("hello world"); // RegExp객체의 생성자 함수를 호출. 결과는 같다.

• 위의 두 가지 방법은 정규식이 계속 지속될 때는 첫 번째, 정규식의 패턴이 바뀌는 경우는 수정을 위해 함수를 사용하는 것이 좋다.

3. 어떻게 사용하는 것일까?

• 포인트는 \와 /의 쓰임이다. 정규표현식에서 특수기호를 사용할 때 사용한다. 일반적인 문자열로 읽지 못하도록 만드는 것이다.

1.  g : 전역 검색
2. i : 영어 대소문자 비교 없이 검색
3. m : g보다 넓게 줄이 바뀌어도 검색
4. y : lastIndex의 속성에 숫자를 지정해서 y로 검색을 하면 지정해준 숫자의 index의 문자만 검색
5. * : 반복되는 문자를 최대한 검색
6. *? : 반복되는 문자를 최소한으로 검색
7. a-z 혹은, A-Z 혹은,  ㄱ-ㅎ 혹은, 0-9 : 범위 지정
8. . : 그 줄의 모든 문자열
9. \d : 숫자
10. \D : 숫자가 아닌 모든것
11. \w : 영어와 숫자
12. \W  : 영어랑 숫자 빼고 전부 다
13. \s : 띄어쓰기
14. \S : 띄어쓰기 제외하고 전부 다
15. | : or
16. [찾을 문자] : 찾고 싶은 문자를 찾아줌
17. [^제외할 문자] : 제외할 문자를 빼고 모든 문자를 찾아줌. ( 대부분 ^ 는 부정 )
18. ^시작할 문자 : 시작할 문자로 시작한다.
19. 끝낼 문자$ : 끝낼 문자로 끝을 낸다.
20. () : 그룹 검색과 분류 ( 주로 match에 사용)
21. \b : 단어의 처음과 끝
22. \B : 단어의 처음과 끝 빼고 전부 다

4. 정규표현식 연습

https://regex101.com/

이렇게 보아서는 잘 이해가 안 되는 것이 정상이다. 필요한 부분에 찾아 사용하다 보면 적응이 쉽게 된다. 필요한 정규 표현식을 사용하여 문제 풀이 시간을 줄여보자!

1. input의 다양한 타입

• HTML의 input은 다양한 타입을 가지고 있다. 잘 사용하면 디자인적으로 혹은 기능적으로 매우 좋다.
  1. <input type="password"> : 비밀번호 창이다. 문자가 ●이나 *로 입력되기 때문에 무엇을 입력하는지 입력하는 사람 빼고는 모른다.
  2. <input type="submit"> : 입력된 창에 있는 데이터를 전송한다. 이때, 버튼은 자동으로 생긴다.
     •  
  3. <input type="radio"> " 라디오 버튼을 만든다.
     • 선택하세요.
     • 이것도 됩니다.
  4. <input type="checkbox"> : 체크박스를 만든다.
     
     • 체크할 수 있어요.
     • 여기도 역시 됩니다.
  5. <input type="date"> : 날짜를 선택해 표시할 수 있다.
  6. <input type="color"> : 색상 선택기가 표시된다.
     • 누르면 색상을 선택 할 수 있어요.
  7. <input type="range"> : 슬라이드 컨트롤이 표시된다.
     • 조절 할 수 있어요.
  8. <input type="month"> : 월과 연도를 선택할 수 있다.
     •   date와 다릅니다! 일은 선택할 수 없어요.
  9. <input type="week"> : 주와 연도를 선택할 수 있다.
     • 마찬가지로 date와 month와 달라요.
  10. <input type="time"> : 시간을 선택할 수 있다.
  11. <input type="email"> : 이메일을 적을 수 있다. 자동적으로 유효성 검사가 된다.
      • 보기에는 그냥 텍스트 박스이지만 이메일 형식을 맞춰야 해요.
  12. <input type="tel"> :  전화번호를 입력할 수 있다.
      • 이메일과 마찬가지입니다.
  13. <input type="url"> : url형식을 입력할 수 있다.
      • 또 이메일, 전화번호와 마찬가지예요.

2. Function Composition (함수의 조합)

• 함수를 합쳐서 다시 새로운 함수를 만든다.

function add5(num) {
	return num + 5;
}
function add3(num) {
	return num + 3;

add3(add5(0)); // 8

• 위처럼, 함수 두 개를 결합했다. 안쪽의 함수가 먼저 실행된다.
• 이처럼, 함수를 한 가지 기능만을 구연되게 해 놓으면 나중에 유지보수와 재활용에 매우 뛰어나다. 정확히 하나의 함수가 하나의 일을 하고 있고, 어떤 일을 하는지 찾기도 쉽기 때문이다.

3. 커링

• 함수를 사용할 때, 여러 개의 인자를 한번에 변수로 넣어서 호출하는것이 아니라,( Ex : function add (num1, num2, num3) ) 모든 인자를 분리하여 여러개의 함수로 만들어 사용하는 것이다. ( Ex : function add(num1)(num2)(num3) )

function sum(num1) {
	return function(num2) {
	return num1 + num2;
    }
}

sum(3)(5); // 8

let sum10 = sum(10);
sum10(20); // 30
sum10(40); // 50

• 위에서 보이듯이 num1의 값을 결정해 놓고, num2 만 바꿔줌으로써, 여러 가지 결과를 원하는 대로 얻을 수 있다.
• 클로저와 마찬가지로 재활용이 매우 용의 하다.

1. onsubmit

• 입력받은 정보들을 전송한다.
• 회원가입과 같은 기능에서 입력된 정보들을 전송할 수 있다.

2. onchange

• 데이터 변화를 감지한다.

3.  onmouse 이벤트

1. onmouseenter : 마우스 포인터가 요소안으로 들어왔을 때 발생하는 이벤트이다. ( CSS의  hover 같은 상황 ) 자식 요소도 모두 포함한다. 마우스가 요소 밖으로 나갔다가 다시 들어오지 않는 이상 이벤트는 발동하지 않는다.
2. onmouseover : onmouseenter의 반대의 경우. 영역을 벗어나지 않아도 가능.
3. onmouseout : 위와 반대로,  마우스 포인터가 밖으로 나왔을때 혹은, 자식 요소에 들어가면 발생하는 이벤트.
4.  onmousemove : 마우스 포인터가 요소 안에서 움직일때 발생하는 이벤트.

4. onkey 이벤트

1. onkeyup : 키보드가 올라 올때 발생하는 이벤트
2. onkeydown : 키보드가 눌려졌을때 발생하는 이벤트
3. onkeypress : 키보드가 눌려졌을때 발생하는 이벤트.
   • onkeydown과 달리 키보드가 계속 눌려진 상태에서도 이벤트가 계속 발생하는점이 다르다.

5. event.stopPropagation

• 이벤트 실행시 부모요소의 이밴트 전달을 중지하라는 의미.
• 이벤트는 실행될 시 부모 요소까지 이벤트를 전달한다. 이를 멈춰서 자신이 속한 요소의 이벤트만 실행시킨다.

6.  event.preventDefault

• 페이지를 이동하거나, 혹은 전송 ( 아까 onsubmit ) 등을 사용하였을 때, 페이지가 리로드 되는 것을 막아준다.
• 페이지 리로드를 막기 위하여, event.stopPropagation을 사용한다면, URL이동 자체도 되지 않을 것이다.
• 그래서 지금의 이벤트로 만들어진 상태를 '유지한다'는 의미를 가지고 있는 preventDefault를 사용한다.