Assignment 3 과제를 통해 얻은 지식 정리 글입니다.
과제 레파지토리 : https://github.com/POB-Coconut/Assignment-3
이번 기업 과제는 요구 사항이 많아 2번에 걸쳐 제출하는 방식입니다.
저는 이번에 관리자 로그인을 하면 등록한 계정 정보를 볼 수 있는 테이블 컴포넌트, 테이블 페이지 네이션, utils 함수 분리 및 Jest를 이용한 Test 작성을 맡았습니다. 이번 글은 이전 테이블 컴포넌트의 추가 기능인 기본 검색 기능 (with.제경님), 조건별 검색 기능 정리 글입니다.
코드량을 줄이기 위해 꼭 필요한 코드만 작성하였습니다.
기본적인 input
태그와 onChange
이벤트, value
를 상태로 관리하여 구현했습니다.
입력값과 데이터를 입력값의 길이만큼 자른 데이터를 비교했습니다.
// 전달받은 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
함수를 이용해 원본 데이터를 직접 건들이기 때문에 복사한 데이터를 이용해 초기화 해줍니다.
이름으로 검색할지, 아이디로 검색할지 조건별로 검색하는 기능입니다.
기본적인 검색 바에 드롭 다운을 추가해 아이템을 선택해 검색할 수 있습니다.
기본 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 컴포넌트에서 검색을 할 때 선택한 드롭 다운 아이템을 이용해 조건을 설정합니다.
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']
조건별 검색 기능이 필수 기능은 아니지만 그렇다고 검색 기준이 있는 게 아니라서 어쩌다 보니 세트로 구현하게 됐습니다. 처음엔 드롭 다운으로 아이템을 저장하고 변수를 이용해 객체에 어떻게 접근해서 분류하지? 라는 생각이 들어 구현을 망설였지만, 간단하게도 정답은 대괄호 접근이었고 다시 한번 자바스크립트의 기본 개념의 중요성을 느끼게 된 경험이었습니다.