[React] React와 express.js를 활용한 게시판 만들기(1)

inez 2024. 1. 20. 08:21

2024. 1. 20. 08:21

확장 : Reactjs code snippets 설치

* {
    margin: 0;
    text-align: center;
  }
  
  .header {
    background-color: lightpink;
    height: 50px;
    padding: 10px;
  }
  
  .header a {
    margin: 10px;
  }
  
  .comp a {
    margin: 10px;
  }
  
  .home, .comp{
    background-color: lightskyblue;
    height: 400px;
    padding: 10px;
  }
  
  
  .footer {
    background-color: lightseagreen;
    height: 100px;
    padding: 10px;
  }

  button, hr {
    margin: 10px;
  }

import './App.css';
import Home from './component/Home';
import Header from './component/Header';
import Footer from './component/Footer';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Comp1 from './component/Comp1';
import Comp2 from './component/Comp2';
import Comp3 from './component/Comp3';
import Param1 from './component/Param1';
import Param2 from './component/Param2';

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Header />      

        <Routes>
          <Route path="/" element={<Home />}/>
          <Route path="/comp1" element={<Comp1 />}/>
          <Route path="/comp2" element={<Comp2 />}/>
          <Route path="/comp3" element={<Comp3 />}/>
          <Route path="/param/:id" element={<Param1 />}/>
          <Route path="/param"     element={<Param2 />}/>
        </Routes>
           
      </BrowserRouter>
      <Footer />      
    </div>
  );
}

export default App;

import React from 'react';

const Start = () => {

    // 해당 영역에서는 이와 같이 주석을 사용할 수 있습니다.
    const name = "도깨비";

    // JSX(JavaScriptXML) : 코드 간결, 가독성 좋음
    // JSX를 사용하는 주요 이유 중 하나는 JavaScript 함수 내에서 HTML과 유사한 문법을 사용할 수 있게 함으로써, 
    // 사용자 인터페이스(UI)를 더 직관적이고 선언적으로 구성

    const style = {
        color : "white",
        backgroundColor : "black",
        fontSize : "48px",
        fontWeight : "bold",
        padding : "16px"
    }

    return (
        <div className='start'>
            <h2>이 곳은 Start.jsx 영역입니다.</h2>
            <h2>Start.jsx 내용이 출력됩니다.</h2>

            {/* 주석은 아래와 같이 작성합니다. */}
            {/* {React.createElement('h2', null, `${name}님 반갑습니다.`)} */}
            <h2 style={style}>{name}님 반갑습니다.</h2>
        </div>
    );
};

export default Start;

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

const Header = () => {

    return (
        <div className="header">
            {/* <h2>Header.jsx</h2> */}
            {/* a태그의 href 대신 Link태그의 to 사용 */}

            <Link to="/">Home</Link>
            <Link to="/comp1">Comp1</Link>
            <Link to="/comp2">Comp2</Link>
            <Link to="/comp3">Comp3</Link>

        </div>
    );
}

export default Header;

import React from 'react';
import Logo from '../image/PenLogo.png';

const Home = () => {

    const style1 = { width:"400px" };
    

    return (
        <div className="home">
            <h2>Home.jsx</h2>
            <img src={Logo} style={style1} alt="로고"></img>
        </div>
    );
}

export default Home;

import React from 'react';

const Footer = () => {
    return (
        <div className='footer'>
            <h3>COPYRIGHT © 2024 BY ICIA ALL RIGHTS RESERVED.</h3>
            <h2>프로젝트 기반의 리액트 기초 보수교육</h2>
            <h4>한국기술교육대학교 능력개발교육원 & 인천일보아카데미</h4>
        </div>
    );
};

export default Footer;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>

