React 기초(input, param)- AWS 풀스택 과정 38일차

Front-end/React

React 기초(input, param)- AWS 풀스택 과정 38일차

awspspgh 2024. 9. 5. 18:22

목차
1.	input
2.	param
2.	느낀 점

1. input

my-app 폴더 생성 > npx create-react-app my-app > App.js의 header부분을 삭제

      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>

위의 코드를 삭제한 후 > cd my-app > npm i react-router-dom

▶입력

- App.js

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

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/:name' element={<Param1 />} />
          <Route path="/param" element={<Param2 />} />
          <Route path="/param3/:id/:pw" element={<Param3 />} />
        </Routes>
      <Footer />
      </BrowserRouter>
    </div>
  );
}

export default App;

- comp.css

=> import './comp.css'

.comp{
    margin: 50px;
}

- data.js

export const student ={
    name : "홍길순",
    age : 23,
    addr : "seoul"
}

export const students = [
    {
        name : "A",
        age : 21,
        addr : "seoul"
    },
    {
        name : "B",
        age : 22,
        addr : "seoul"
    },
    {
        name : "C",
        age : 23,
        addr : "seoul"
    }
]

export const friends = [
    {
        name : 'kim',
        phone : '010-1111-1111',
        addr : 'seoul',
        job : 'teacher'
    },
    {
        name : 'lee',
        phone : '010-2222-2222',
        addr : 'incheon',
        job : 'developer'
    },
    {
        name : 'park',
        phone : '010-3333-3333',
        addr : 'busan',
        job : 'teacher'
    },
    {
        name : 'choi',
        phone : '010-4444-4444',
        addr : 'seoul',
        job : 'developer'
    },
    {
        name : 'hong',
        phone : '010-5555-5555',
        addr : 'seoul',
        job : 'teacher'
    },
]

- Header.jsx

=> 터미널에서 npm i react-router-dom 입력(설치)

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

const Header = () => {
    return (
        <div className='header'>
            <div>header</div>
            <Link to = '/'>Home</Link>
            <Link to = '/comp1'>comp1</Link>
            <Link to = '/comp2'>comp2</Link>
            <Link to = '/comp3'>comp3</Link>
        </div>
    );
};

export default Header;

- Home.jsx

import React from 'react';

const Home = () => {
    return (
        <div className='home'>
            <div>Home 영역입니다.</div>
        </div>
    );
};

export default Home;

- Footer.jsx

import React from 'react';

const Footer = () => {
    return (
        <div className='footer'>
            <div>footer</div>
        </div>
    );
};

export default Footer;

- Comp1.jsx

=> 외부에 있는 데이터, 정보들을 이용할 때에는 import { 이름 } from 위치 이렇게 적어야함

import React from 'react';
import { friends } from '../data/data';
import Table from 'react-bootstrap/Table';
import './comp.css';

const Comp1 = () => {
    return (
        <div className='comp1 comp' style={{margin : '0 auto', width : '500px'}}>
            <div>친구 목록 리스트</div>
            {/* 친구 목록 표시 */}
            <div>
            <Table striped bordered hover style={{width : '100%'}}>
                <thead>
                <tr>
                    <th>name</th>
                    <th>phone</th>
                    <th>address</th>
                    <th>job</th>
                </tr>
                </thead>
                <tbody>
                {friends.map(s => (
                    <tr>
                        <td>{s.name}</td>
                        <td>{s.phone}</td>
                        <td>{s.addr}</td>
                        <td>{s.job}</td>
                    </tr>
                ))
                }
                </tbody>
            </Table>
            </div>
        </div>
    );
};
export default Comp1;

- Comp2.jsx

import React from 'react';
import './comp.css';
import Counter from './Counter';
import Input from './Input';
import Color from './Color';
import Input2 from './Input2';

const comp2 = () => {

    // Count 예제
    // Hook : 기능을 할 수 있게 해주는 역할
    // useState() : 상태변화

    return (
        <div className='comp2 comp'>
           <div>comp2 영역입니다.</div>
           <Counter />
           <hr />
           <Input />
           <hr />
           <Color />
           <hr />
           <Input2 />
        </div>
    );
};

export default comp2;

- Comp3.jsx

import React from 'react';
import './comp.css';
import { Link } from 'react-router-dom';

const comp3 = () => {
    // 다른 컴포넌트로 데이터를 넘길 때 props 또는
    // path를 사용하여 데이터를 넘길 수 있음
    // (1) path variable : /comp3/12
    // (2) queryString : /comp3?id=12&name=12
    return (
        <div className='comp3 comp'>
            <div>comp3 영역입니다.</div>

            <Link to = '/param/15/kim'>path variable</Link>
            <br /><br /><br /><br />

            <Link to = {{pathname:'/param/15/kim'}}>path variable</Link>
            <br /><br /><br /><br />

            <Link to= '/param?num=1&page=15'>queryString</Link>
            <br /><br /><br /><br />

            <Link to = {
                {
                    pathname: '/param',
                    search: '?num=1&page=15'   
                }
            }>queryString params</Link>
            <br /><br /><br /><br />

            {/* id/pw 입력받고 전송버튼을 클릭하여 Param3.jsx에 출력 */}
            {/* <input type="text" name='id'/>
            <input type="text" name='pw'/>

            <Link to = '/param3'>id/pw 전송</Link> */}

        </div>
    );
};

export default comp3;

