프로젝트의 검색 기능 구현 중, 3개의 컴포넌트로 나누어 검색한 유저 정보를 가져오고, 검색어 하이라이팅 기능을 추가하여 기능을 구현했다.

💫 코드 흐름

---

검색 컴포넌트

const Search = () => {
  const [user, setUser] = useState(false);
  const [keyword, setKeyword] = useState('');

  const searchUser = async (search) => {
      // API 요청
      // ... 생략
  };
  
  // 검색 기능 최적화
  let timer;
  const checkInp = (e) => {
    const search = e.target.value;
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      if (search) {
        searchUser(search);
        setKeyword(search);
      } else {
        setUser('');
      }
    }, 200);
  };

  return (
    <Wrap>
      <HeaderBSU checkInp={checkInp} />
      {user ? (
        user.map((item) => <SearchUser props={item} keyword={keyword} />)
      ) : (
        <SearchCont>
          <img src={searchMain} alt="" />
          <SearchMsg>유저를 검색해 팔로우 해보세요!</SearchMsg>
        </SearchCont>
      )}
      <NavBar />
    </Wrap>
  );
};

• 검색어를 입력할 때 useState를 통해 상태 값을 관리한다.
• 검색어 입력시, 유저 정보를 가져오는 SearchUser 컴포넌트를 호출하여 props와 keyword 값을 전달한다.

검색한 유저 정보 컴포넌트

const SearchUser = ({ props, keyword }) => {
  ...

  return (
    ...
      <UserInfo>
        <UserName>
          <SearchHighlighting
            user={props.username}
            keyword={keyword}
            type="username"
          />
        </UserName>
        <UserId>
          @&nbsp;
          <SearchHighlighting
            user={props.accountname}
            keyword={keyword}
            type="accountname"
          />
        </UserId>
      </UserInfo>
    ...
  );
};

불러올 유저 정보는 사용자 이름과 계정ID로, 이때 하이라이팅 컴포넌트를 호출하여 유저 정보와 키워드, 타입을 전달한다.

하이라이팅 컴포넌트

const SearchHighlighting = ({ user, keyword, type }) => {
  return user.includes(keyword) ? (
    <span type={type}>
      {user.split(keyword)[0]}
      <Highlighting>{keyword}</Highlighting>
      {user.split(keyword)[1]}
    </span>
  ) : (
    <span>{user}</span>
  );
};

SearchUser 로 부터 전달받은 props를 조건에 맞게 렌더링한다.

✨ 어떻게 하이라이팅 기능을 할까?

---

split을 사용하자!

let user= "마동석최고다";
let keyword= "동석";

user.split(keyword); //["마", "최고다"]
user.split(keyword)[0] + keyword + user.split(keyword)[1]; //"마동석최고다"

user가 ‘마동석최고다’이고 keyword가 ‘동석’ 이라면, user.split(keyword)[0] 은 '마'가 될 것이고, user.split(keyword)[1] 은 '최고다' 이다.

결론

<span type={type}>
  {user.split(keyword)[0]} // 마
  <Highlighting>{keyword}</Highlighting> // 동석
  {user.split(keyword)[1]} // 최고다
</span>

• 키워드를 기준으로 쪼갠 값들과 키워드를 span 태그로 감싸주어 나란히 배치되도록 한다.
• 검색한 키워드엔 변화를 주는 css 속성을 넣어주어 하이라이팅 효과를 준다.