마카로닉스

1904 No

React 영단어장 개발 프로젝트 (초보자를 위한 리액트 - 코딩악마) -1 , 리액트설치, 컴포넌트, JSX ,리액트 css 적용법,이벤트 처리,state, useState, props,더미 데이터 구현, map() 반복문,라우터 구현 react-router-dom

2022-08-27 17:21:38 By 라이트 0 251 댓글수 4 포스트 하기

4월 2024
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

코딩앙마

강의 목록 : https://www.youtube.com/playlist?list=PLZKTXPmaJk8J_fHAzPLH8CJ_HO_M33e7-

vscode 확장 패키지 추가

1. - Auto Import - ES6, TS, JSX, TSX

2. - Reactjs code snippets

3. - ESLint

4. - Prettier - Code formatter

Visual Studio Code 폴더/파일 아이콘 변경하기

리액트 프로젝트 생성

npx create-react-app 경로

예) npx create-react-app E:\react-app2

1.강의 소개

2.설치(create-react-app)

설치

#npx create-react-app voca

시작

#npm start

3.컴포넌트, JSX

App.js

import './App.css';

function App() {
  const name = "Tom";
  const naver = {
    name: "네이버",
    url: "https://naver.com",
  }
  return (
    <div className="App">
      <h1 style={{
        color: "#f0f",
        backgroundColor: "green"
      }}>
        Hello, {name}.  <p>{2 + 3}</p>

      </h1>
      <a href={naver.url}>{naver.name}</a>
    </div>
  );
}

export default App;

4.첫 컴포넌트 만들기

Hello.js

import React from 'react';
import World from './World';

const Hello = () => {
    return (
        <div>
            <h1>Hello</h1>
            <World />
            <World />
        </div>
    );

};

export default Hello;

Welcome.js

import React from 'react';

const Welcome = () => {
    return <h1>Welcome</h1>;
};

export default Welcome;

World.js

import React from 'react';


const World = () => {
    return <h3>World!</h3>
};

export default World;

App.js

import './App.css';
import Hello from './component/Hello';
import Welcome from './component/Welcome';

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

export default App;

5.CSS 작성법(module css)

1. 직접 CSS 작성

            <h1
                style={
                    {
                        color: '#f00',
                        borderRight: '2px solid #000',
                        marginBottom: "30px",
                        opacity: 1
                    }
                }
            >Hello</h1>

App.css

.box{
  width: 100px;
  height: 100px;
  background-color: red;
}

2. index.CSS 에 전체 프로젝트 CSS 작성

3. 모듈로 개별적인 컴포넌트 css 적용

1) Hello.module.css = > Hello 컴포넌트 이름과 동일 + module.css

2) 임포트 import styles from "./Hello.module.css";

3) <div className={styles.box} >Hello</div>

Hello.module.css

.box{
    width: 200px;
    height: 50px;
    background-color: blue;
}

Hello.js

import React from 'react';
import styles from "./Hello.module.css";

const Hello = () => {
    return (
        <div>
            <h1
                style={
                    {
                        color: '#f00',
                        borderRight: '2px solid #000',
                        marginBottom: "30px",
                        opacity: 1
                    }
                }
            >Hello</h1>

            <div className={styles.box} >Hello</div>

        </div>
    );

};

export default Hello;

App.module.css

.box{
  width: 100px;
  height: 100px;
  background-color: red;
}

App.js

import './App.css';
import Hello from './component/Hello';
import styles from './App.module.css';

function App() {
  return (
    <div className="App">
      <Hello />
      <div className={styles.box} >App</div>
    </div>
  );
}

export default App;

6.이벤트 처리(Handling Events)

Hello.js

const Hello = () => {

    function showName() {
        console.log("Mike");
    }

    function showAge(age) {
        console.log(age);
    }

    function showText(txt) {
        console.log(txt);
    }

    return (
        <div>
            <h1>Hello</h1>
            <button onClick={showName}>Show name</button>
            <button onClick={() => {
                showAge(30);
            }} >Show age</button>
            <br /> <br />
            <input type="text" onChange={(e) => {
                const txt = e.target.value;
                showText(txt);
            }} />
        </div >
    );

};

export default Hello;

7.state, useState

Hello.js

import { useState } from "react";

