Grid 활용 방법 문의드립니다.

Question

강사님 안녕하세요. 오늘도 개인 스터디를 하다가 답답한 내용이 생겨서 문의 글 남기고 갑니다. 강사님께서 설명해주신 내용들을 보면 어찌됐든 React 에서는 state 를 immutable 하게 관리하여 state 의 변경을 통해 렌더링이 발상하도록 개발을 하는 것이 보편적인 거 같은데요. 제가 React 에 Grid Tool 같은 것을 적용하여 조회나 편집을 한번 해보고 싶어서 만져보고 있는데.. (예를 들면 해외 Ag-grid 나 국내 Toast grid 같은 오픈 소스가 있네요..) Grid Tool 에서는 제공하는 api 를 활용할 경우, state 와 연동하기가 매우 어렵더라고요..  단순히 조회만 되는 Grid 일 경우, 최초 서버에서 읽어온 데이터를 Redux Store 에 넣으면 간단하던데 편집을 해야할 경우에는 Grid UI 에서  데이터를 직접 변경하거나, Grid API 를 통해 데이터를 수정하면 이 값을 State 와 연동하기는 너무 어려운 거 같더라고요.. 이러한 Grid Tool 사용 시에는 Grid 의 Data 를 로컬 State 나 Redux 와의 연동하기보다는 일반 변수를 따로 두고 활용하는 것이 좋은 방법일까요? 간략하게 어떻게 활용하는 것이 좋을 지 의견주시면 정말 감사하겠습니다.

이재승 · Answer

데이터를 직접 처리하는지 여부에 따라 controlled/uncontrolled 로 구분합니다 (참고 링크: https://reactjs.org/docs/uncontrolled-components.html) 보통은 데이터를 직접 처리하는 controlled 로 처리하는 게 더 좋습니다 참고로 아래처럼 입력하면 uncontrolled input 이 되는거구요 <input type="text" /> controlled input 은 value 와 onChange 를 입력하죠 말씀하신 Toast grid 를 잠깐 훑어봤는데요 data를 입력할 수는 있는데 onChange 에 해당하는 이벤트 핸들러를 제공하지 않는 것 같네요 따라서 Toast grid 는 데이터를 내부적으로 처리하는 게 정책인 것 같습니다 (controlled 불가) uncontrolled 로도 괜찮다면 데이터 관리는 Toast grid 에게 맡기시면 되고, controlled 로 작업하시길 원하신다면 input 처럼 value 와 onChange 같은 속성을 제공하는 라이브러리를 찾으셔야 합니다.