React의 메인 개념 : component

서론

React 자체를 너무 어렵게 접근할 필요는 없다. 리액트는 UI를 보다 쉽게 개발할 수 있도록 도와주는 자바스크립트 라이브러리다. 물론 Html, css, js로도 UI를 만들 수 있으나, 리액트를 사용하면 component라는 개념 덕분에 코드가 훨씬 깔끔하고 구현 난이도가 내려간다. 

 

Component란 무엇인가?

쉽게 말하자면, UI 상에서 다시 사용할 수 있는 building block이다. 단순히 표시해줘야하는 데이터만 바뀌고 UI는 그대로라면, 굳이 여러번 동일한 코드를 반복해서 작성할 필요 없이, 하나의 block을 만들고, 그 안의 데이터만 넘겨주는 방식이다.

Component 자체는 쉽게 말하자면, Html+js (+ css) 덩어리다. (css를 괄호처리한 이유는 리액트 상에서는 크게 중요한 개념이 아니라서다.) 각각의 UI 상에서 모든 걸 쪼개서 component로 구성할 수도 있다. 따라서 개발자는 UI를 구성하는 모든 요소를 쪼개서 component로 만든 뒤, 최종적으로 어떻게 UI를 그릴지 React에게 구성도를 던져주기만 하면 된다. (재사용성에 너무 집착할 필요는 없다.) 

 

Component 단위의 구성은 개발자에게 Reusability & Separation of Concerns를 제공한다.

불필요한 코드의 반복도 없고, 한 곳에서 지나치게 많은 요소를 관리할 필요도 없다. 각각의 component는 자신이 수행해야 하는 하나의 목표만 집중하면 되는 것이다.