[TIL] Day 21 배열 API 사이트 만들기1

2023.11.02 목

 

메서드를 활용한 배열 API 사이트를 만들어 보았다.

 

Today

• 배열 API 사이트 만들기

 

---

학습내용

배열 API 사이트 만들기

 

• ForEach
• Filter
• Map
• Reduce
• Push
• Pop
• Slice
• Splice

 

 

 

초기 세팅

// useState를 사용하기 위해서 import 필요
import { useState } from "react";

// 메인 함수
function App() {
  const initialState = ["apple", "banana", "cherry", "date", "elderberry"];
  const [array, setArray] = useState(initialState); // 배열 값
  const [result, setResult] = useState(""); // 결과 값
  const [query, setQuery] = useState(""); // input을 위한 value
  const newArr = [...array]; // 불변성을 위해서 새로운 newArr에 할당
  .
  .
  . // handler 함수 작성
  
  return (
    <div style={allStyle}>
      <h1>Standard반 배열 API</h1>
      <input  type="text" value={query} placeholder="값을 입력해 주세요." style={inputStyle} onChange={function (e) {
        setQuery(e.target.value);
      }} />
      <div style={btnBoxStyle}>
        <button style={btnStyle} onClick={handleForEach}>ForEach</button>
        {/* 여기에 밑에 handler 함수를 받는 버튼들 추가! */}
      </div>
      <div style={boxStyle1}>
        <h3 style={innerStyle}>원본 배열</h3>
        <p style={innerStyle}>{array.join(", ")}</p>
      </div>
      <div style={boxStyle2}>
        <h3 style={innerStyle}>▼ 결과 ▼</h3>
        <p style={innerStyle}>{result}</p>
      </div>
    </div>
  );
  
  }
  
  export default App;

 

 

ForEach

"각 배열 요소에 대해 제공된 함수를 한 번씩 실행합니다."

배열 요소를 돌며 함수를 실행한다.

const handleForEach = () => {
    let temp = "";
    array.forEach((item, index) => {
      temp += `${index} : ${item} / `
    });
    setResult(temp.slice(0, -3));
  }

원본 배열 ▶ apple, banana, cherry, date, elderberry

결과 ▶ 0 : apple / 1 : banana / 2 : cherry / 3 : date / 4 : elderberry

 

 

Filter

"주어진 배열의 일부에 대한 얕은 복사본을 생성하고, 주어진 배열에서 제공된 함수에 의해 구현된 테스트를 통과한 요소로만 필터링 합니다."

배열 요소를 돌며 주어진 조건에 맞는 요소만 추출한다.

const handleFilter = () => {
    const filtered = array.filter(item => item.includes(query))
    setResult(filtered.join(", "));
  }

결과 ▶  apple, banana, cherry, date, elderberry

 

 

Map

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

배열 요소를 돌며 주어진 함수를 적용하여 새로운 배열을 생성한다.

const handleMap = () => {
    const mapped = array.map(item => item.toUpperCase())
    setResult(mapped.join(", "));
  }

결과 ▶ APPLE, BANANA, CHERRY, DATE, ELDERBERRY

 

 

Reduce

"배열의 각 요소에 대해 주어진 리듀서 (reducer) 함수를 실행하고, 하나의 결과값을 반환합니다."

첫번째 값과 두번째 값을 더해서 누적된 값을 만든다.

그 후 첫번째 값(누적된 값)과 두번째 값(현재 값)을 더해서 또 누적된 값을 만든다.

 

return 값이 누적된 값 자리로 들어간다
누적된 값 : acc
현재 값 : cur

const handleReduce = () => {
    const reduced = array.reduce((acc, cur) => `${acc} + ${cur}`)
    setResult(reduced);
  }

결과 ▶ apple + banana + cherry + date + elderberry

 

 

Push

"배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환합니다."

배열 끝에 입력하는 요소를 추가한다.

const handlePush = () => {
    if (query.length <= 0) {
      return alert("추가하려는 값을 입력해주세요.");
    }
    newArr.push(query);
    setArray(newArr);
    setResult(newArr.join(", "));
  }

입력값 ▶ hello

결과 ▶ apple, banana, cherry, date, elderberry, hello

 

 

Pop

"배열에서 마지막 요소를 제거하고 그 요소를 반환합니다."

배열 끝에 해당하는 요소를 제거한다.

const handlePop = () => {
    newArr.pop();
    setArray(newArr);
    setResult(newArr.join(", "));
  }

결과 ▶ apple, banana, cherry, date

 

 

Slice

"어떤 배열의 begin 부터 end 까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환합니다. 원본 배열은 바뀌지 않습니다."

시작하는 값 a, 끝나는 값 b을 입력한다.

a index(해당하는 요소) ~ b index(해당하는 직전의 요소)에 해당하는 요소의 배열을 추출한다.

  // + Slices의 경우 2~4번째 값을 반환하도록 구현
  const handleSlice = () => {
    const sliced = newArr.slice(1, 4);
    setResult(sliced.join(", "))
  }

결과 ▶ banana, cherry, date

 

 

Splice

"배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경합니다."

시작하는 값 a, 끝나는 값 b, 추가하는 값 c...을 입력한다.

a index(해당하는 요소) ~ b번째(해당하는 요소)에 해당하는 요소를 추출하고,

그 뒤로 c...를 추가 또는 대치하여 배열을 추출한다.

  // + Splices의 경우 1~2번째은 그대로 출력하고, 3~4번째에 kiwi, lime 넣기
  // + 원본배열(array)은 변경하지 않고 result만 변경하셔도 됩니다.
  const handleSplice = () => {
    array.splice(2, 2, "kiwi", "lime");
    setResult(array.join(", "));
  }

결과 ▶ apple, banana, kiwi, lime, elderberry

 

 

Slice와는 다르게 Splice 에서는 배열을 변수에 선언하지 않는 이유?
Slice : 해당되는 값을 추출
Splice : 해당되는 값을 변경 후 배열을 추출
그리고 반영되어 있는 array 값을 가져와서 구현하기 위해서 newArr 대신 array 사용

 

 

 

Pro Tips

&nbsp

코드 작성 시 띄어쓰기 입력

onChange={nameCahngeHandler} : 인수가 없는 경우. 평소에 사용하는 방법
onChange={(event)=>nameChangeHandler(event)} : 위의 코드와 동작 동일하다. 같은 인수 (event만) 를 넣을 거면 위 코드 처럼 작성하면 된다. 
onChange={()=>nameChangeHandler(test)} : 인수를 넣어야 하는 경우. 함수로 감싸줘야 자동 동작을 막는다

리턴값이 간단하면
const reduced = array.reduce((acc, cur) => `${acc} + ${cur}`)

리턴을 요구하는 조건이 한 줄일 때 사용 가능 

 

 

---

하루를 마치며

배열 메서드들을 하나하나 살펴보며 이해할 수 있었다.어떤 코드를 어떤 상황에 써야하는지 알게 되었고, 고민하는 시간을 줄일 수 있게 되었다.추후에 기억이 나지 않는다면 만들어 놓은 사이트에서 손쉽게 다시 확인할 수도 있을 것이다.

 

 

오늘의 한 줄
기본기를 탄탄하게!