React 상태 관리, 라우팅

//Color.jsx
import React, { useState } from 'react';

const Color = () => {

    // input 값으로 색을 입력하면 해당 색으로 변경하는 useState 생성
    const [ color, setColor ] = useState("");
    const [ color2, setColor2 ] = useState("");

    return (
        <div className='color'>
            <h3 style={{ color: color2 }}>Color Change Example</h3>
            <input type="color" onChange={(e)=>{setColor(e.target.value)}}/>
            <button onClick={()=>{setColor2(color)}}>set</button>
        </div>
    );
};

export default Color;

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

const Comp1 = () => {
    return (
        <div className='comp1 comp' style={{width:'500px',margin:'50px auto'}}>
            <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(f => (
                    <tr>
                        <td>{f.name}</td>
                        <td>{f.phone}</td>
                        <td>{f.addr}</td>
                        <td>{f.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'>
            <div>Comp2 영역입니다.</div>
            <Counter />
            <hr />
            <Input />

            <hr />
            <Color />

            <hr />
            <Input2 />
        </div>
    );
};

export default Comp2;


////////////////////////////////////////////////////////////////////////////////////////
//Comp3.jsx

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

const Comp3 = () => {
    // 다른 컴포넌트로 데이터를 넘길 때 props 도 있지만,
    // path를 사용하여 데이터를 넘길 수 있음.
    // (1) path variable : /comp3/12
    // (2) queryString : /comp3?id=12&name=12

    const [id, setId] = useState('');
    const [pw, setPw] = useState('');
    const idSet = (e) => setId(e.target.value);
    const pwSet = (e) => setPw(e.target.value);

    return (
        <div className='comp3 comp'>
            <div>Comp3.jsx 영역입니다.</div>

            {/* id/pw 입력받고 전송버튼을 클릭하여 Param3.jsx에 출력 */}
            <input type="text" name='id' onChange={idSet}/>
            <input type="text" name='pw' onChange={pwSet} />
            <Link to={{
                pathname : `/param3/${id}/${pw}`
            }}>id/pw 전송
            </Link>
            <br /><br /><br /><hr />

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

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

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

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

            

        </div>
    );
};

export default Comp3;


////////////////////////////////////////////////////////////////////////////////////////
//Counter.jsx

import React, { useState } from 'react';

const Counter = () => {

    //useState() : 상태변화
    const [ count, setCount ] = useState(0)

    const incre = () =>{
        setCount(count+1);
        console.log("increment");
    }

    const decre = () =>{
        setCount(count-1);
        console.log("decrement")
    }

    return (
        <div className='count'>
            <h1>{count}</h1>
            <button onClick={incre}>+</button>
            <button onClick={decre}>-</button>
        </div>
    );
};

export default Counter;


////////////////////////////////////////////////////////////////////////////////////////
//Footer.jsx

import React from 'react';

const Footer = () => {
    return (
        <div className='footer' style={{margin: '50px'}}>
            <div>
                <p>Copyright by EZEN. All rights reserved.</p>
            </div>
        </div>
    );
};

export default Footer;


////////////////////////////////////////////////////////////////////////////////////////
//Header.jsx

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

const Header = () => {
    return (
        <div className='header' style={{margin: '50px'}}>
            <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;


////////////////////////////////////////////////////////////////////////////////////////
//Input.jsx
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;


////////////////////////////////////////////////////////////////////////////////////////
//Input2.jsx
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 resetText = ()=>{
        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={resetText}>초기화</button>
        </div>
    );
};

export default Input2;


////////////////////////////////////////////////////////////////////////////////////////
//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
import React from 'react';
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;

 

결과