[항해99] 리액트 기초반 - 3주차(3-1~3-6)

스파르타코딩클럽 #리액트 기초반 2주차

 

[수업 목표]

1. event listener를 사용할 수 있다.
2. React-router로 주소에 따라 다른 페이지를 보여줄 수 있다.
3. 미리 정해놓은 주소가 아닐 때, '앗! 잘못 찾아오셨어요!' 페이지를 보여줄 수 있다.
4. Redux로 상태 관리를 해보고 아래의 상태관리 흐름을 이해한다. (기본 값이 있고 → 어떤 동작을 하면("어떤 동작을 하는지 정하자! → 하면 뭐가 바뀌는 지 정하자!" 과정이 사전에 필요하다!) → 값이 변했잖아? → 컴포넌트한테 알려주자!)
5. Redux hook을 사용해본다.

3-1. Event Listener

1) 이벤트 리스너란?

이벤트 리스너는 사용자가 어떤 행동(=이벤트)을 하는 지 아닌 지 지켜보다가 알려주는 것입니다.

대표적으로는 마우스 클릭, 터치, 마우스 오버, 키보드 누름 등이 자주 쓰여요!

 

2) 클래스형 컴포넌트에서 event listener 구독하기

(1) 어떤 행동(=이벤트 발생!) 뒤에 실행할 함수 먼저 만들어요.

(2) 이제 addEventListener()를 이용해서 이벤트를 등록합니다.

(3) 이벤트는 꼭 컴포넌트가 사라지면 지워주세요!

hoverEvent = (e) => {
    // 콘솔로 이 이벤트가 누구에게서 일어났는 지 확인할 수 있습니다.
    console.log(e.target);
    // ref랑 같은 녀석인 지 확인해봐요!
    console.log(this.circle.current);

    this.circle.current.style.background = "yellow";
  }

 // 발생
componentDidMount(){
    // 리액트 요소가 잘 잡혔나 확인해봅시다!
    console.log(this.circle);

    // 마우스를 올렸을 때, 이벤트가 일어나는 지 확인해봅시다.
    this.circle.current.addEventListener("mouseover", this.hoverEvent);
  }
  
  //삭제
componentWillUnmount() {
    this.circle.current.removeEventListener("mouseover", this.hoverEvent);
  }

3) 함수형 컴포넌트에서 event listener 구독하기

(1) useEffect() : 리액트 훅

- 라이프 사이클 함수 중 componentDidMount와 componentDidUpdate, componentWillUnmount를 합쳐둔 것.

(2) 어떤 행동(=이벤트 발생!) 뒤에 실행할 함수 먼저 만들어요.

(3) 이제 addEventListener()를 이용해서 이벤트를 등록합니다.

(4) 이벤트는 꼭 컴포넌트가 사라지면 지워주세요!

- useEffect에서 clean up은 return 구문을 이용!

// 첫번째 인자는 익숙하죠! 화살표 함수! 넵, 렌더링 시 실행할 함수가 여기에 들어갑니다.
  // 두번째 인자의 []! 디펜던시 어레이라고 불러요. 여기 넣어준 값이 변하면 첫번째 인자인 콜백함수를 실행합니다.
  React.useEffect(() => {
    // 여기가 rendering 때 실행될 구문이 들어가는 부분입니다.
    // componentDidMount, componentDidUpdate일 때 동작하는 부분이 여기예요.
    text.current.addEventListener("mouseover", hoverEvent);
    
    return () => {
        // 여기가 clean up 부분입니다.
        // componentWillUnmount 때 동작하는 부분이 여기예요.
        text.current.removeEventListener("mouseover", hoverEvent);
    };
  }, [text]);

< remove이벤트는 적용이 안 되는데??>

3-2. 라우팅이란?

5) 라우팅이란?

브라우저 주소에 따라 다른 페이지를 보여주는 것. → 이미 만들어진 라우팅 라이브러리가 있다.

 

4) SPA란?

👉 Single Page Application!

-말 그대로 서버에서 주는 html이 1개뿐인 애플리케이션. 전통적인 웹사이트는 페이지를 이동할 때마다 서버에서 html, css, js(=정적 자원들)을 내려준다면, SPA는 딱 한 번만 정적 자원을 받아온다.

 

-왜 굳이 html을 하나만 줄까?

→ 많은 이유가 있지만, 그중 제일 중요한 건 사용성 때문.

페이지를 이동할 때마다 서버에서 주는 html로 화면을 바꾸다 보면 상태 유지가 어렵고, 바뀌지 않은 부분까지 새로 불러오니까 비효율적이라. (사용자가 회원 가입하다가 적었던 내용이 날아갈 수도 있고, 블로그 같은 경우, 페이지마다 새로 html을 받아오면 바뀐 건 글뿐인데 헤더와 카테고리까지 전부 다시 불러와야 합니다.)

 

-단점은 없나? 

→ 단점도 있어요. SPA는 딱 한 번 정적 자원을 내려받다 보니, 처음에 모든 컴포넌트를 받아옵니다.

즉, 사용자가 안 들어가 볼 페이지까지 전부 가지고 온다. 게다가 한 번에 전부 가지고 오니까 아주아주 많은 컴포넌트가 있다면 첫 로딩 속도가 느려집니다.

