[인스타그램클론코딩] #6.1 Header Logic part one

안녕하세요 강정호입니다

 

오늘은 인스타그램 클론코딩에서 header 부분에 대해서 개발해보겠습니다.

 

헤더에서 Search 검색창을 추가하였습니다.

 

1. const meQuery = userQuery(ME);

자신의 userName을 조회하는 쿼리이다. 서버의 me 함수를 호출하여 로그인 한 user의 정보를 조회하는 API이다.

 

2. export default withRouter

- withRouter : 이 함수는 Hoc(Higher-order Component)입니다. 라우트로 사용되는 컴포넌트가 아니어도 match, location, history 객체를 접근할 수 있게 합니다. 즉 history 객체에 접근하기 위해 withRouter 함수를 사용하였습니다.

** 라우트로 사용되는 컴포넌트 : react-dom의 Route 컴포넌트를 사용하는 프로그램 (내 프로젝트에서는 Routes.js 프로그램을 뜻한다.)

 

3. history.push(`/search?term=${search.value}`);

history : 이 객체는 라우트로 사용된 컴포넌트에 match, location과 함께 전달되는 props 중 하나로, 이 객체를 통해서 컴포넌트 내에 구현하는 메서드에 대해서 라우터 API를 호출할 수 있다. 예를 들어서 페이지를 뒤로가거나, 로그인 후 화면 전환, 다른 페이지로 이동시에 페이지 이동을 강제할 수 있는 기능이 있습니다

 

위의 코드에서는 검색창에 검색어를 입력하고 엔터를 치면, localhost:3000/search?term=jake  이런식으로 라우팅 된다. 즉 history가 이렇게 강제할 수 있는 기능이 있다.

 

4. onSubmit={onSearchSubmit}

Search 입력박스 안에 검색어를 입력하고 엔터를 치게 되면, form을 submit 하게 된다. 이 때 onSearchSubmit을 호출하게 됩니다. onSearchSubmit 함수에서는 e.preventDefault 함수로 <form> 태그의 submit 동작을 중지 시킨다. 그리고 history 객체를 사용하여 /search?term=검색어  로 라우팅 API를 호출한다.

 

이렇게 하여 header 검색창을 만들었습니다.