[React] input 태그 infinite render in react. or re-render in react.

  리액트에서 프로젝트를 진행하다보면 input태그를 사용하여 프로젝트를 분명히 진행하게 될 것이다. 하지만 하나의 component에 input 태그와 table 혹은 데이터를 보여주는 자료를 함께 넣다보면 input태그에 텍스트를 넣을 때 마다 component가 re-rendering 되는 현상을 겪을 수 있다. 그럴 때는 input component를 만들어서 따로 component를 불러와서 그려주는 방법이 바람직하다.

개발 중인 프로그램이므로 블러처리

  예를 들면 하나의 컴포넌트에서 작용하는 상황에서 아래에 있는 표를 스크롤 내려놓고 글을 쓰게되면 다시 컴포넌트가 리렌더링되어 글을 적을 때마다 표 스크롤이 다시 올라가는 현상을 확인할 수 있을 것이다. 하지만 컴포넌트를 따로 관리하게 되면 리렌더링 되는 현상을 막을 수 있다.

 

...
<form onSubmit={submit}>
	<input></input>
    <button type="submit"/>
</form>

<table>
	...table example
</table>
...

 

위 코드처럼 되어있는 구조를 아래의 코드 구조로 수정하고 <FormTagComponent /> 에는 위의 form  태그를 넣고 불러오면 된다.

 

...
<FormTagComponent />

<table>
	...table example
</table>
...