[POB#11] Assignment 3: 자란다 기업 과제 기술 정리. 조건 검색 기능 구현

dongwon·2021년 8월 5일
6

원티드-프리온보딩

목록 보기
8/25
post-thumbnail

Assignment 3 과제를 통해 얻은 지식 정리 글입니다.
과제 레파지토리 : https://github.com/POB-Coconut/Assignment-3

🎯 Assignment 3 : 자란다

이번 기업 과제는 요구 사항이 많아 2번에 걸쳐 제출하는 방식입니다.
저는 이번에 관리자 로그인을 하면 등록한 계정 정보를 볼 수 있는 테이블 컴포넌트, 테이블 페이지 네이션, utils 함수 분리 및 Jest를 이용한 Test 작성을 맡았습니다. 이번 글은 이전 테이블 컴포넌트의 추가 기능인 기본 검색 기능 (with.제경님), 조건별 검색 기능 정리 글입니다.

코드량을 줄이기 위해 꼭 필요한 코드만 작성하였습니다.

깔끔하게 디자인 해주신 인경님, 승원님 감사합니다 !

🔍 검색 기능 구현

검색 바 구현

기본적인 input 태그와 onChange 이벤트, value를 상태로 관리하여 구현했습니다.

검색 로직 구현

입력값과 데이터를 입력값의 길이만큼 자른 데이터를 비교했습니다.

SearchTable 컴포넌트

// 전달받은 props들 : 테이블 데이터 set 함수, 테이블 데이터 복사본
const SearchTable = ({ setUserData, copiedData }) => {
  const [inputValue, setInputValue] = useState("");

  1️⃣const onInputValue = useCallback((e) => {
    const word = e.target.value;
    setInputValue(word);
  }, []);

  useEffect(() => {
    if (inputValue !== "") {
      const valueLen = inputValue.length;
      2️⃣const filterdData = copiedData.filter(
        (data) => data.name.substring(0, valueLen) === inputValue
      );

      setUserData(filterdData);
    } else {
      3️⃣setUserData(copiedData);
    }
  }, [inputValue, setUserData, copiedData]);

  return (
    <>
      <input
        type="text"
        placeholder="검색어를 입력해주세요."
        value={inputValue}
        onChange={onInputValue}
      />
    </>
  );
};

코드 분석

1. onChange 이벤트
onChange 이벤트의 e.target.value를 이용해 입력값을 저장했습니다.
2. 검색 로직. (입력값과 데이터 비교)
원본 테이블 데이터를 건들 수 없어 복사 데이터를 이용했습니다. substring을 이용해 각 데이터를 입력값의 길이로 자른 후 입력값과 비교했습니다.
3. 원본 데이터 저장
입력값이 빈칸이 아닐 때, 테이블 데이터를 원본으로 되돌리는 로직입니다. setUserData 함수를 이용해 원본 데이터를 직접 건들이기 때문에 복사한 데이터를 이용해 초기화 해줍니다.

⚙️ 조건별 검색 기능 구현

이름으로 검색할지, 아이디로 검색할지 조건별로 검색하는 기능입니다.
기본적인 검색 바에 드롭 다운을 추가해 아이템을 선택해 검색할 수 있습니다.

SearchDropdown 컴포넌트 ( 드롭 다운 구현 )

기본 HTML 태그CSS ( styled-component )를 이용해서 드롭 다운을 구현했습니다.

const SearchDropdown = ({
  setDropdownItem,
  setDropdownName,
  setInputValue,
}) => {
  const [dropdownToggle, setDropdownToggle] = useState(false);

  const onDropdownToggle = useCallback(() => {
    1️⃣setDropdownToggle((prev) => !prev);
  }, []);

  const onSelectDropdownItem = useCallback(
    (data) => {
      const { value, title } = data;
      2️⃣setDropdownItem(value);
      setDropdownName(title);
      setInputValue("");
    },
    [setDropdownItem, setDropdownName, setInputValue]
  );

  return (
    <DropdownContainer
      onClick={onDropdownToggle}
      onMouseLeave={() => setDropdownToggle(false)}
    >
      <DropdownBody>검색 필터 : {dropdownName}</DropdownBody>
      3️⃣<DropdownMenu isActive={dropdownToggle}>
        {4️⃣SEARCH_DROPDOWN_ITEMS.map((data) => (
          <DropdownItem
            key={data.id}
            onClick={() => onSelectDropdownItem(data)}
          >
            <p>검색 필터 : {data.title}</p>
          </DropdownItem>
        ))}
      </DropdownMenu>
    </DropdownContainer>
  );
};

5️⃣ const DropdownMenu = styled.ul`
  display: ${(props) => (props.isActive ? `block` : `none`)};
  position: absolute;
`;

코드 설명

1. 드롭 다운 active 변수
dropdownToggle 변수를 이용해 드롭 다운을 열고 닫습니다.
2. 선택된 드롭 다운 아이템
조건 검색에서 사용할 아이템을 저장합니다.
3. styled-component에 전달할 active 변수
css 처리를 하기 위해 toggle 변수를 전달합니다.
4. 드롭 다운 아이템들 상수
5. props 이용한 styled-component
props를 이용해 true일 땐 block, false 일 땐 none으로 css 처리를 합니다.
position: absolute를 이용해 아래의 돔을 방해하지 않고 드롭 다운을 엽니다.

✔️ 조건별 검색

위의 SearchTable 컴포넌트에서 검색을 할 때 선택한 드롭 다운 아이템을 이용해 조건을 설정합니다.

SearchTable 컴포넌트

useEffect(() => {
  if (inputValue !== "") {
    const valueLen = inputValue.length;
    1️⃣ const filterdData = copiedData.filter(
      (data) => String(data[dropdownItem]).substring(0, valueLen) === inputValue
    );

    setUserData(filterdData);
  } else {
    setUserData(copiedData);
  }
}, [inputValue, setUserData, copiedData, dropdownItem]);

코드 설명

1. 조건 검색
드롭 다운에서 선택된 아이템 dropdownItem을 이용해 filter 메서드 안에서 조건을 설정합니다. 객체 접근할 때 대괄호 [ ] 를 이용해 변수로 접근할 수 있게 했습니다.
데이터의 형식이 string이 아닐 때를 대비해 String()으로 문자열로 변환 시켜줍니다.

마침표 접근 : 객체.key
대괄호 접근 : 객체['key']

🙏 조건별 검색 후기

조건별 검색 기능이 필수 기능은 아니지만 그렇다고 검색 기준이 있는 게 아니라서 어쩌다 보니 세트로 구현하게 됐습니다. 처음엔 드롭 다운으로 아이템을 저장하고 변수를 이용해 객체에 어떻게 접근해서 분류하지? 라는 생각이 들어 구현을 망설였지만, 간단하게도 정답은 대괄호 접근이었고 다시 한번 자바스크립트의 기본 개념의 중요성을 느끼게 된 경험이었습니다.

profile
데이원컴퍼니 프론트엔드 개발자입니다.

0개의 댓글