23/11/02 til react

카테고리 없음

23/11/02 til react

한지지우우 2023. 11. 2. 23:06

import logo from "./logo.svg";

import "./App.css";

import { useState } from "react"; // 유즈 스테이트를 임포트 해야 사용가능

function App() {

const initialState = ["apple", "banana", "cherry", "date", "elderberry"];

const [array, setarray] = useState(initialState); // 유즈 스테이트의 기본 형식 기본 array 그걸 바꾸는 setarray

const [result, setresult] = useState("어떤값"); //소괄호 안에는 해당 어레이의 초기값

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

const handleforeach = function () {

let temp = " ";

array.forEach(function (item, index) { //포이치 문 안에 콜백함수를 갖는다. 첫매개변수는 값 두번째는 순번

temp += `${index} : ${item} / `; // 0 : apple / 1 : banana / 2 : cherry / 3 : date / 4 : elderberry

});

setresult(temp); // 셋리절트로 리절트값을 바꿔준다.

};

const handlefilter = function () {

const filtered = array.filter((item, index) => item.includes(query)); //필터의 콜백함수도 값과 순번

setresult(filtered.join(", ")); //query는 input에 찍히는 값 input값을 포함하도록

}; //하는 includes를 사용해서 필터링

const handlemap = function () {

const mapped = array.map(function (item, index) { //map은 해당 어레이의 요소 갯수 만큼 리턴 출력

return item.toUpperCase(); //그냥 어레이안 요소들의 대문자로 바꿔서 셋리절트

});

setresult(mapped.join(", "));

};

const handlereduce = function () {

const reduced = array.reduce(function (acc, cur) { //레듀스의 콜백함수 매개변수는 누적값과 현재값

return `${acc} + ${cur}`; //<-- 요 값이 다시 누적되어 acc가 되고 다음 cur이 또 축적

});

setresult(reduced);

};

const handlepush = function () {

if (query.length <= 0) { //if문은 input값이 0이하 이면 좀더 많이 치세요 느낌

alert("값을 넣으세요");

return false;

}

const newarray = [...array, query]; // array.push(query) 이렇게 한다고 array가 표현되지 않는다 유즈스테이트의

setarray(newarray); //setarray로만 바뀌는걸 적용시킬수 있다.

setresult(newarray.join(", "));

};

const handlepop = function () {

const poppedarr = [...array]; //pop도 push와 같은 원리이기 때문에 스프레드 오퍼레이터로 새어레이를

poppedarr.pop(); //만들고 그걸 팝하고 그 어레이를 셋레절트 해준다.

setresult(poppedarr.join(", "));

};

const handleslice = function () {

const slicedarr = array.slice(1, 4); //슬라이스는 인자로 시작 인덱스 끝인덱스를 가져 그 사이 요소를 잘라낸다.

setresult(slicedarr.join(", "));

};

const handlesplice = function () {

const spliced = [...array]; //스플라이스는 인자로 첫 시작인데스를 써주고 그이후에 빼낼갯수만큼을

spliced.splice(2, 2, "kiwi", "lime"); // 두번째 인자로 써주고 다음 인자부터는 빼낸자리에 넣어주는 요소들을 씀

setresult(spliced.join(", "));

};

const handleindexof = function () {

const indexofArr = array.indexOf(query); //input값이 query가 해당 array에서 몇번째인지 알려주는 indexof

setresult(indexofArr); //

};

const handleincludes = function () {

const includesarr = array.includes(query); //input 값을 포함하는 어레이를 띄어주고

alert(includesarr);

setresult(`${includesarr}`); // true / false 값을 스트링화해서 셋 리절트

};

const handlefind = function () {

const found = array.find(function (item) {

return item.includes(query); //인풋값을 포함하고 있는 애를 찾는다. 첫번째것만 찾나봄

});

setresult(found);

};

const handlesome = function () {

const somesome = array.some(function (e) { // 인풋값을 을 포함하고 있는 요소가 있으면 true뜨고 아니면

return e.includes(query); //false 뜸

});

setresult(`${somesome}`); //백틱 사용해서 불리언값 방출!

};

const handleevery = function () {

const Every = array.every(function (e) { //every는 각요소를 판단해서 불리언 값을 내놓음

return e.length >= 2; //어레이의 요소의 글자길이가 2개 이상이면 true방출하게 리턴

});

setresult(String(Every));

};

const handlesort = function () {

const sorted = [...array].sort().reverse(); //솔트는 기준에 맞춰 정렬시킨다. 그냥sort()이렇게 쓰면 걍 알파벳

setresult(sorted.join(", ")); //순으로 배열시킨다. 원래 array와 순서가 같아서 reverse를 해봤음 ㅋ

};

const handlejoin = function () {

let joined = array.join(", "); //조인은 해당배열의 요소 사이사이에 조인()안에 것을 넣어줌

setresult(joined);

};

return (

<div>

<h1>스탠다드반 배열 API테스트</h1>

<input

value={query} //인풋은 밸류를 쿼리로 두고

onChange={function (e) { //온체인지값을 줘서 기능을 셋쿼리로 두고 인자.타겟.벨류로

setquery(e.target.value); //이렇게 쓴다고함 캬캬캬 일단 외워!

}}

<div>

<button onClick={handleforeach}>forEach</button>

<button onClick={handlefilter}>filter</button>

<button onClick={handlereduce}>reduce</button>

<button onClick={handleslice}>slice</button>

<button onClick={handlesplice}>splice</button>

<button onClick={handleindexof}>indexof</button>

<button onClick={handleincludes}>includes</button>

<button onClick={handleevery}>every</button>

<button onClick={handlejoin}>join</button> //버튼에 온클린두고 함수 선언 변수넣어놓고 위에서 함수할당

</div>

<div>

<p>{array.join(", ")} </p> //기본어레이에 조인해놓음 ㅋ

</div>

<div>

<p>{result}</p> //result값을 여기다 지정 { } 이거는 자바스크립트 문법이래요 ㅋ

</div>

);

}

export default App;