리액트 검색 기능의 input 값은 onChange로 (with. 리액트와 자바스크립트의 차이점을 느끼다)

며칠 전에 잠이 안 와서 전에 사둔 Node.js 책을 몇 장 읽었었는데 input값을 불러올 때는 자바스크립트처럼 e.target.value 자체로만 코드를 작성하면 안된다고 했던 문장이 기억에 계속 남았다.

마침 검색 기능을 만들어야겠다는 생각을 하고 있었어서 좀 더 읽어보니

 

 

---

 

 

리액트 컴포넌트는 변수나 함수가 호출될 때마다 재정의가 돼서 화면을 다시 그리게 되면 여러 차례로 컴포넌트를 재호출한다고 한다.

만약에 input 값을 변수에 e.target.value 자체로 저장하게 되면, input 저장변수값이 재호출이 되어서 빈문자열로 재정의 되기 때문에 결과적으론 빈 문자열이 된다고 한다.

 

이럴 때 함수 또는 이벤트 리스너에 e.target.value를 set 함수 안에 넣어버리면 리액트 장점인 State를 저장하고 업데이트할 수 있다.

 

---

 

 

내가 가장 처음 자바스크립트를 배운 건 노마드코더에서였는데 그때 to do list를 만들 때 많이 어려워 했던 부분이 이 input 값을 받아서 어쩌고 저쩌고 하는 로직이었다 ㅋㅋ 그래서 연습장에 많이 그리고 그리고 그리고 했었는데... 아직도 초초보지만 그 기억이 새록하다.

그때 e.target.value를 변수에 저장하는 코드를 처음 배웠었던 기억이 떠올라 리액트와 자바스크립트의 차이를 몸소 느꼈던 얼마 안 되는 기회라 신기해서 잊지 않으려고 글을 작성해본다.

 

 

 

이 input값을 set함수로 업데이트하기 위해서는 onChange를 사용해야 한다.

처음에는 input값을 Form.Control(react bootstrap)에서 Submit으로 전달받고, 돋보기 클릭 이벤트도 별개로 작동을 시키려 했었는데, 잘 안 되더라!!! 내가 중간에 실수를 했었을 지도 모르지만.. 아까 봤던 Node책에서 onChange 이벤트를 통해 input의 업데이트 값을 받았던 코드가 감명 깊었어서 체인지 이벤트로 받기로 했다.

 

그리고 곱씹어보니 버튼 이벤트와 Form이 따로 따로 작동되고 있으니 버튼의 클릭 이벤트에서 얻을 수 있는 이벤트가 없다.

사실 좀 더 머리를 굴리면 가능했을 것 같다. 그치만 좀 더 편리하고 쉬운 방법을 사용할 수 있다면 그렇게 사용하는 게 좋지 않을까? 라는 생각이 좀 더 크다.

 

어쨌든 체인지 이벤트를 통해 계속 렌더링되는 최종 input값을 저장하는 로직을 만들 수 있었다!

 

<Form.Control
              aria-label="Default" 	     	            //bootstrap
              aria-describedby="inputGroup-sizing-default"  //bootstrap
              onChange={(e) => setKeyword(e.target.value)}
/>

<Button onClick={() => clickIconSearch()}>

 

 

체인지 이벤트를 감지하면 setKeyword함수를 통해 최종 input값을 저장하고,

Button 태그에서 클릭이벤트를 감지하면 내가 찾은 키워드를 query로 찾을 수 있게 도와주는 api 엔드포인트로 navigate하는 코드다!

그리고 받아오는 response 값은 기존의 ListHook을 사용할 생각이다! 코드 재사용을 하고 싶기도 하고, 어차피 간단한 레시피를 보여준다는 의미의 Hook인 만큼 기능도 크게 다르지 않을 것 같아서다.

 

 

종이에 대략적인 로직을 그려보고 어떻게 흘러가면 될지를 알고 움직이면 좀 더 풍부한 생각들을 할 수 있는 것 같다!

읽었던 책이 실제로 프로젝트에 도움이 되니 기쁘다😄