TIL 2022.10.25 React 기본

프로젝트 만들기 기본적으로 필요한 파일이 설치되고 프로젝트 파일이 생성됨

npm init react-app [프로젝트이름]

설치 완료 후 생성되는 프로젝트 기본 구성

node_modules - 기본적으로필요한 자바스크립트 모듈들의 모음

manifest.json - favicon 관련 설정들이 작성되어있다.

 

React로 개발한 모든 파일은 자바스크립트로 구성이 되어있다.

최종적으로 public - index.html 파일 하나를 구동하는 방식

 

앞으로 src 폴더 안에 있는 파일들에 코드를 작성해 나간다.

 

pakage.json - 전체 프로젝트에 대한 정보를 담고 있다.

이름, 버젼, 공개여부, React가 실제 운용되기 위한 모듈이 저장된 곳

 

 

 

 

 

 

pakage.json 의 코드 구성

{
  "name": "myapp",
  "version": "0.1.0",
  "private": true,
  "dependencies": { >> React가 실제 운용환경에서 필요한 모듈들
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {  >> 명령어를 축약해서 사용할 수 있도록 설정 가능
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": { >> 자바스크립트 문법에서 에러 표시해주는 도구
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": { >> 브라우저 리스트
    "production": [ >> 배포환경
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [ >> 개발환경
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

React 시작

cd myapp
npm start

성공 메세지가 뜬 후 localhost:3000 에 접속해보면(자동으로 접속됨) 아래와 같은 화면이 뜸

npm start 를 했을 때 제일 먼저 실행되는 파일이 src 폴더의 index.js 이다.

React의 js에서 html 태그를 사용하려면 JSX 형태로 작성 해야한다.

---

Component 만들기

1. src 에 폴더 생성

2. JS 파일 생성(Home.js) 하여 컴포넌트 생성 - 요새는 주로 함수형 컴포넌트 형태로 작성한다.

// 함수형 컴포넌트
import React from "react";

function Home() {
    return <h1>Home 화면 입니다.</h1>; // JSX문법
}

export default Home;

// 화살표 함수형 컴포넌트
import React from "react";

const Home = () => {
    return <h1>Home 화면 입니다.</h1>; // JSX문법
}

export default Home;

// 클래스형 컴포넌트
import React, {Component} from "react";

class Home extends Component {
    render() {
        return <h1>Home 화면 입니다.</h1>;
    }
}

export default Home;

3. App.js 파일 코드 내용 변경

import Home from "./pages/Home";

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

export default App;

만든 컴포넌트를 import 해오고 태그 형태 처럼 그대로 삽입

** 주의 html 태그 형태로 코드를 작성하나 JSX 문법이기 때문에 기존 html 문법과는 약간 다른 부분이 있다!

div 의 class 를 정해 줄 때 html 문법대로 class 만 적어서는 정의되지않고 className 이라고 다 적어줘야함

 

React 는 싱글 페이지 어플리케이션으로 하나의 페이지 이지만 클릭을한다던지 상호작용 시 자바스크립트가 작동되면서 보여주는 것이 달리지기 때문에 클라이언트단에서 전부 작동되기 때문에 굉장히 빠르고 전체 새로고침이 되지않는 것이 특징이다.

---

라우팅 - 브라우저의 url이 바뀔 때마다 보여줄 컴포넌트를 매핑하고 그 컴포넌트를 렌더링 하는 과정

React 에서 라우팅을 하기 위해선 추가 모듈을 설치해야한다.

! 설치전 프로젝트 경로인지 확인
cd myapp

npm install react-router-dom@6  # 6버젼으로 설치

라우팅을 위해서 모듈 import 필요 우선 index.js 에 들어가서

import {BrowserRouter} from 'react-router-dom'

해당 코드 추가 앞서 설치한 react-router-dom 에서 보편적으로 쓰이는 router 인 BrowserRouter 를 import 해오고

<BrowserRouter> 태그를 추가하고 그안에 <App /> 을 집어넣어 준다

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </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();

app.js 로 넘어와서 라우팅 코드 작성

react-router-dom 에서 Routes, Route, Link 를 import 해옴

<Link to="/"> 는 html에서 <a href="/"> 와 동일한 것

<Routes> 태그 안에 여러개의 <Route> 태그를 만들어 줄 수 있음

Link to="/" 의 url과 Route path="/" 에서의 일치하는 url을 찾아서 즉 매핑된 url을 찾아서 해당 위치의 컴포넌트만 교체

import React from "react";
import {Routes, Route, Link} from "react-router-dom";

import Home from "./pages/Home";
import About from "./pages/About";

function App() {
  return (
    <div className="App">
      <nav>
      <Link to="/">Home</Link> | <Link to="/about">About</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />}/>
        <Route path="/about" element={<About />}/>
      </Routes>
    </div>
  );
}

export default App;

---

React에서 동적인 값들을 state 라고 부르며 이를 처리 하기 위해 useState 함수를 사용해야한다.

* 'react' 에서 추가적으로 {useState} 함수를 import 해와야하며

** const [기본값담을 변수, setter함수] = useState(기본값);

1. onClick 에서 C 반드시 대문자 

2. {} 중괄호로 함수 및 변수 호출 가능

import React, {useState} from "react";

const Counter = () => {
    const [num, setNumber] = useState(0);
    // num 은 userState에서 지정한 기본값 0 (num = 0)
    // setNumber는 앞의 num 을 바꿀 수 있는 setter 함수

    const increase = () => {
        setNumber(num+1) // num = num + 1
    }

    const decrease = () => {
        setNumber(num-1) // num = num - 1
    }
    return (
        <div>
            <button onClick={increase}>+1</button>
            <button onClick={decrease}>-1</button>
            <p>{num}</p>
        </div>
    )
}

export default Counter

---

input  받고 처리

기본적으로 하나의 값에 대한 input 처리 작업

input 의 value 와 매핑을 해주어야한다. 

입력한 값을 <p> 태그안에 출력해줌

import React, {useState} from 'react';

const Input = () => {
    const [txtValue, setTextValue] = useState("");

    const change = (e) => {
        setTextValue(e.target.value)
    };
    return (
        <div>
            <input type="text" value={txtValue} onChange={change} />
            <br />
            <p>{txtValue}</p>
        </div>
    );
};

export default Input

여러개의 input 값을 입력 받을 경우

import React, {useState} from 'react';

const Input2 = () => {
    const [inputs, setInputs] = useState({
        name: "",
        email: "",
        tel: ""
    });
    // 각각의 값들을 따로 선언을 해주면 아래쪽에서 편하게 쓸 수 있다.
    const {name, email, tel} = inputs;

    const change = (e) => {
        const value = e.target.value;
        const id = e.target.id;
        setInputs({
            ...inputs, // 깊은 복사
            [id]: value
        })
    };
    return (
        <div>
            <div>
                <label>이름</label>
                <input type="text" id="name" value={name} onChange={change}/>
            </div>
            <div>
                <label>이메일</label>
                <input type="email" id="email" value={email} onChange={change} />
            </div>
            <div>
                <label>전화번호</label>
                <input type="tel" id="tel" value={tel} onChange={change} />
            </div>
            <br />
            <p>이름: {name}</p>
            <p>이메일: {email}</p>
            <p>전화번호: {tel}</p>
        </div>
    );
};

export default Input2

배열 데이터를 처리하기

import React from 'react';

// <tbody> 안에 값을 출력하는 컴포넌트
const User = ({userData}) => {
    return (
        <tr>
            <td>{userData.name}</td>
            <td>{userData.email}</td>
        </tr>
    )
}

const UserList = () => {
    const users = [
        {email: 'ub@gmail.com',name: '유비',},
        {email: 'ub2@gmail.com',name: '유비2',},
        {email: 'ub3@gmail.com',name: '유비3',},
        {email: 'ub4@gmail.com',name: '유비4',},
    ];
    return (
        <table>
            <thead>
                <tr>
                    <th>이름</th>
                    <th>이메일</th>
                </tr>
            </thead>
            <tbody>
                {users.map(user => <User userData={user} />)}
                // map 함수를 이용해서 users의 크기만큼 작동되도록 하게하며
                // property 이름을 userData로 지정해서 users의 각각의 값들을 전달{user}
                // return 받은 값을 바로 return 하여 tbody 구성
            </tbody>
        </table>
    )
}

export default UserList