[개인과제] React로 배열 메서드 다루기

개요

리액트 과제로 버튼을 클릭하면 배열 메서드가 동작하는 기능을 구현했다. 그 중에서 헷갈렸던 개념과 새롭게 배운 메서드에 대해 정리 하려한다.

useState에 값 저장하기

import { useState } from "react";

function App() {
  // const [array, setArray] = useState("초기값");
  const initalState = ["apple", "banana", "cherry", "melon", "elderberry"];
  const [array, setArray] = useState(initalState);
  const [result, setResult] = useState("");
  const [query, setQuery] = useState("");
  
  // 함수 만드는 부분
  
   return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <h1>Standard반 배열 API 테스트</h1>
      <input
        style={{ margin: "1.5rem", width: "20rem", height: "1.6rem" }}
        value={query}
        onChange={function (e) {
          setQuery(e.target.value);
        }}
      />
      <div>
        <button onClick={handlePush}>push</button>
        <button onClick={handlePop}>pop</button>
        <button onClick={handleSlice}>slice</button>
        <button onClick={handleSplice}>splice</button>
        <button onClick={handleFind}>find</button>
        <button onClick={handleSome}>some</button>
        <button onClick={handleEvery}>every</button>
      </div>
      <div
        style={{
          border: "1px solid black",
          display: "flex",
          margin: "1rem",
          padding: "0.5rem",
          justifyContent: "center",
          alignItems: "center",
          width: "80%",
        }}
      >
        <h3 style={{ fontSize: "1rem" }}>원본배열:&nbsp;</h3>
        <p>{array.join(", ")}</p>
      </div>
      <div
        style={{
          border: "1px solid black",
          display: "flex",
          margin: "1rem",
          padding: "0.5rem",
          justifyContent: "center",
          alignItems: "center",
          width: "80%",
        }}
      >
        <h3 style={{ fontSize: "1rem" }}>결과물:&nbsp;</h3>
        <p>{result}</p>
      </div>
    </div>
  );
}

export default App;

먼저 return에는 html태그를 입력해준다. useState는 꼭 react객체를 import 해서 사용할 메서드를 선언해주어야 한다.

const [array, setArray] = useState("초기값");

useState 안에는 초기값을 넣어주면 된다. 문자열이 들어갈 경우는 ""따옴표로 감싸주면 된다. array 부분은 초기화 시켜준 값에 변수가 된다.
let array = "초기값" <= 이런 형태나 마찬가지다.
react는 반드시 useState를 통해서만 값을 변경 즉 setArray를 통해 값을 수정해주어야 화면에 렌더링 된다.

push & pop 메서드

// 함수 만드는 부분에 아래 코드를 넣어주면 된다.

const handlePush = function () {
    if (query.length <= 0) {
      alert("추가하시려는 값을 입력해주세요!");
      return false;
    }
    const newArr = [...array, query];

    setArray(newArr);
    setResult(newArr.join(", "));
  };

  const handlePop = function () {
    // 1. 원본 배열을 통해 pop한 값을 저장
    const delArr = [...array];
    delArr.pop();

    // 2. setArray에 저장
    setArray(delArr);

    // 3. array를 기반으로 result 생성(setResult)
    setResult(delArr.join(", "));
  };

먼저 push메서드 즉 맨 뒤에서부터 배열에 값을 추가하는 함수를 만드려 한다. 새로운 배열을 선언해주어서 그 안에 스프레드 연산자로 배열을 풀어주고 입력한 query값을(문자열) 배열에 담아준다.
그냥 결과 setResult에 담게 되면 문자열 형태기 때문에 한 문장으로 이어져서 나오므로 join을 통해 ,로 구분해준다.
setArray를 통해서 기존에 배열을 변경해주고, setResult로 결과 값을 출력해준다.
html 부분에는 함수로 변경한 set메서드가 아닌 array변수와, result변수를 {}객체 안의 담아주면 된다.

pop메서드도 마찬가지다.
새로운 배열에 담아줘야 하는데, 반드시 setArray를 통해 값을 변경한 배열을 담아 주어야지만 result에도 값이 바뀌게 된다. 처음에 이 부분이 제일 헷갈렸다.

slice & splice 메서드

const handleSlice = function () {
    const sliced = [...array];

    setResult(sliced.slice(0, 3).join(", "));
  };

slice 메서드의 첫번째 값은 시작 인덱스를 의미하며 두번째 값은 몇 개까지 자를건지를 나타낸다.

find 메서드

some & every 메서드