React hooks

1장 usestate

카운터 컴포넌트

import React, { useState } from "react"

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

  const onIncrease = () => {
    setnumber((prevNumber) => prevNumber + 1);
  };

  const onDecrease = () => {
    setnumber((prevNumber) => prevNumber + 1);
  };

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

input 컴포넌트

function Input(){
	const [inputs, setInput] = useState({
		name: '',
		nickname: ''
	})
	
	const {name, nickname} = inputs // 비구조할당	

	const onChange = (e) => {
	 cost {name, value} = e.target
		setInput({
		 ...input,
			[name]:value
		})
	}

	const reset = () => {
	 setInput({
			name: '',
			nickname: ''
		})
	}
	
	return (
		<>
			<input name ='name' onChange={onChange} value ={name} />
			<input name ='nickname' onChange={onChange} value ={nickname} />
			<button onClick = {reset}>초기화</button>
			<div>
        <b>값: </b>
        {name} ({nickname})
      </div>
		</>
	)

}

useRef

특정 돔으로 접근가능함

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

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

  const { name, nickname } = inputs;
  const inputname = useRef();

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

  const onReset = () => {
    setInputs({
      name: "",
      nickname: "",
    });
    inputname.current.focus();
  };
  return (
    <div>
      <input name="name" onChange={onChange} value={name} ref={inputname} />
      <input name="nickname" onChange={onChange} value={nickname} />
      <button onClick={onReset}>초기화</button>
      <div>
        <b>값: </b>
        {name} ({nickname})
      </div>
    </div>
  );
}

export default InputSample;

배열추가

function App() {
  const [input, setInput] = useState({
    username: "",
    email: "",
  });

  const { username, email } = input;

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

  const [users, setUsers] = useState([
    {
      id: 0,
      username: "이종원",
      email: "per1215@naver.com",
    },
    {
      id: 1,
      username: "김춘수",
      email: "dwhddnjs@naver.com",
    },
    {
      id: 2,
      username: "가곡공",
      email: "asasdad@naver.com",
    },
  ]);

  const nextId = useRef(4);

  const onCreate = () => {
    setInput({
      username: "",
      email: "",
    });

    console.log(nextId.current);
    nextId.current = nextId.current + 1;

    const user = {
      id: nextId.current,
      username: username,
      email: email,
    };

    setUsers([...users, user]);
  };

  return (
    <div>
      <CreateUser
        username={username}
        email={email}
        onChange={onChange}
        onCreate={onCreate}
      />
      <UseList users={users} />
    </div>
  );
}

function CreateUser({ username, email, onChange, onCreate }) {
  return (
    <div>
      <input
        name="username"
        placeholder="계정명"
        onChange={onChange}
        value={username}
      />
      <input
        name="email"
        placeholder="이메일"
        onChange={onChange}
        value={email}
      />
      <button onClick={onCreate}>등록</button>
    </div>
  );
}