벨로퍼트와 함께하는 모던 리액트

이 포스트는 벨로퍼트와 함께하는 모던 리액트 를 보고 작성하는 강의 정리 포스트입니다.

동적으로 바뀌는 Counter 컴포넌트를 만들어 보자

// Counter.jsx

function Counter() {
    return (
        <div>
            <h1>0</h1>
            <button>+1</button>
            <button>-1</button>
        </div>
    );
}

이벤트 설정

import React, {useState} from 'react';

function Counter() {
    const [number, setNumber] = useState(0)

    const InCrease = () => {
        setNumber(number + 1)
    }

    const DeCrease = () => {
        setNumber(number - 1)
    }

    return (
        <div>
            <h1>{number}</h1>
            <button onClick={InCrease}>+1</button>
            <button onClick={DeCrease}>-1</button>
        </div>
    );
}

위 처럼 코드를 만들면 Counter 기능을 하는 컴포넌트가 완성된다.

input 관리 useState

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;

• e는 onchange 콜백의 파라미터로 이벤트 객체이며, e.target.value로 text를 얻을수 있다

여러개의 input관리하기

import React from "react";
import { useState } from "react";

const InputSample = () => {
  const [inputs, setInput] = useState({
    name: "",
    nickname: "",
  });

  const { name, nickname } = inputs;

  const onChange = (e: Event) => {
    const { name, value } = e.target;
    setInput({
			// ... inputs으로 이전 inputs의 값을 모두 복사한다.
      ...inputs,
      [name]:value
    })
  };

  const init = () => {
    setInput({
      name: "",
      nickname: "",
    });
  };

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

리액트 상태에서 객체를 수정해야 할 때

inputs[name] = value;

이런식으로 직접 수정하면 안된다.

그 대신에, 새로운 객체를 만들어서 새로운 객체에 변화를 주고, 이를 상태로 사용해주어야 한다.

setInputs({
  ...inputs,
  [name]: value
});