[React] 데이터 추가, 삭제, 수정

Test1

 

import React, { useState } from 'react';
import Test1Sub from './Test1Sub';

const dataList = [
    {id:1, name:'김철수'},
    {id:2, name:'김다미'},
    {id:3, name:'최진수'},
]

const Test1 = () => {
    const [data, setData] = useState(dataList)

    //추가
    const onAdd1 = (name) => {
        setData( data.concat({id:4, name:name}) )
    }
    const onAdd2 = (text) => {
        setData([
            ...data,
            {
                id:5, name:text
            }
        ])
    }

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

    //수정
    const onMod1 = (id) => {
        setData(data.map(item => {
            if(item.id === id) {
                return {
                    ...item,
                    name: '유재석'
                }
            }else {
                return item
            }
        }))
    }
    const onMod2 = (id) => {
        setData(data.map(item =>item.id === id ? {...item, name:'강호동'} : item))
    }

    return (
        <div>
           <Test1Sub onAdd1={onAdd1} onAdd2={onAdd2} onDel1={onDel1} 
           onDel2={onDel2} onMod1={onMod1} onMod2={onMod2}
           />
        </div>
    );
};

export default Test1;

 

 

TestSub

 

import React from 'react';

const Test1Sub = ({onAdd1, onAdd2, onDel1, onDel2, onMod1, onMod2}) => {
    return (
        <div>
            <p>
                <button onClick={() => onAdd1('김태리')}>추가</button>
                <button onClick={() => onAdd2('김철수')}>추가</button>
            </p>
            <p>
                <button onClick={() => onDel1(1)}>삭제</button>
                <button onClick={() => onDel2(2)}>삭제</button>
            </p>
            <p>
                <button onClick={() => onMod1(1)}>수정</button>
                <button onClick={() => onMod2(2)}>수정</button>
            </p>
        </div>
    );
};

export default Test1Sub;

 

 

필요한 문법

1. concat : 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환함

구문

CONCAT(text1, [text2],…)

 

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);

console.log(array3);
// expected output: Array ["a", "b", "c", "d", "e", "f"]

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/concat

Array.prototype.concat() - JavaScript | MDN

 

 

2. filter : 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환함

구문

arr.filter(callback(element[, index[, array]])[, thisArg])

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

 

 

3. map : 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환함

구문

arr.map(callback(currentValue[, index[, array]])[, thisArg])

const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map

Array.prototype.map() - JavaScript | MDN

 

 

4. 삼항연산자

구문

condition ? exprIfTrue : exprIfFalse

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

삼항 조건 연산자 - JavaScript | MDN

 

 

5. 얕은복사 vs 깊은복사

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

Object.assign() - JavaScript | MDN

 

+ Math.random

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math/random

Math.random() - JavaScript | MDN

 

+ split()

split()메서드는 String 객체를 지정한 구분자를 이용하여 여러 개의 문자열로 나눈다.

const str = 'The quick brown fox jumps over the lazy dog.';

const words = str.split(' ');
console.log(words[3]);
// expected output: "fox"

const chars = str.split('');
console.log(chars[8]);
// expected output: "k"

const strCopy = str.split();
console.log(strCopy);
// expected output: Array ["The quick brown fox jumps over the lazy dog."]

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/split

String.prototype.split() - JavaScript | MDN

 

 

 

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

const Test3 = () => {
    const no = useRef(1)
    const [data, setData] = useState([])
    const names = '김다미, 김태리, 최우식, 김희선, 송혜교, 전지현, 강호동, 이승기, 제시, 송소희, 유재석, 배수지, 박보영, 박서준, 한예슬'.split(',')
    

    //String 객체메서드
    const onAdd = () => {
        // const ran = names의 개수에서 랜덤으로 처리
        // text : names를 배열처리해서 ran값으로 나오게
        const ran = Math.floor(Math.random() * names.length)
        setData([
            ...data,
            {
                id: no.current++ ,
                text: names[ran]
            }
        ])
    }
    return (
        <>
            <h2>데이터추가</h2>
            <button onClick={onAdd}>추가</button>
            <hr />
            <ul>
                {
                    data.map( item => <li key={item.id}>{item.id}/{item.text}</li>)
                }
            </ul> 
        </>
    );
};

export default Test3;