5. 사용자가 입력할 수 있는 input

 

 1. 사용자가 입력할 수 있는 input 태그 

 

(1) src 디렉터리에 InputSample.js 파일을 생성한다.

// src/InputSample.js

import React from 'react';

function InputSample() {
    return (
        <div>
            <input />
            <button>초기화</button>
            <div>
                <b>값: </b>
            </div>
        </div>
    );
}

export default InputSample;

 

(2) 이 컴포넌트를 App.js 에서 렌더링한다.

// src/App.js

import React from 'react';
import InputSample from './InputSample';

function App() {
  return (
    <InputSample />
  );
}

export default App;

 

---

 

 2. onchange 

: input 의 이벤트 중 하나.

: 이벤트 객체 e 를 파라미터로 받아와서 사용할 수 있다.

: 이 객체의 e.target 은 이벤트가 발생한 DOM 인 input DOM 을 가르키게 된다.

: 이 DOM 의 value 값인 e.target.value 를 조회하면 현재 input 에 입력한 값(value 값)이 무엇인지 알 수 있다.

 

아래와 같이 InputSample.js 파일을 수정한다.

// src/InputSample.js

import React, { useState } from 'react';

function InputSample() {
    const [text, setText] = useState('');

    const onChange = (e) => {
        setText(e.target.value);
    };

    const onReset = () => {
        setText('');
    };

    return (
        <div>
            <input onChange={onChange} value={text} />
            <button onClick={onReset}>초기화</button>
            <div>
                <b>값: {text}</b>
            </div>
        </div>
    );
}

export default InputSample;

 

 

이와 같이 input 의 상태를 관리할 때는 input 태그의 value 값도 설정해주어야한다.

그래야 상태가 바뀌었을 때, input 의 내용도 업데이트 되기 때문이다.

---

 

 3. 여러 개의 input 관리하기 

 

 첫 번째 방법) useState 와 onChange 를 여러개 만들어 구현한다. 

 

// src/InputSample.js

import React, { useState } from 'react';

function InputSample() {
    const onChange = (e) => {
    };

    const onReset = () => {
    };

    return (
        <div>
            <input placeholder="이름" />
            <input placeholder="닉네임" />
            <button onClick={onReset}>초기화</button>
            <div>
                <b>값: </b>
                이름 (닉네임)
            </div>
        </div>
    );
}

export default InputSample;

 

구현 가능하지만, 가장 좋은 방법은 아니다.

 

 두 번째 방법) input 에 name 을 설정하고, 이벤트가 발생했을 때, 이 값을 참조한다. 

                         그리고 useState 에서는 문자열이 아닌 객체 형태의 상태를 관리해주어야한다. 

 

// src/InputSample.js

import React, { useState } from 'react';

function InputSample() {
    const [inputs, setInputs] = useState({
        name: '',
        nickname: ''
    });
    
    // 비구조화 할당을 통해 값을 추출한다.
    const { name, nickname } = inputs;

    const onChange = (e) => {
    	// e.target 에서 name 과 value 를 추출한다.
        const { value, name } = e.target;
        setInputs({
	    // 기존의 input 객체를 복사한다.
	    ...inputs,
            // 그리고 name 키를 가진 값을 value 로 설정한다.
            [name]: value
        });
    };

    const onReset = () => {
        setInputs({
            name: '',
            nickname: '',
        })
    };

    return (
    <div>
        <input
            name="name"
            placeholder="이름"
            onChange={onChange}
            value={name}
        />
        <input
            name="nickname"
            placeholder="닉네임"
            onChange={onChange}
            value={nickname}
        />
        <button onClick={onReset}>초기화</button>
        <div>
            <b>값: </b>
            {name} ({nickname})
        </div>
    </div>
);
}

export default InputSample;

 

여기서  리액트 상태에서 객체를 수정할 때는  아래와 같이 직접 수정하는 것이 아니라

const onChange = (e) => {
    const { value, name } = e.target;
    inputs[name] = value;
};

 

아래처럼  새로운 객체를 만들어서  새로운 객체에 변화를 주고, 이를 상태로 사용해주어야한다.

const onChange = (e) => {
    const { value, name } = e.target;
    setInputs({
        ...inputs,
        [name]: value
    });
};

 

여기서 사용한 ... 은 spread 문법이다. 객체의 내용을 모두 펼쳐서 기존 객체를 복사해주는 것이다.

---

 

 4. spread 

 

: 기존에 선언한 객체를 건들이지 않고, 가지고 있는 값 그대로 사용하여 새로운 객체를 만들 때 사용하는 문법이다.

혹은 기존의 값에 새로운 속성을 추가해서 새로 만들 수도 있다.

 

아래 코드를 예시로 들어보았다.

같은 속성이 반복되어 선언되는 것을 볼 수 있었다.

const dog = {
	name: '리트리버'
};

const cuteDog = {
	name: '리트리버',
	attribute: 'cute'
};

const redDog = {
	name: '리트리버',
	attribute: 'cute',
	color: 'red'
};

 

그리고 이는 spread 문법을 사용하여 아래와 같이 작성할 수 있다.

const dog = {
	name: '리트리버'
};

const cuteDog = {
	...dog,
	attribute: 'cute'
};

const redDog = {
	...cuteDog,
	color: 'red'
};

 

또한 배열에서도 사용할 수 있다.

spread 를 여러 번 사용할 수 있다.

const animals = ['개', '고양이', '참새'];
const anotherAnimals = [...animals, '판다'];

const doubleAnimals = [...animals, '판다', ...animals];
console.log(doubleAnimals); // ['개', '고양이', '참새', '판다', '개', '고양이', '참새']

 

 

---

 

 5. rest 

 

: spread 와 비슷하게 생겼지만 쓰임은 다르다.

: 원하지 않는 내용을 없애고 새로운 객체를 만들 수 있다.

 

아래는 그 예시이다.

const redCuteDog = {
	name: '리트리버',
	attribute: 'cute',
	color: 'red'
};

const { color, ...cuteDog } = redCuteDog;
console.log(cuteDog) // { name: '리트리버', attribute: 'cute' }

const { attribute, ...dog } = cuteDog;
console.log(dog) // { name: '리트리버' }

 

배열에서도 사용할 수 있다. 

const numbers = [0, 1, 2, 3, 4, 5, 6];

const [one, ...rest] = numbers;

console.log(one); // 0
console.log(rest); // [1, 2, 3, 4, 5, 6]

 

함수 파라미터에서도 사용할 수 있다.

function sum(a, b, c, d, e, f, g) {
	let sum = 0;
	if (a) sum += a;
	if (b) sum += b;
	if (c) sum += c;
	if (d) sum += d;
	if (e) sum += e;
	if (f) sum += f;
	if (g) sum += g;
	return sum;
}

const result = sum(1, 2, 3, 4, 5, 6);
console.log(result);