React-dom이 하는 역할은 무엇인가?
- React-dom은 사용자에게 보여지는 html 문서에 컴포넌트를 적용한 페이지를 보여주기 위한 importing을 시켜주는 모듈이다. 우리는 index.html안에 react-dom 모듈을 사용하여, app.jsx를 참조, 이 app.jsx파일은 리액트 src폴더의 js 파일 (컴포넌트 및 variables,function 들)을 참조 함으로써 궁극적으로 html로 return해준다. 쉽게 말해서 징검다리 역할을 해준다고 생각하면 될 것 같다.
Rendering 관리의 중요성 : 리액트 컴포넌트 들은 매 번 값이 바뀔 때, 조건에 따라서 리 렌더링이 된다. 이 때, 필요없는 컴포넌트 들까지 렌더링을 해버리면 잡아먹는 리소스가 어마어마하게 많아지기 때문에 효율성에 큰 문제가 발생한다. 따라서 이러한 리렌더링을 관리해주는 것이 중요하다. 실제로 Pilot Project를 진행하면서 필드 검색란을 확장/축소 버튼으로 나타나거나 삭제시키는 행위를 하였을 때, 나는 기존에 css의 display 옵션으로 작동 기능을 구현하였다. 하지만 이렇게 해버리면 계속해서 웹페이지에 rendering이 된 상태로 remain하게 되는데, 이는 좋지 못한 코드이다. 따라서 DIV 영역 자체를 소스코드에서 비활성화 시켜 렌더링이 되지 않게 하도록, <{isShow && ( <div > .......... </div> )} 를 사용한다. 이러면 isShow함수가 false인 상태에서는 div태그 자체가 렌더링이 되지 않는다!