3-3. 리액트에서 라우팅 처리하기 (1)

6) react-router-dom 패키지 설치하기

yarn add react-router-dom@5.2.1

7) react-router-dom 공식 문서를 보자!

https://v5.reactrouter.com/web/guides/primary-components

Declarative routing for React apps at any scale | React Router

3-4. 리액트에서 라우팅 처리하기 (2)

6) 페이지를 전환해보자!

(1) index.js에 BrowserRouter 적용하기

 BrowserRouter : 페이지가 실제로 이 주소창을 실제로 참고해서 이동되도록 하는 , 주소창 보고 내 컴포넌트를 분기할 수 있게 하는 것.

(2) 세부 화면 만들기

(3) App.js에서 Route 적용하기

(4) exact 적용하기

<Route path="/" exact component={Home} />

(5) URL 파라미터 사용하기

웹사이트 주소에는 파라미터와 쿼리가 있음. 

→ 파라미터: /cat/nabi

→ 쿼리: /cat?name=nabi  

(?key=value&__&)

파라미터 주는 방법

//App.js
...
// 파라미터 주기
<Route path="/cat/:cat_name" component={Cat}/>

...

파라미터 사용 방법

//Cat.js
import React from "react";

const Cat = (props) => {

    console.log(props.match);

    return (
        <div>고양이 화면이에요.</div>
    )
}

export default Cat;

useParams 훅을 사용해서 이동하기

> 꼭 props에서 받아오지 않아도, useParams 훅을 사용하면 간단히 파라미터에 접근할 수 있어요!

import React from "react";
import { useParams } from "react-router-dom";
const Cat = (props) => {
    const cat_name = useParams();
    console.log(cat_name);
    // console.log(props);
  return (
      <div>고양이 화면입니다!</div>
  );
};

export default Cat;

(6) 링크 이동시키기

react-router-dom으로 페이지를 이동하는 방법

1) <Link/> 사용하기

링크 컴포넌트는 html 중 a 태그와 비슷한 역할을 해요. 리액트 내에서 페이지 전환을 도와 줌.

<Link to="주소">[텍스트]</Link>

2) history 사용하기

Link 컴포넌트를 클릭하지 않고 페이지를 전환하는 방법 두 가지

props로 history 객체를 받아 이동하기

import React from "react";

const Dog = (props) => {
  // props의 history 객체를 살펴봅시다.
  console.log(props);

  // 그리고 history.push('/home')으로 페이지 이동도 해봐요!

  return (
    <div
      onClick={() => {
        props.history.push("/home");
      }}
    >
      강아지 화면이에요.
    </div>
  );
};

export default Dog;

useHistory 훅을 사용해서 이동하기

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

const Home = (props) => {
  let history = useHistory();
  return (
    <>
      <div>메인 화면이에요.</div>

      <button
        onClick={() => {
          history.push("/cat");
        }}
      >
        cat으로 가기
      </button>
    </>
  );
};

export default Home;

 

3-5. Quiz_버킷리스트 상세 페이지 만들고 이동시키기

힌트: 1. Detail.js라는 파일 하나를 만들고 <Detail/> 컴포넌트를 만드세요!

2. 어떤 버킷 리스트 항목을 눌러도 그 페이지로 가게 해볼 거예요!

3. history.{}를 써봐요! ({}엔 뭐가 들어갈까요?)

4. 꼭 코드스니펫을 복사해서 써주세요.

5. 버킷리스트 컴포넌트에서는 useRef를 쓰는 대신 element에 직접 onClick을 줘서 해봅시다!

3-6. 라우팅, 조금 더 꼼꼼히 쓰려면?

8) 잘못된 주소 처리하기

일단 NotFound.js 파일을 만들고 빈 컴포넌트를 만들어주세요.

App.js에서 불러옵니다.

Switch를 추가해주고,

...
import { Route, Switch } from "react-router-dom";
...

    return (
      <div className="App">
        ...
          <Switch>
            <Route
              path="/"
              exact
              render={(props) => (
                <BucketList
                  list={this.state.list}
                  history={this.props.history}
                />
              )}
            />
            <Route path="/detail" component={Detail} />
          </Switch>
        ...
      </div>
    );
  
...

NotFound컴포넌트를 Route에 주소 없이 연결하면 끝!

...
		<Switch>
            <Route
              path="/"
              exact
              render={(props) => (
                <BucketList
                  list={this.state.list}
                  history={this.props.history}
                />
              )}
            />
            <Route path="/detail" component={Detail} />
            <Route component={NotFound} />
          </Switch>
...

9) ✍<NotFound/>에 뒤로가기 버튼을 달아보자!

NotFound.js에서 useHistory를 가져오는 게 먼저!

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

버튼을 만들어주고,

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

const NotFound = (props) => {
  return (
    <div>
      <h1>주소가 올바르지 않아요!</h1>
      <button>뒤로가기</button>
    </div>
  );
};

export default NotFound;

useHistory를 사용해서 뒤로가기를 만들어요!

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

const NotFound = (props) => {
  let history = useHistory();
  return (
    <div>
      <h1>주소가 올바르지 않아요!</h1>
      <button
        onClick={() => {
          history.goBack();
        }}
      >
        뒤로가기
      </button>
    </div>
  );
};

export default NotFound;