<script>
    // ES6 문법
    // ES란, ECMAScript의 약자이며 자바스크립트의 표준, 규격을 나타내는 용어

    // [1] let, const 키워드
    var num1 = 10;
    var num1 = 20;
    num1 = 30;

    let num2 = 40;
    // let num2 = 50;
    num2 = 60;

    const num3 = 70;
    // const num3 = 80;
    // num3= 90;

    console.log(num1, num2, num3);

    // [2] 템플릿 리터럴
    // 사용법은 ` ` (back tick)으로 가능하다.
    // { } 중괄호 앞에 달러 표시를 통해 자바스크립트 표현식 사용이 가능하다.
    // console.log('num1 : ' + num1 + ", num2 : " + num2 + ", num3 : " + num3);
    console.log(`num1 : ${num1}, num2 : ${num2}, num3 : ${num3}`);

    // [3] 화살표 함수
    let name = '황인철';

    function myFunc(name) {
        return `이름 : ${name}`;
    }

    const myFunc1 = (name) => {
        return `이름 : ${name}`;
    }

    const myFunc2 = (name) => `이름 : ${name}`;

    console.log(myFunc(name));  // 이름 : 황인철
    console.log(myFunc1(name)); // 이름 : 황인철
    console.log(myFunc2(name)); // 이름 : 황인철

    // [4] 구조 분해 할당
    const student = {
        name1: "황인철",
        age: 30,
        addr: "인천"
    }

    const { name1, age, addr } = student;
    console.log(`name1 : ${name1}, age : ${age}, addr : ${addr}`);

    // [5] Spread 연산자
    // Array
    const arr1 = [1, 2, 3, 4, 5];
    const arr2 = [...arr1, 6, 7, 8, 9];

    console.log(arr2); // [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

    // String
    const str1 = 'icia react';
    const str2 = [...str1];
    console.log(str2); // [ "i", "c", "i", "a", " ", "r", "e", "a", "c", "t" ]

</script>

</html>

import React from 'react';
import { student, students } from '../data/data';
import Student from './Student';

const Comp1 = () => {
    return (
        <div className="comp1 comp">
            {/* <h2>Comp1.jsx</h2> */}
            {/* <p>이름 : {student.name}, 나이 : {student.age}, 주소 : {student.addr}</p> */}

            <Student stu={student}/>

            <hr />
            
            {/* Student 컴포넌트와 students 배열을 사용해서 출력하기 */}
            {students.map( students => (
                <Student stu = {students} />
            ))}

        </div>
    );
};

export default Comp1;

// Student.jsx 파일에서 rsc

const Student = (props) => {
    // props : (prop)ertie(s)
    // 부모(상위) 컴포넌트에서 자식(하위)컴포넌트로 파라미터를 전달
    // es6의 분해할당을 통해 props로 받은 object stu의 값을 각각 name, age, addr 변수에 할당
    const { name , age, addr } = props.stu;
    
    return (
        <div className="student">
            <p>이름 : {name} , 나이 : {age} , 주소 : {addr}</p>
        </div>
    );
};

export default Student;

import React, { useState } from 'react';

const Comp2 = () => {
    
    /*
        state : 일반 자바 객체로 component에서 변할 수 있는 값

        lifecycle(생명주기)

        마운트 : 컴포넌트가 생성되고 브라우저에 출력될 때
        constructor : 컴포넌트가 새로 만들어 질 때마다 호출 되는 클래스 생성자 메소드
        render : 랜더링 메소드
        componentDidMount : 처음 랜더링 될 때 호출

        업데이트 : props나 state가 바뀔 때 부모컴포넌트가 재랜더링 될때
        shouldComponentUpdate : props나 state가 변경됐을 때 재랜더링을 할지 결정하는 메소드
        render : 재랜더링 
        componentDidUpdate : 컴포넌트의 업데이트 작업이 끝난 후 호출 

        언마운트 : 마운트의 반대, 컴포넌트가 제거 될 때
        componentWillUnmount : 컴포넌트가 브라우저에서 사라지기 전에 호출하는 메소드

        hooks : 함수형 컴포넌트에서 리액트의 state와
        생명주기 기능을 연동(hook) 할 수 있게 해주는 함수

        useState()
        const [ 변수명, 함수명 ] = useState(초기값);
    */
    
    // 버튼을 눌렀을 때 state값이 변하도록
    const [param1 , setParam1] = useState("초기값");

    const changeParam1 = () => {
        setParam1("안녕하세요");
    }

    // 버튼을 눌렀을 때 count가 증가 혹은 감소하도록
    const [count, setCount] = useState(100);

    const onIncrease = () => {
        setCount(count + 1);
    }

    const onDecrease = () => {
        setCount(count - 1);
    }

    // 값을 입력했을 경우 입력한 값이 출력되도록
    const [param2 , setParam2] = useState("");

    const textInput = (e) => {
        console.log(e.target.value);
        console.log(e.target.name);

        const { name, value } = e.target;
        console.log(`name : ${name}, value : ${value}`);

        setParam2(value);

    }

    // 버튼을 클릭했을 경우 컬러가 바뀌도록
    const [color, setColor] = useState("red");
    
    return (
        <div className='comp2 comp'>
            <p>{param1}</p>
            <button onClick={changeParam1}>버튼</button>
            <br /><hr />

            <p>count : {count}</p>
            <button onClick={onIncrease}>증가</button>
            <button onClick={onDecrease}>감소</button>
            <br /><hr />

            <p>입력값 : {param2}</p>
            <input type="text" name="param2" onChange={textInput}/>
            <br /><hr />

            <p style={{background:color, color:"white", fontSize : "30px"}}>안녕하세요.</p>
            <button onClick={()=>setColor("red")}>빨강</button>
            <button onClick={()=>setColor("blue")}>파랑</button>
            <button onClick={()=>setColor("green")}>초록</button>



        </div>
    );
};