const Hello = () => {
    //let name = "Mike";
    const [name, setName] = useState("Mike");

    // function changeName() {
    //     const newName = name === "Mike" ? "Jane" : "Mike";
    //     //document.getElementById("name").innerText = newName;
    //     setName(newName);
    // }

    return (
        <div>
            <h1>state</h1>
            <h2 id="name">{name}</h2>
            <button onClick={() => {
                setName(name === "Mike" ? "Jane" : "Mike");
            }}>Change</button>
        </div >
    );

};

export default Hello;

App.js

import './App.css';
import Hello from './component/Hello';

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

export default App;

8.props

UserName.js

const UserName = ({ name }) => {
    return (
        <p> Hello {name}</p>
    );
};

export default UserName;

Hello.js

import { useState } from "react";
import UserName from "./UserName";

const Hello = ({ age }) => {
    //console.log(props);
    const [name, setName] = useState("Mike");
    //const [age, setAge] = useState(props.age);
    const msg = age > 19 ? "성인 입니다." : "미성연자 입니다.";

    return (
        <div>
            <h1>state</h1>
            <h2 id="name">
                {name} ({age})  : {msg}
            </h2>

            <UserName name={name} />

            <button onClick={() => {
                setName(name === "Mike" ? "Jane" : "Mike");
                //setAge(age + 1);
            }}>Change</button>
        </div >
    );

};

export default Hello;

App.js

import './App.css';
import Hello from './component/Hello';

function App() {
  return (
    <div className="App">
      <h3>props : properties</h3>
      <Hello age={10} />
      <Hello age={20} />
      <Hello age={30} />
    </div>
  );
}

export default App;

9.더미 데이터 구현, map() 반복문

더미데이터 => data.json

DayList.js

import dummy from "../db/data.json";


const DayList = () => {

    return (
        <ul className="list_day">
            {dummy.days.map(day => (
                <li key={day.id}>
                    Day {day.day}
                </li>
            ))}

        </ul>
    );
};

export default DayList;

Day.js

import dummy from '../db/data.json';

const Day = () => {
    const day = 1;
    const wordList = dummy.words.filter(word => {
        return word.day === day
    });

    return (
        <>
            <table>
                <tbody>
                    {wordList.map(word => (
                        <tr key={word.id}>
                            <td>{word.eng}</td>
                            <td>{word.kor}</td>
                        </tr>
                    ))}
                </tbody>
            </table>
        </>
    );
};

export default Day;

App.js

import Day from './component/Day';
import DayList from './component/DayList';
import Header from './component/Header';

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

export default App;

10. 라우터 구현 react-router-dom

라우터 설치

$ yarn add react-router-dom

App.js

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Day from './component/Day';
import DayList from './component/DayList';
import EmptyPage from './component/EmptyPage';
import Header from './component/Header';

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <Header />
        <Routes>
          <Route path="/" element={<DayList />} />
          <Route path="/day/:day" element={<Day />} />
          <Route path={"*"} element={<EmptyPage />} />
        </Routes>

      </div>
    </BrowserRouter >
  );
}

export default App;

DayList.js

import dummy from "../db/data.json";
import { Link } from 'react-router-dom';

const DayList = () => {

    return (
        <ul className="list_day">
            {dummy.days.map(day => (
                <li key={day.id}>
                    <Link to={`/day/${day.day}`}>Day {day.day}</Link>
                </li>
            ))
            }

        </ul >
    );
};

export default DayList;

Day.js

import dummy from '../db/data.json';
import { useLocation, useParams } from 'react-router-dom';
const Day = () => {
    const location = useLocation();
    const params = useParams();
    console.log("params ", params, "location ", location);

    const { day } = useParams();
    console.log("day :", day);
    const wordList = dummy.words.filter(word => {
        return Number(word.day) === Number(day)
    });

    return (
        <>
            <h2>Day {day}</h2>
            <table>
                <tbody>
                    {wordList.map(word => (
                        <tr key={word.id}>
                            <td>{word.eng}</td>
                            <td>{word.kor}</td>
                        </tr>
                    ))}
                </tbody>
            </table>
        </>
    );
};

export default Day;

EmptyPage.js

import { Link } from 'react-router-dom';

const EmptyPage = () => {
    return (
        <div style={{
            textAlign: "center",
            marginTop: "100px"
        }}>
            <h2>
                잘못된 접근입니다.
            </h2>
            <Link to="/">돌아가기</Link>
        </div>
    );
};

export default EmptyPage;

소스 : https://github.com/braverokmc79/React-for-beginners