리액트 기초반 3주차 - 1

22년 4월 5일(화)
[스파르타코딩클럽] 리액트 기초반 - 3주차

◎ Event Listener

• 사용자가 어떤 행동(=이벤트)을 하는 지 아닌 지 지켜보다가 알려주는 것
• 마우스 클릭, 터치, 마우스 오버, 키보드 누름 등이 자주 쓰임
• Class형 Component 예시

import React from "react";
import Text from "./Text";

class App extends React.Component{
  constructor(props){
    super(props);

    this.state = {};
    this.circle = React.createRef(null);
  }
  
  hoverEvent = (e) => {
    // 콘솔로 이 이벤트가 누구에게서 일어났는 지 확인할 수 있습니다.
    console.log(e.target);

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

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

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

  componentWillUnmount() {
    // 이벤트는 계속 중첩되며 쌓일 수 있으므로 컴포넌트가 사라질 때, eventListener를 제거 해주어야 한다.
    this.circle.current.removeEventListener("mouseover", this.hoverEvent);
  }

  render() {
    return (
      <div style={{width: "100vw", height:"100vh", textAlign:"center"}}>
        <Text/>
        <div style={{margin:"auto", width: "250px", height: "250px", background:"green", borderRadius:"250px"}} ref={this.circle}></div>
        
      </div>
    );
  }
}

export default App;

• 함수형 Component 예시 // useEffect() 훅을 이용

  //  React.useEffect(function,array) 훅 설명
  // 첫번째 인자는 함수, 렌더링 시 실행할 함수가 여기에 들어갑니다.
  // 두번째 인자의 []! dependency array라고 불러요. 여기 넣어준 값이 변하면 첫번째 인자인 콜백함수를 실행
  React.useEffect(() => {
    // 여기가 rendering 때 실행될 구문이 들어가는 부분
    // componentDidMount, componentDidUpdate일 때 동작하는 부분

    return () => {
        // 여기가 clean up 부분입니다.
        // componentWillUnmount 때 동작하는 부분
    };
  }, []);

--------------------------------------------------------------------
  
import React from "react";

const Text = (props) => {
    const text = React.useRef(null);
  
    React.useEffect(() => {
    	text.current.addEventListener("mouseover", hoverEvent);
    return () => {
    	text.current.removeEventListener("mouseover", hoverEvent);
    };
  }, [text]);
    return (
        <h1 ref={text}>텍스트입니다!</h1>
    )
}

export default Text;

◎ 라우팅(Routing)

• SPA(Single Page Application) : 서버에서 주는 html이 1개 뿐인 어플리케이션
  • 딱 한번만 정적자원을 받아온다.
  • 장점, 사용성이 용이: 페이지를 이동할 때마다 서버에서 주는 html로 화면을 바꾸다보면 상태 유지가 어렵고, 바뀌지 않은 부분까지 새로 불러오니까 비효율적
  • 단점: 딱 한 번 정적자원을 내려받다보니, 처음에 모든 컴포넌트를 받아온다
    -> 초기 로딩 속도가 느림
• 라우팅(Routing)
  • 브라우저 주소에 따라 다른 페이지를 보여주는 것
  • 이미 만들어진 라우팅 라이브러리로 구현 (yarn add react-router-dom@5.2.1)

◎ 리액트에서 라우팅 처리하기

• 패키지 설치 (공식 문서)
  react-router-dom의 6버전과 5버전은 사용 방법이 많이 다름,
  앞으로 5버전을 기준으로 서술

yarn add react-router-dom@5.2.1

• index.js에 BrowserRouter 적용하기

import React from 'react';
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

// 이부분이 index.html에 있는 div#root에 우리가 만든 컴포넌트를 실제로 랜더링하도록 연결해주는 부분입니다.
ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

• App.js에서 Route 적용하기

import React from "react";
import { Route, Link } from "react-router-dom";
import Home from "./Home";
import Cat from "./Cat";
import Dog from "./Dog";

function App() {
  return (
    <div className="App">
      <div>
        <Link to="/">Home으로 가기</Link>
        {/* <Link to="/cat">Cat으로 가기</Link> */}
        <Link to="/dog">Dog으로 가기</Link>
      </div>

      {/* exact 미적용시, 곂치는 주소에서는 Home이 적용됨 */}
        <Route path="/" exact>
          <Home/>
        </Route>
        <Route path="/dog">
          <Dog/>
        </Route>
      {/* URL 파라미터사용 /cat/navi 로 입력시에 이동함 */}
      {/* Cat Component에서 props로 navi라는 값을 사용 할 수 있음 */}
        <Route path="/cat/:cat_name" exact component={Cat}>
          {/* <Cat/> */}
        </Route>
    </div>
  );
}

export default App;

• URL 파라미터 사용 방법 / 해당 값을 props 안에서 찾아서 이용

// 1. prop로 넘어오는 data 사용
// 사용시에는 부모 Component에서 component={Cat} 형식으로 넘겨주어야 함
// path="/cat/:cat_name" "/cat/navi"
import React from "react";

const Cat = (props) => {
    console.log(props.match);
    return (
        <div>고양이 화면이에요.</div>
    )
}

export default Cat;

// 2. useParams 훅을 사용하여 파라미터 값 접근하기
// path="/cat/:cat_name" "/cat/navi"
import React from "react";
import { useParams } from "react-router-dom";
const Cat = (props) => {
    const cat_name = useParams();
    console.log(cat_name); // navi
  return (
      <div>고양이 화면입니다!</div>
  );
};

export default Cat;

◎ 잘못된 주소 처리

• Switch를 사용하여, 상위 조건 만족시, 그 페이지를 나타냄
  -> 따라서 위 경로가 모두 불만족하면 NotFound 페이지를 띄움

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} />
            <Route component={NotFound} />
          </Switch>
        ...
      </div>
    );