React, 2일차

 counter

// input.js

import React, {useState} from "react";

function Input(){

    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 Input;

 

// MultiInput.js

import React, { useState } from "react";

function MultiInput() {

    const [inputs, setInputs] = useState({
        userid: '',
        name: ''
    });

    const { userid, name } = inputs;

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

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

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

export default MultiInput;

 

// components/Count.jsx

import React, { useState } from "react";

export default function Counter({ total, onClick }){
    const [count, setCount] = useState(0);
    return (
        <div className='counter'>
            <p className="number">
                {count} <span className="total">/{total}</span>
            </p>
            <button className="button" onClick={() => {
                setCount((prev) => prev + 1);
                onClick();
            }}>+1</button>
        </div>
    );
}

 

//AppCounter.jsx

import React, { useState } from "react";
import Counter from "./Counter";
import Input from "./input";
import MultiInput from "./MultiInput";
import Count from './components/Count';
import './App.css';

export default function AppCounter() {
  const [count, setCount] = useState(0);
  const handleClick = () => setCount((prev) => prev + 1);
  return (
    <div className="container">
      <div className="banner">
        Total Count: {count} { count > 10 ? '👍' : '👎' }
      </div>
      <div className="counters">
        <Count total={count} onClick={handleClick}/>
        <Count total={count} onClick={handleClick}/>
      </div>
    </div>
  );
}

 

// Index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import AppCounter from './AppCounter';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <AppCounter />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 

 

Array

 

// App.js

import React, { useState, useRef } from "react";
import UserList from "./UserList";
import CreateUser from "./CreateUser";

function App() {
  const [inputs, setInputs] = useState({
    username: '',
    email: ''
  });

  const { username, email } = inputs;

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

  const [users, setUsers] = useState([

    {
        id: 1,
        username: 'apple',
        email: 'apple@apple.com'
    },
    {
        id: 2,
        username: 'banana',
        email: 'banana@banana.com'
    },
    {
        id: 3,
        username: 'orange',
        email: 'orange@orange.com'
    }

]);

const nextId = useRef(4);

const onCreate = () => {
  console.log(nextId.current);
  const user = {
    id: nextId.current,
    username,
    email
  };
  setUsers([...users, user]);

  setInputs({
    username: '',
    email: ''
  });

  nextId.current += 1;
}

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

export default App;

 

// CreateUser.js

 

import React from "react";

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>
    );
}

export default CreateUser;

 

// UserList.js

import React from "react";

function User({ user }){
    return (
            <div>
            <b>{user.username}</b> <span>({user.email})</span>
            </div>
    )
}

function UserList({ users }) {
   
    return (
        <div>
           {
                users.map((user, index) => (
                    <User user={user} key={user.id}/>
                ))
           }
        </div>
    );
}

export default UserList;