export default Comp2;

import React, { useState } from 'react';
import { Link } from "react-router-dom";
import { students } from '../data/data';


const Comp3 = () => {

    const [id , setId] = useState();
    const [page , setPage] = useState();


    // path variable : "/param/12"
    // queryString : "/param?id=6&page=2"

    /*
        <input type="text" name="id" onChange={(e)=>{setId(e.target.value)}} placeholder="id입력"/><br/>
        <input type="text" name="page" onChange={(e)=>{setPage(e.target.value)}} placeholder="page입력"/><br/>
        <Link to={{
            pathname : "/param",
            search : `?id=${id}&page=${page}`
        }}>버튼</Link>
    */

    return (
        <div className="comp3 comp">
            <Link to={
                { pathname : "/param/20" }
            }>
                path variable
            </Link>

            <hr />

            {students.map(s => (
                <Link to={
                    {
                        pathname : `/param/${s.name}`
                    }
                }>{s.name}</Link>
            ))}

            <hr />

            <Link to="/param?id=6&page=2">param전송</Link>
            <Link to={{
                pathname : "/param",
                search : "?id=6&page=20&name=icia"
            }}>param전송(query String)</Link>

            {/* id값을 입력 */}
            {/* page값을 입력 */}
            {/* 버튼 클릭 => Param2 : id값 page값 전송 */}

            <hr />

            <input type="text" name="id" onChange={(e)=>{setId(e.target.value)}} placeholder="id입력"/><br/>
            <input type="text" name="page" onChange={(e)=>{setPage(e.target.value)}} placeholder="page입력"/><br/>
            <Link to={{
                pathname : "/param",
                search : `?id=${id}&page=${page}`
            }}>입력</Link>
        </div>
    );
}

export default Comp3;

import React from 'react';
import { useParams } from 'react-router-dom';


const Param1 = () => {

    const { id } = useParams();

    return (
        <div className='param1 comp'>
            <h2>요청 id : {id}</h2>
        </div>
    );
};

export default Param1;

import React from 'react';
import { useSearchParams } from 'react-router-dom';

const Param2 = () => {

    // /param?id=6&page=2
    const [params] = useSearchParams();
    console.log(params.size);

    const search = [...params];
    console.log(search);

    return (
        <div className='param2 comp'>
            {search.map(s => (
                <p>{s[0]} : {s[1]}</p>
            ))}
        </div>
    );
};

export default Param2;

'React' 카테고리의 다른 글

[React] Quick Start (0)	2024.01.23
[React] React와 express.js를 활용한 게시판 만들기(2) (0)	2024.01.21
[React] Props에 대한 설명과 예시 (0)	2024.01.19
[React] Component 생명주기(LifeCycle)와 Hooks (0)	2024.01.18
[React] 프로젝트 생성 및 설정 (0)	2024.01.18

inez

[React] React와 express.js를 활용한 게시판 만들기(1)

'React' 카테고리의 다른 글

+ Recent posts

티스토리툴바