[React] 4주차 스터디 - Handling Events & react-router-dom

Event의 정의 및 Event 다루기

• Event: 특정 사건을 의미 (ex. 사용자가 버튼을 클릭한 사건)

camelCase: 첫글자는 소문자로 시작하되, 중간에 나오는 새로운 단어의 첫글자는 대문자로 표기

• Event Handler(Event Listener): 어떤 사건이 발생하면, 사건을 처리하는 역할
  • Event Handler 정의 방법
    • 함수 안에 함수로 표기
    • arrow function을 사용하여 정의
• Argument(Parameter): 함수의 주장할 내용, 함수에 전달할 데이터

• bind 사용 코드

this.handleConfirm = this.handleConfirm.bind(this);

handleConfirm() {
        this.setState((prevState) => ({
            isConfirmed: !prevState.isConfirmed,
        }));
    }

• arrow function 사용 코드

import React from "react";

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

        this.state = {
            isConfirmed: false,
        };
    }

        handleConfirm = () => {
            this.setState((prevState) => ({
                isConfirmed: !prevState.isConfirmed,
            }));
        }

    render() {
        return (
            <button
                onClick={this.handleConfirm}
                disabled={this.state.isConfirmed}
            >
                {this.state.isConfirmed ? "확인됨" : "확인하기"}
            </button>

        );
    }
}

export default ConfirmButton;

• 함수 컴포넌트로 변경한 코드

import React, { useState } from "react";

function ConfirmButton(props) {
    const [isConfirmed, setIsConfirmed] = useState(false);

    const handleConfirm = () => {
        setIsConfirmed((prevIsConfirmed) => !prevIsConfirmed);
    };

    return (
        <button onClick={handleConfirm} disabled={isConfirmed}>
            {isConfirmed ? "확인됨" : "확인하기"}
        </button>
    );
}

export default ConfirmButton;

 

react-router-dom

• 각 경로에 따라 다른 컴포넌트를 보여주도록 만듦

<BrowserRouter>
	<Routes>
		<Route index element={<MainPage />} />
		<Route path="places" element={PlacePage />} />
		<Route path="games" element={<GamePage />} />
	</Routes>
</BrowserRouter>

• BrowserRouter: 웹 브라우저에서 라우터를 사용하여 라우팅을 할 수 있게 해주는 컴포넌트
  • 웹 history를 이용해서 경로를 탐색 할 수 있게 해줌
• Routes: 여러개의 Route 컴포넌트를 children으로 가짐
• Route
  • path: 경로
  • element: 경로가 일치할 경우 이동할 컴포넌트
• useNavigate(): page 이동을 위해서 사용하는 hook

function SampleNavigate(props) {
	const navigate = useNavigate();
	
	const moveToMain = () => {
		navigate("/");
	}

	return (
		...
	);
}