React 2일차

1일차 에서 했던거처럼

 

my-app 리액트 폴더 생성 ( npx create-react-app myapp )

<header>

comp1 comp2 comp3
-------------------------------------------------

comp1 영역입니다.

<footer>

 

와 같이 만들어 놓고 시작.

 

---

 

Hook : 기능을 할 수 있게 해주는 역할

useState() : 상태변화  

이용해서

 

Count 예제 +를 누르면 1이올라가고 -를 누르면 1이 내려가게 만들어보기

 

Count 컴포넌트

import React , {useState} from 'react';

const Counter = () => {


    const [count, setCount] = useState(0);

    const incre = () => {
        setCount(count+1);
    }
    const decre = () => {
        setCount(count-1);
    }


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

export default Counter;

 

input에서 입력한 값을 h3태그에 표시해보기

 

Input 컴포넌트

import React, { useState } from 'react';

const Input = () => {

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

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


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

export default Input;

 

Comp2 컴포넌트에서 Counter, Input 컴포넌트를 가져온 결과

 

+ , - 버튼이 기능하는 것을 볼 수 있고, input 의 입력한 값이 h3 안에 표시되는 것을 볼 수 있음.

 

input 값에 색을 입력하고 버튼을 누르면 해당색으로 변경하는 useState 생성해보기

 

Color 컴포넌트

import React, { useState } from 'react';

const Color = () => {

    // input 값으로 색을 입력하면 해당 색으로 변경하는 useState 생성

    const [inputColor , setInputColor] = useState("");

    const [btnColor , setBtnColor] = useState("");

    const colorInput = (e) => {

     setInputColor(e.target.value);

    }

    const colorBtn = () => {
        setBtnColor(inputColor);
    }


    return (
        <div className='color'>
            <h3 style={{color : btnColor}}>Color Change Example</h3>
            <input type="text" name='text' value={inputColor} onChange={colorInput} />
            <button onClick={colorBtn}>Change</button>
        </div>
    );
};

export default Color;

 

 

결과

 

 

색을 입력하고 버튼을 누르면 색이 바뀌는 것을 볼 수 있음.

 

---

 

한번에 여러개의 useState를 처리할 수 있도록 해 이름과 닉네임의 벨류를 받아 나타내보고,

초기화 버튼을 만들어 useRef() 를 사용해서 벨류값을 초기화 후 포커스가 오게해보기

 

 

useRef : DOM에서 어떤 엘리먼트를 직접 선택해야 할 경우 사용 

 

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

const Input2 = () => {

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

    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 resetBtn = () => {
        setInputs({ name: '', nickName: '' });
        nameInput.current.focus();
    };


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

export default Input2;

 

 

---

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

 

Comp3 컴포넌트에 path variable을 사용하는 Param1과 , queryString을 사용하는 Param2를 만들어서 가져와보기

 

const Comp3 = () => {

        const [id, setId] = useState('');
        const [pw, setPw] = useState('');
      
        const paramInput = (e) => {
            setId(e.target.value);
        }

        const paramInput2 = (e) => {
            setPw(e.target.value);
        }


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

            <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=18&page=15'
                }
            }>queryString params</Link>


        </div>
    );
};

export default Comp3;

 

 

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 영역입니다.</div>
            <h3> path variable : {id} / {name} </h3>
            
            
        </div>
    );
};

export default Param1;

 

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

const Param2 = () => {
     

    const [params] = useSearchParams(); 
    console.log(params);
    const search = [...params];
    console.log(search);
    return (
        
        <div className='param2 comp'>
             <div>Param2 영역입니다.</div>

            {
                search.map(s => (
                    <h3>{ s[0]} : {s[1] }</h3>
                ))
            }
        </div>
    );
};

export default Param2;

 

 

Param2 에서 

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

 

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;

 

App.js 에서는 이런식으로 path variable을 사용하는 Param에는 / 뒤에들어갈 정보를 path에 기입.

 

 

---

 

id/pw 입력받고 전송버튼을 클릭하여 Param3.jsx에 출력해보기

 

Comp3 에 추가해야할 코드

 const [id, setId] = useState('');
        const [pw, setPw] = useState('');
      
        const paramInput = (e) => {
            setId(e.target.value);
        }

        const paramInput2 = (e) => {
            setPw(e.target.value);
   		}
        
     
<input type="text" name='id' onChange={paramInput} />
<input type="text" name='pw' onChange={paramInput2}/>
<Link to={`/param3/${id}/${pw}`}>id/pw 전송</Link>

 

 

Param3 컴포넌트

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

const Param3 = () => {

    const { id , pw } = useParams(); 

    return (
        <div className='param3 comp'>
            <h3> id : {id} , pw : {pw} </h3>
        </div>
    );
};

export default Param3;

 

결과

 

입력하고 전송을 누르면

 

Param3으로 넘어가서 입력한 값이 출력되는걸 볼 수 있음.