Web Tech/react

react 기본 - 8.useState(change event)

걍가영 2021. 11. 22. 16:27

input이 하나일때 상태 관리 

 

Input.js 

// react useState 패키지 불러오기
import React, {useState} from 'react';

function Input() {
	// text 값 설정, setText 함수명 지정
    const [text, setText] = useState('');
	// e를 파라미터로 받아와 입력한 값 받아오기
    const onChange = (e) => {
        setText(e.target.value);
    }
	// 값 비우기
    const onReset = (e) => {
        setText('');
    }
    return(
        <React.Fragment>
            <input onChange={onChange} value={text} />
            <button onClick={onReset}>초기화</button>
            // text 값 보여주기
            <p>값 : {text}</p>
        </React.Fragment>
    )
}
export default Input;

App.js

import React from 'react';
import Inner from "./Inner";
import Input from "./Input";

function App() {
  return (
      <React.Fragment>
          <Inner>
          // Input 컴포넌트 불러오기
          <Input/>
          </Inner>
      </React.Fragment>
  );
}

export default App;


input이 여러개일때 상태 관리 

 

Inputs.js

import React, {useState} from 'react';


function Inputs() {
	// 값과 함수명 설정해서 객체로 만들기
    const [inputs, setInputs] = useState({
        email: '',
        nickname: ''
    });

	// 비구조화 할당을 통한 값 추출
    const { email, nickname } = inputs; 

    const onChange = (e) => {
        // 우선 e.target 에서 name 과 value 를 추출
        const { value, name } = e.target; 
        setInputs({
        	// 기존의 input 객체를 복사한 뒤
            ...inputs, 
            // name 키를 가진 값을 value 로 설정
            [name]: value 
        });
    };
	// 초기화 빈값 반환
    const onReset = () => {
        setInputs({
            email: '',
            nickname: '',
        })
    };


    return (
        <div>
            <input name="email" type="email" placeholder="이메일" onChange={onChange} value={email} />
            <input name="nickname" type="text" placeholder="닉네임" onChange={onChange} value={nickname}/>
            <button onClick={onReset}>초기화</button>
            <div>
                <p>이메일:{email} </p>
                <p>닉네임 : {nickname}</p>
            </div>
        </div>
    );
}

export default Inputs;

 

App.js

import React from 'react';
import Inner from "./Inner";
import Inputs from "./Inputs";

function App() {
  return (
      <React.Fragment>
          <Inner>
              <Inputs/>
          </Inner>
      </React.Fragment>
  );
}

export default App;

 

spread 문법
... 으로 객체의 내용을 모두 펼쳐서 기존 객체를 복사하여, 불변성을 지켜줘야 리액트 컴포넌트에서 상태가 업데이트가 됐음을 감지하고 리렌더링 진행합니다. 만약에 inputs[name] = value 이런식으로 기존 상태를 직접 수정하게 되면, 값을 바꿔도 리렌더링이 되지 않습니다.