들쮜의 개발자일지

이제 Router를 사용해보도록 하겠습니다.

Component를 갈아껴주면서 SPA를 MPA처럼 보이게 하려면 Router가 필수적이죠

Home, About 컴포넌트를 만들어 이리저리 이동해보도록 하겠습니다.

npm install react-router-dom 을 다운로드 받습니다.

react-router-dom 6버전이 다운로드 받아졌네요

react-router-dom은 Router 안에 Routes 컴포넌트안의 Route들도 페이지를 변경합니다.

바로 코드를 보시겠습니다.

import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';

import Home from './Home';
import About from './About';
import Navigation from './Navigation'
function App() {
  return (
    <Router>
      <Navigation />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

export default App;

react-router-dom 의 BorwserRouter에서 Router와 Route그리고 Routes를 꺼냅니다.

Router는 컴포넌트가 갈아껴질 컨테이너고, Routes 윗 부분은 고정, 안은 갈아껴지는 컴포넌트들이 들어가면 됩니다.

이제 Home 컴포넌트와 About컴포넌트 Navigation 컴포넌트를 직접 만들어 넣어보세요

path와 함께 페이지가 슉 슉 변하는 것을 확인할 수 있습니다.

React에서 값들을 동적으로 다루기 위해서는 state를 이용해야합니다.

무슨 소리냐 하면, Input 태그를 만들어서 그냥 값을 입력하려고 해도 그 값이 state가 아니라면 실시간으로 변수에 읽어들일 수 없다는 걸 의미합니다.

input태그를 다루기 위해선 onChange 이벤트를 이용해서 setState를 실행시켜 state값에 실시간으로 들어오는 값들을 바꿔주어야 합니다.

FormExample.js를 하나 만들어보도록 하겠습니다.

import React from 'react'
class FormExample extends React.Component{

    constructor(){
        super();
        this.state = {
            name:'',
            email:'',
        }
    }

    render(){
        return (
            <form onSubmit={this.handleSubmit}>
                <label>
                    Name :
                    <input type="text" name="name" value={this.state.name} />
                </label>
                <br />
                <label>
                    Email : 
                    <input type="email" name="email" value={this.state.email} />
                    <br />
                    <button type="submit">Submit</button>
                </label>
            </form>
        )
    }
}

export default FormExample

이렇게 만들고 input값에 아무리 값을 넣어도 state에 값이 실시간으로 들어가질 않습니다.

input태그가 작동하질 않으니 onChange를 이용해서 state값을 실시간으로 바꿔주는 handleChange 함수를 만들어보겠습니다.

  handleChange(event) {
        this.setState({ [event.target.name]: event.target.value });
      }

이 함수를 추가해주고

 <label>
                    Name :
                    <input type="text" name="name" value={this.state.name} onChange={this.handleChange}/>
                </label>
                <br />
                <label>
                    Email : 
                    <input type="email" name="email" value={this.state.email} onChange={this.handleChange}/>
                    <br />
                    <button type="submit">Submit</button>
                </label>

이렇게 onChange 이벤트에 해당 함수를 넣어주면 되겠습니다.

하지만 이렇게 하면 오류가 발생합니다.

왜일까요?

hnadleChange안에서 사용한 this는 누가 될까요? 이벤트가 일어난 노드가 대상이 됩니다.

대상 노드에겐 당연히 setState가 존재하질 않죠. 그렇기 때문에 undefined 에러가 납니다.

이 에러를 해결하기 위한 방법은 2가지가 있는데,

하나는 해당 함수의 this의 바인딩을 바꿔주는 것,

두번째는 함수를 화살표 함수로 바꿔주는 것입니다.

간단하게 화살표 함수로 바꿔주도록 하겠습니다.

import React from 'react'
class FormExample extends React.Component{

    constructor(){
        super();
        this.state = {
            name:'',
            email:'',
        }
    }
    handleChange = (event) => {
        this.setState({ [event.target.name]: event.target.value });
      }
  

    render(){
        return (
            <form onSubmit={this.handleSubmit}>
                <label>
                    Name :
                    <input type="text" name="name" value={this.state.name} onChange={this.handleChange}/>
                </label>
                <br />
                <label>
                    Email : 
                    <input type="email" name="email" value={this.state.email} onChange={this.handleChange}/>
                    <br />
                    <button type="submit">Submit</button>
                </label>
            </form>
        )
    }
}

export default FormExample

자 이렇게 해주면 state값과 연동되는 input을 만들었습니다.

내친김에 handleSubmit도 만들어보도록 하죠

import React from 'react'
class FormExample extends React.Component{

    constructor(){
        super();
        this.state = {
            name:'',
            email:'',
        }
    }
    handleChange = (event) => {
        this.setState({ [event.target.name]: event.target.value });
      }

    handleSubmit = (event) =>{
        event.preventDefault();
        const {name, email} = this.state;
        console.log('Name : ', name)
        console.log('Email : ', email)

    }
  

    render(){
        return (
            <form onSubmit={this.handleSubmit}>
                <label>
                    Name :
                    <input type="text" name="name" value={this.state.name} onChange={this.handleChange}/>
                </label>
                <br />
                <label>
                    Email : 
                    <input type="email" name="email" value={this.state.email} onChange={this.handleChange}/>
                    <br />
                    <button type="submit">Submit</button>
                </label>
            </form>
        )
    }
}

export default FormExample

handleSubmit 함수를 만들어 name과 email을 console에 찍어보았습니다.

이제  input태그 안의 값들을 수정하고 주고받을 수 있겠군요!!

1. node와 npm을 다운로드 합니다.

node와 npm은 리액트 프로젝트를 하기 위한 기초 단계입니다.

2. npx create-react-app app이름

터미널을 열어 해당 커맨드를 입력하여 react-app을 다운로드 만듭니다.

vue를 할 때 처럼 리액트도 마찬가지로 npx create-react-app 을 입력만 해주면 간단하게 프로젝트가 만들어집니다.

vue는 App 컴포넌트 아래 다양한 컴포넌트들을 추가하면서 프로젝트를 만들어나갔는데요

react도 비슷한 구조입니다.

일단

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// 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();

root는 reactDOM 객체의 루트가 되고 그곳에 App컴포넌트들 rendering한다고 되어있습니다. root는 id가 root인 div인데요

index.html에 보면 id가 root인 div가 있습니다. 이 곳에 render를 해주고, 컴포넌트들을 갈아껴주면서 앱이 작동하는 구조라고 보면 되겠습니다.

React 프로젝트를 하기 위해선 Hello World를 얼른 찍어봐야할텐데요

빠르게 컴포넌트를 하나 만들어서 띄어보도록 하겠습니다.

src 폴더에 Hello.js를 하나 만들고 다음과 같이 적어줍니다.

import React from 'react';

class Hello extends React.Component {
  render() {
    return <h2>Hello, from a class component!</h2>;
  }
}

export default Hello;

이게 기본 구조라고 생각하시면 됩니다. React를 import해서 Hello 클래스에 React.Component를 상속받아줍니다.

이제 이 클래스는 리액트 컴포넌트가 되었습니다.

render 함수에 반환 값으로 태그를 작성해줍니다.

그리고 다른 컴포넌트에서 가져다 써야하니 export default 값을 넣어줍니다.

이제 이 컴포넌트를 App에서 불러줍시다.

import logo from './logo.svg';
import './App.css';
import Hello from './Hello';

function App() {
  return (
    <div className="App">
      
    </div>
  );
}

export default App;

리액트의 컴포넌트에서는 class를 className으로 정의해줍니다. App에 Hello를 입포트해서 넣어줍시다.

그리고 해당 리액트 폴더로 이동해서 npm start를 해주면?

정상적으로 값들이 나오는 것을 확인할 수 있습니다.

리액트로의 발걸음을 드디어 뗐습니다.