[React] 친구리스트 추가,수정,삭제(useState, useRef)

 

 

friend.js

 

import React, { useState, useRef } from 'react';
import FriendList from './FriendList';
import FriendInput from './FriendInput';
import dataList from '../assets/api/friendData'
import './style.css'

const Friend = () => {
    const no = useRef(1)  
    const [data, setData] = useState(dataList)
    const [isChk, setIsChk] = useState(false)

    //삭제
    const onDel = (id) => {
        setData(data.filter(item => item.id !== id))
    }

    //모두삭제
    const onRemove = () => {
        setData([])
    }

    //초기화
    const onReset = () => {
        setData(dataList)
    }

    //추가
    // const onAdd = (name, age, image) => {
    //     setData([
    //         ...data,
    //         {
    //             id: no.current++,
    //             name,
    //             age,
    //             image
    //         }
    //     ])
    // }

    //추가
    /*
        const obj = { name:강호동, age:20 }
              obj.addr = '서울'    새롭게 생성됨
              obj.name = '유재석'  강호동->유재석으로 바뀜
    */
    const onAdd = (form) => {
        form.id = no.current++
        setData([
            ...data,
            form
        ])
    }

    return (
        <div className='wrap'>
            <h1>친구들 총 인원 : {data.length}명</h1>
            <p className='chk'><input type="checkbox" checked={isChk}
                onChange={ e => setIsChk(e.target.checked)}
            />
                {
                    isChk ? '추가활성' : '추가비활성'
                }
            </p>
            <FriendList data={data} onDel={onDel}/>
            <p className='btn'>
                <button onClick={onRemove}>모두삭제</button>
                <button onClick={onReset}>초기화</button>
            </p>
            {
                isChk && <FriendInput onAdd={onAdd}/>
            }
        </div>
    );
};

export default Friend;

 

 

friendInput.js

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

const FriendInput = ({onAdd}) => {
    const nameRef = useRef()
    const [form, setForm] = useState({
        name : '', age : '', image : ''
    })
    const {name, age, image} = form
    const changeInput = (e) => {
        const { value, name } = e.target
        setForm({
            ...form,
            [name] : value
        })
    }

    const onSubmit = (e) => {
        e.preventDefault()
        //onAdd(name, age, image)
        onAdd(form)  //하나씩 넘겨주지않고 객체 자체를 넘겨줌
        setForm({  //공백처리
            name : '',
            age : '',
            image : '',
        })
        nameRef.current.focus()  //포커스이동
    }

    return (
        <form className='formadd' onSubmit={onSubmit}>
            <p>
                <label>이름</label>
                <input type="text" value={name} name="name" onChange={changeInput} ref={nameRef}/>
            </p>
            <p>
                <label>나이</label>
                <input type="text" value={age} name="age" onChange={changeInput}/>
            </p>
            <p>
                <label>사진</label>
                <input type="text" value={image} name="image" onChange={changeInput}/>
            </p>
            <p>
                <button type='submit'>추가</button>
            </p>
        </form>
    );
};

export default FriendInput;

 

 

friendList.js

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

const FriendList = ({data, onDel}) => {
    return (
        <ul>
            {
                data.map( item => <FriendItem key={item.id} item={item} 
                    onDel={onDel}/>)
            }
        </ul>
    );
};

export default FriendList;

 

 

friendItem.js

import React from 'react';

const FriendItem = ({item, onDel}) => {
    const {id, name, age, image} = item  //비구조할당
    return (
        <li>
            <p><img src={image} alt='' /></p>
            <div>
                <strong>이름 : {name} </strong>
                <span>나이 : {age} </span><br />
                <button onClick={ ()=> onDel(id) }>삭제</button>
            </div>
        </li>
    );
};

export default FriendItem;