야근시렁

react 프로젝트를 할 때 많이 사용되는 로직 중 하나가 검색입니다. 

저도 매번 프로젝트를 할때마다 많이 사용되기 때문에 이참에 따로 정리해서 만들어 두려고 한다. 

이전에 올렸던 filter 라는 함수를 사용해서 구현한 예정이다. 

참고로 filter는 react 문법이 아닌, javascript 문법으로 배열을 다룰 때 사용한다. 

https://jotokkiplayground.com/1

우선 필요한 state는 검색어를 입력하는 searchInput 이 필요합니다. 

이 state 의 값을 기준으로 기존의 배열을 filter를 통해 검색어가 포함된 문자열 기준으로 새롭게 그려진 배열을 filteredItems 안에 담고, 이 filteredItems를 아래 map으로 돌려줄 겁니다.

import React, {useState} from 'react'

function SearchableList() {
  const [searchInput, setSearchInput] = useState('')
  const items = ['사과', '바나나', '체리', '나비', '사자', '독수리', '수박']
  const filteredItems = items.filter((item) =>
    item.toLowerCase().includes(searchInput.toLowerCase()),
  )

  return (
    <div>
      <input
        type="text"
        placeholder="검색어를 입력하세요."
        value={searchInput}
        onChange={(e) => setSearchInput(e.target.value)}
      />
      <ul>
        {filteredItems.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  )
}

export default SearchableList

만약 이 데이터가 단순 배열이 아니고 오브젝트 형태이거나, 

검색어와 노출되는 값이 다른경우 그냥 searchInput에 입력되는 검색어를 기준으로 filter를 걸어주고 return 되는 UI 부분에서만 노출되는 값만 rendering 해주면 됩니다~! 

import React, {useState} from 'react'

function SearchableList() {
  const [searchInput, setSearchInput] = useState('')
  const items = [
    {id: '사과', value: "🍎"}, 
    {id: '바나나', value: "🍌"}, 
    {id: '체리', value: "🍒"}, 
    {id: '나비', value: "🦋"}, 
  ]
  const filteredItems = items.filter((item) =>
    item.id.toLowerCase().includes(searchInput.toLowerCase()),
  )

  return (
    <div>
      <input
        type="text"
        placeholder="검색어를 입력하세요."
        value={searchInput}
        onChange={(e) => setSearchInput(e.target.value)}
      />
      <ul>
        {filteredItems.map((item) => (
          <li key={item.id}>{item.value}</li>
        ))}
      </ul>
    </div>
  )
}

export default SearchableList

참고로 중간에 toLowerCase가 포함되어있는데, 이는 만약 검색해야 할 데이터가 영문인 경우 대소문자에 따라 같은 값을 찾을 수 없기 때문에, 주로 사용합니다. 사실 현재 예시는 한국어이므로 필요 없지만, 나중에 필요할 때 사용하려고 그냥 넣어놓았습니다. 

쉽게 apple 과 Apple을 두 문자열 모두 toLowerCase로 apple, apple 만들어놓고 비교를 하기 위함입니다~

만약 대소문자도 구분하고 싶다면  toLowerCase는 삭제해야 합니다.

문자열을 다루는 함수들은 실무에서도 많이 사용되고 있습니다. 

알아두면 유효하게 쓸 수 있습니다. 

1. slice 함수

slice 함수는 문자열의 부분 문자열을 추출하여 반환합니다. 

시작 인덱스와 종료 인덱스를 인자로 받아 해당 범위의 문자열을 반환합니다. 

const str = "Hello, world!";
const slicedStr = str.slice(0, 5); // 0번째부터 4번째 글자까지
const slicedStrLast = str.slice(-6); // 마지막부터 5번째 글자까지 
console.log(slicedStr); // "Hello"
console.log(slicedStrLast); // "world!"

2. split 함수

split 함수는 문자열을 특정 구분자를 기준으로 분할하여 배열로 반환합니다.

구분자를 인자로 받아 해당 구분자를 기준으로 문자열을 분할합니다.

const str = "apple,banana,orange";
const fruits = str.split(",");
console.log(fruits); // ["apple", "banana", "orange"]

3. substring 함수

substring 함수는 문자열의 부분 문자열을 추출하여 반환합니다. 

시작 인덱스와 종료 인덱스를 인자로 받아 해당 범위의 문자열을 반환합니다. 

slice와 달리, substring은 음수 인덱스를 사용하지 않고 음수 인텍스가 있는 경우, 0으로 취급해버립니다.

const str = "Hello, world!";
const subStr = str.substring(0, 5);
console.log(subStr); // "Hello"

정리하자면, 

slice와 substring은 새로운 문자열은 반환하고, split은 배열을 반환합니다. 

slice와 substring은 매우 흡사하지만, 

slice의 경우 만약 음수를 사용해서 끝에서 부터 자를 수 있고, 시작 인덱스와 마지막 인덱스의 값이 뒤바뀐 경우 "" 를 리턴하지만, substring의 경우 음수는 사용 불가하지만,  시작 인덱스와 마지막 인덱스의 값이 뒤바뀐 경우 알아서 순서를 바꿔줍니다. 

다음의 코드 예시를 살펴보면 이해하기 더 쉬울 것 같습니다.

const str = "I like chocolate!";

// slice
console.log(str.slice(6, 2));  // "" (빈 문자열 반환)
console.log(str.slice(-10));    // "chocolate!"

// substring
console.log(str.substring(6, 2));  // "like" (인덱스 2와 6 사이의 문자열 반환)
console.log(str.substring(-10));    // "Hello, world!" (음수 인덱스를 0으로 취급)

 1. ForEach 함수

forEach 메서드는 배열의 각 요소에 대해 주어진 함수를 실행하며, 반환값은 없습니다.

 이 메서드는 배열의 각 요소에 대해 특정 작업을 수행하고자 할 때 사용됩니다. 

즉, forEach는 배열을 순회하는 것 외에는 아무런 결과를 반환하지 않는다는 것입니다.

const numbers = [1, 2, 3, 4, 5];
numbers.forEach(num => console.log(num));
// 1
// 2
// 3
// 4
// 5

2. Map 함수

map 메서드는 배열의 각 요소에 대해 주어진 함수를 실행하고, 그 결과를 모아 새로운 배열로 반환합니다. 

이 메서드는 원본 배열을 변경하지 않습니다. 대신 새로운 배열을 반환하기 때문에, 변환된 값을 바탕으로 새로운 배열을 생성할 때 주로 사용됩니다. 그렇기 때문에 가상DOM을  활용하는 React 환경에서 가장 많이 사용되는 함수 중 하나 입니다. 

리액트로 개발을 한다면, 필수로 알아둬야 하는 함수입니다.

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

3. Filter 함수

filter 메서드는 배열의 각 요소를 테스트하는 함수를 받아, 그 조건에 부합하는 요소만을 모아 새로운 배열로 반환합니다.

map과 마찬가지로 원본 배열은 변경되지 않습니다. 필터링 조건에 맞는 요소만을 추출할 때 사용됩니다.

역시 원본 배열을 변경하지 않고, 새로운 배열을 리턴하기 때문에 리액트에서 많이 사용되는 함수입니다.

특히 배열 데이터 수정이나, 검색조건을 개발할때 무조건 사용하게 될껍니다. 

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4]