- Input.jsx

=> const는 값을 변경할 수 없음 > useState를 이용해서 초기값을 ""(빈 값)으로 설정하여 언제든지 바꿀 수 있도록 함 > input의 값을 setInputValue를 통해 inputValue의 기존 값을 버리고 새로운 값으로 저장함 > 값의 변경을 입력할 때마다 바꾸기 위해서 onChange를 이용하고 onChange가 작동이 되면 input의 값을 즉각적으로 변경하기 위해서 함수를 만듦 => 함수를 불러오기 위해서 함수를 변수에 저장함(즉 function에 이름 붙이기) > input의 value를 inputValue로 줌(value를 지정하지 않아도 똑같음)

import React, { useState }from 'react';

const Input = () => {

    // input에서 입력한 값을 h3 태그에 표시
    const [inputValue, setInputValue] = useState("");

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

    return (
        <div className='input'>
            {/* input에서 입력한 값을 h3 태그에 표시 */}
            <h3>InputValue : {inputValue}</h3>
            <input type="text" value={inputValue} onChange = {textInput}/>
        </div>
    );
};

export default Input;

- Color.jsx

=> 버튼 클릭 시 입력한 색깔로 적용하기 위해서 값을 한 번 더 저장함

import React, { useState } from 'react';

const Color = () => {

    // input 값으로 색을 입력하면 해당 색으로 변경하는 useState 생성
    const [colorValue, setColorValue] = useState("");
    const [colors, setColors] = useState("");

    const colorInput = (c) => {
        setColorValue(c.target.value);
    }
    const colorChange = () => {
        setColors(colorValue);
    }

    return (
        <div className='color'>
            <h3 style={{color : colors}}>Color Change Example</h3>
            <input type="text" value={colorValue} onChange={colorInput}/>
            <button onClick={colorChange}>set</button>
        </div>
    );
};

export default Color;

- Input2.jsx

=> const에 두 input의 값인 name과 nickName을 inputs에 저장하고 inputs를 setter로 하여 값을 저장

import React, { useState, useRef } from 'react';

const Input2 = () => {

    const [ inputs, setInputs ] = useState({name: '', nickName: ''});

    // useRef : DOM에서 어떤 엘리먼트를 직접 선택해야 할 경우 사용
    const nameInput = useRef();

    // 구조 분해 할당
    const { name, nickName } = inputs;

    const textInput = (e) => {
        console.log(e.target.name);
        console.log(e.target.value);
        const { name, value } = e.target;
        // 변경대상이 아닌 값은 공백처리 => 기존값 유지
        setInputs({
            ...inputs, // 기존 값 복사 ... 스프레드 연산자
           [name]: value // name 키를 가진 값을 value로 변경
        });
    }

    const textClear = () => {
         setInputs({name: '', nickName: ''});
         nameInput.current.focus();
    }
    return (
        <div className='input'>
            <h3>
                name : {name}   / nickName : {nickName}
            </h3>
            <input type="text" value={name} name='name' placeholder='이름' onChange = {textInput} ref={nameInput}/>
            <input type="text" value={nickName} name='nickName' placeholder='닉네임' onChange={textInput}/>
            <button onClick={textClear}>초기화</button>
        </div>
    );
};

export default Input2;

2. param

- Param1.jsx

import React from 'react';
import './comp.css';
import  { useParams } from 'react-router-dom';

const Param1 = () => {
    // path variable 값으로 파라미터를 추출
    const { id, name } = useParams();

    return (
        <div className='param1 comp'>
            <div>Param1.jsx 영역</div>
            <h3>path variable : {id} / {name}</h3>
        </div>
    );
};

export default Param1;

- Param2.jsx

import React from 'react';
import './comp.css';
import { useSearchParams } from 'react-router-dom';

const Param2 = () => {

    //useSearchParams() : queryString의 파라미터를 받을 때 사용

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

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

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

export default Param2;

- Param3.jsx

 import React from 'react';
 import './comp.css';
import { useParams } from 'react-router-dom';

const Param3 = () => {

    const{ id, pw } = useParams();

    return (
        <div className='param3 comp'>
            <div>Param3.jsx 영역</div>
            <h3>ID : {id} /  PW : {pw} </h3>
        </div>
    );
};

export default Param3;

▷ 출력

2. 느낀 점

import, input을 이해하니 이제는 param이 이해가 잘 안 되었다. param에 대해서 공부를 집중적으로 해야 할 것 같다.

'Front-end > React' 카테고리의 다른 글

React 기초(db 연동)- AWS 풀스택 과정 42일차 (0)	2024.09.19
React 기초(useReducer)- AWS 풀스택 과정 41일차 (0)	2024.09.10
React 기초(todoList)- AWS 풀스택 과정 40일차 (0)	2024.09.09
React 기초(배열)- AWS 풀스택 과정 39일차 (0)	2024.09.06
React 설정 및 기초- AWS 풀스택 과정 37일차 (4)	2024.09.04

현재글React 기초(input, param)- AWS 풀스택 과정 38일차

awspspgh 님의 블로그

awspspgh 님의 블로그 입니다.

DB, Python, CSS, jpa, JS, 오블완, JSP, Spring, AWS, html_css_js, react, spring boot, final, Project, MySQL, 풀스택, java, 자격증, 티스토리챌린지, sqld,

Today :
Yesterday :

awspspgh 님의 블로그