[React] useState - 02

01 예제 01

• 상태를 2개를 관리하려면?
• 필요한 상탯값의 개수 만큼 useState 를 호출하면 됨!

 

 

src

 

src/components

• src/components/Chrome.js

import React, { useState } from 'react'
// 필요한 상탯값의 개수 만큼 useState를 호출하면 된다!

function Chrome(){
    // useState(초깃값)
    const[ nameText, updateName ] = useState("")
    const[ nickText, updateNick ] = useState("")

    // 지역함수 선언
    const handleNameChange = e => { updateName(e.target.value) }
    const handleNickChange = e => { updateNick(e.target.value) }

    return<>
        <input placeholder="이름" type="text" onChange={handleNameChange} />
        <input placeholder="별명" type="text" onChange={handleNickChange} />
        <p>이름 : {nameText}</p>
        <p>별명 : {nickText}</p>
    </>
}

export default Chrome

 

src

• src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
// import App from './components/App';
// import Ball from './components/Ball';
import Chrome from './components/Chrome'

ReactDOM.render(
  <React.StrictMode>
    <Chrome />
  </React.StrictMode>,
  document.getElementById('root')
);

 

Chrome.js

index.js

 

실시간으로 변경된다면 ok !

 

 

 

 

 

02 예제 02

 

src

 

src/components

• src/components/Dragonball.js

import React, {useState} from 'react'
// useState 는 독립적인 함수이므로 커스텀 함수를 만들 때 활용 가능!

// 숫자가 아닌 값의 초기화를 차단한다! 무조건 숫자를 받는다!
const useMyState = (initialValue) => {
    const initNum = Number.isInteger(initialValue) ? initialValue : 0
    const [ myState, changeState ] = useState(initNum)
    return { myState, changeState }
}

function DragonBall(){
    const { myState, changeState } = useMyState("")
    return<>
        <h1>{myState}</h1>
        <button onClick={() => changeState(myState - 1)}>감소</button>
        <button onClick={() => changeState(myState + 1)}>증가</button>
    </>
}

export default DragonBall

 

src

• index.js

import React from 'react';
import ReactDOM from 'react-dom';
// import App from './components/App';
// import Ball from './components/Ball';
// import Chrome from './components/Chrome'
import DragonBall from './components/Dragonball'

ReactDOM.render(
  <React.StrictMode>
    <DragonBall />
  </React.StrictMode>,
  document.getElementById('root')
);

 

Dragonball.js

index.js