리액트의 state와 함수들

const initialArray = [
    "apple",
    "banana",
    "cherry",
    "elderberry",
    "watermelon",
    "grape",
];

초기배열을 만든다.

const [array, setArray] = useState(initialArray);

array를 변경할 수 있는 state를 만들고 초기값을 initialArray를 넣는다.
그리고 결과값(result)을 변경할 수 있는 state를 만든다

const [result, setResult] = useState("");

그리고 인풋의 값을 다루는 query state를 만든다.

const [query, setQuery] = useState("");

ForEach

const handleForEach=()=>{
	let tempResult="";
    array.forEach(function(fruits){
    	tempResult += `${fruits} ,`;
	});
	tempResult=tempResult.slice(0,-2);
    setResult(tempResult);
};

tempResult인 빈 문자열을 만들고, forEach문을 사용하여 array를 돌면서 값을 tempResult에 붙인다.
그리고 result의 값을 변경하는 setResult에 바뀐 문자열을 넣는다.

filter

const handleFilter = () => {
    const filteredList = array.filter(function (fruit) {
      if (fruit.includes(query)) {
        return true;
      } else {
        return false;
      }
    });
    setResult(filteredList.join(", "));
  };

인풋에 입력한 값을 포함하는 배열의 요소를 필터링해준다.

 <input value={query}
        onChange={function (e) {
            setQuery(e.target.value);
         }}
 ></input>

이것은 인풋태그이다. value와 onChange는 짝궁이다!!
query state를 사용한다. 사용자가 입력하는 값으로 query를 바꾼다!
handleFilter에서 array를 돌면서 query를 포함하는지 확인한다. 포함하면 true 리턴, 포함하지 않으면 false 리턴.
result를 변경하는 setResult를 사용하여 변경한다.

Push & pop

const handlePush = () => {
    if (!query) {
      alert("no input");
      return false;
    }
    const newArr = [...array, query];
    setArray(newArr);
    setResult(newArr.join(", "));
  };
  
  const handlePop = () => {
    const newArr = [...array];
    newArr.pop();
    setArray(newArr);
    setResult(newArr.join(", "));
  };

원래 array를 복사하고 query를 더해서 newArr를 만든다.
setArray(newArr)가 없다면
계속 푸시되는게 아니라 맨 뒤만 입력갑으로 바뀐다.
왜냐면 원래 배열은 변함이없기때문이다.
그래서 array를 변경할 수 있는 setArray를 사용해서 array를 newArr로 업데이트해주고 result의 값을 바꿔준다.

Reduce

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

reduce 함수는 매개변수를 항상 두개 받는다.
accumulator(축척자), currentValue(배열의 현재 요소)

accumulator는 콜백함수의 리턴값을 인자로 받는다.
arr=[1,2,3,4,5]라면
1. acc=1, cur=2
2. acc=3, cur=3
3. acc=6, cur=4
4. acc=10, cur=5
5. acc=15

여기서는 문자열이기 때문에 리턴을 ${acc},${cur} 이런식으로 준거다. 사과-> 사과, 배-> 사과,배,수박-> 사과,배,수박,귤 ...
이런식으로!!