[사전 미션] Wanted - React와 다시 시작하는 취업 준비 | 프리온보딩 FE 챌린지 8월

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

사전 미션

아래 영상의 기능과 동일한 기능의 화면을 만들기

 

 

사용 프레임워크

vite + react

 

 

 

설계

1. 검색창에 검색어를 입력하면 입력한 값이 <input> 태그의 value값으로 변경돼야 한다.

2. 검색창에 검색어가 입력되면 Company 목록을 보여줘야 한다.

3. 검색창에 입력한 검색어와 동일한 단어가 굵게 표시돼야 한다.

 

 

설계에 대한 구현

1. 검색어가 변경되는 경우, 두 컴포넌트(검색창, 회사 목록)에서 검색어를 알아야 한다.

  > 따라서 최상위 컴포넌트인 App.tsx에서 useState() 함수를 선언하고 각 컴포넌트에 props로 전달해준다.

 

2. 검색어가 입력되는 경우에만 회사 목록을 보여준다.

  > 회사 목록 컴포넌트를 검색어가 있는 경우에만 표시되도록 검색어의 length를 체크해서 표시한다.

 

3. 검색창에 입력한 검색어와 동일한 단어가 굵게 표시돼야 한다.

  > <mark> 태그를 사용해서 검색창에 입력된 단어와 동일한 단어만 강조해서 표시한다.

 

 

구현 화면

 

 

전체 코드

https://github.com/eoqna/pre-onboarding-mission

GitHub - eoqna/pre-onboarding-mission: 프리온보딩 챌린지 8월 사전미션