✏️ react기초문법들

forEach

filter

Map

reduce

push

pop

slice : 원본배열의 뒤 2개 아이템을 제거하여 출력

splice : 원본배열의 가운데 아이템 2번째 부터 2개를 “kiwi”, “lime”으로 변경

indexOf : input에 입력한 값과 일치하는 값이 있는 경우 해당 index를 출력, 없는 경우, -1을 출력

includes : 원본배열이 input에 입력한 값과 일치하는 정확한 과일명을 가지고있는 경우 true 출력, 그 외의 경우 false 출력

find : 원본배열이 input에 입력한 값을 포함하는 과일명을 가지고있는 경우 과일명을 출력, 그 외의 경우 “Not Found”를 출력

some : 원본배열이 input에 입력한 값을 포함하는 과일명을 가지고있는 경우 true을 출력, 그 외의 경우 false 를 출력

every : 모든 과일명이 5글자를 초과하는 경우 true를 출력, 그 외의 경우 false를 출력

sort : 알파벳 내림차순 정렬 후 리스트 명을 “, “로 구분하여 출력

 

import { useState } from 'react';
import './App.css';
function App() {
    const initialArray = [
        'apple',
        'banana',
        'cherry',
        'elderberry',
        'watermelon',
        'grape',
    ];
    const [array, setArray] = useState(initialArray);
    const [result, setResult] = useState('');
    const [query, setQuery] = useState('');

    /* 함수들 */
    const handleForEach = () => {
        let tempResult = '';
        array.forEach(function (fruit) {
            tempResult += `${fruit} ,`;
        });
        // tempResult = tempResult.slice(0, -2);
        // setResult(tempResult);
        setResult(tempResult.slice(0, -2));
    };
    const handleFilter = () => {
        const filteredList = array.filter(function (fruit) {
            // 얘를 필터링을 할지 말지를 결정한다.
            if (fruit.includes(query)) {
                return true;
            } else {
                return false; // 여기서 결정한다.
            }
        });
        setResult(filteredList.join(', '));
    };

    const handleMap = () => {
        //맵은 원본배열의 대문자로 출력 toUpperCase()
        const mappedList = array.map((fruit, index) => {
            return fruit.toUpperCase();
        });
        setResult(mappedList.join(', '));
    };

    // const handleReduce = () =>{
    //   const reduceList = array.reduce((acc,current) => {
    //     // console.log('-----------------');
    //     // console.log('acc',acc);
    //     // console.log('cur',current);
    //     // console.log('-----------------');

    //     return `${acc}, ${current}`;
    //     })
    //     setResult(reduceList);
    //     // const testArr = [4, 1, 2, 10, 5];
    //     // const sum = testArr(function(acc,cur){
    //     //   //acc에 계속해서 누적된 값을 더해주자
    //     //   return acc + cur;
    // }

    const handleReduce = () => {
        const reducedListText = array.reduce(function (acc, cur) {
            return `${acc}, ${cur}`;
        });
        setResult(reducedListText);
    };

    const handlePush = (event) => {
        //input 태그에 입력한 값이 결과의 끝에 달라붙도록
        if (!query) {
            alert('값이 없음');
            return false;
        } else {
            const newArr = [...array, query];
            setArray(newArr);
            setResult(newArr.join(', '));
        }
    };

    const handlePop = () => {
        const newArr = [...array];
        newArr.pop();
        setArray(newArr);
        setResult(newArr.join(', '));
    };

    const handleSlice = () => {
        const newArr = [...array];
        const sliceArray = newArr.slice(0, -2);
        setResult(sliceArray);
        setResult(sliceArray.join(', '));
    };

    const handleSplice = () => {
        const newArr = [...array];
        newArr.splice(1, 2, 'kiwi', 'lime');
        setResult(newArr);
        setResult(newArr.join(', '));
    };

    const handleIndexOf = () => {
        const newArr = [...array];
        const newIndexOf = newArr.indexOf(query);
        setResult(newIndexOf);
        // if (newIndexOf !== -1) {
        // setResult(newIndexOf);
        // } else {
        //     return -1;
        // }
    };

    const handleIncludes = () => {
        const newInclude = array.includes(query);
        setResult(newInclude.toString()); //boolean값이기때문에 문자로 출력해줘야함.
    };

    const handleFind = () => {
        const newArr = [...array];
        const newFind = newArr.find((fruit) => {
            return fruit === query;
        });
        if (newFind) {
            setResult(newFind);
        } else {
            setResult('not Found');
        }
    };

    const handleSome = () => {
        const newSome = array.some((fruit) => {
            return fruit === query;
        });
        setResult(newSome.toString()); //boolean값은 문자열로 변경해준다.
    };

    const handleEvery = () => {
        const newArr = [...array];
        const newEvery = newArr.every((fruit) => {
            return fruit.length > 5;
        });
        setResult(newEvery.toString());
    };

    const handleSort = () => {
        const newArr = [...array];
        const newSort = newArr.sort((a, b) => {
            return b.localeCompare(a); // 문자열을 비교하여 정렬
        });
        setResult(newSort.join(', '));
    };

    return (
        <div>
            <h1>Array API Practice</h1>
            <div>
                <input
                    value={query}
                    onChange={function (e) {
                        setQuery(e.target.value);
                    }}
                />
            </div>
            <div>
                <button onClick={handleForEach}>forEach</button>
                <button onClick={handleFilter}>filter</button>
                <button onClick={handleMap}>Map</button>
                <button onClick={handleReduce}>reduce</button>
                <button onClick={handlePush}>push</button>
                <button onClick={handlePop}>pop</button>
                <button onClick={handleSlice}>slice</button>
                <button onClick={handleSplice}>splice</button>
                <button onClick={handleIndexOf}>indexOf</button>
                <button onClick={handleIncludes}>includes</button>
                <button onClick={handleFind}>find</button>
                <button onClick={handleSome}>some</button>
                <button onClick={handleEvery}>every</button>
                <button onClick={handleSort}>sort</button>
            </div>
            <div>
                <strong>Array</strong> : {array.join(', ')}
            </div>
            <div>
                <strong>Result</strong> : {result}
            </div>
        </div>
    );
}
export default App;