정의
const element = <div>Hello world!</div>위 element라는 변수는 JSX라는 문법으로 부르고,
Javascript의 문법 확장입니다.
JSX를 쓰는 이유
기존의 바닐라 자바스크립트에서는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 반면,
React는 마크업과 로직을 포함하는 컴포넌트로 불리는 유닛으로 관심사를 분리합니다.
컴포넌트란?
재사용 가능한 독립된 조각을 의미하며, 이미지에서 보이듯이 독립된 컴포넌트들을 조합하여
하나의 페이지를 구성할 수 있습니다.
1번, 2번, 3번, 4번 컴포넌트를 조합해 오른쪽에 보이는 페이지를 완성시키는 것이죠!
또한 하나의 페이지가 아닌, 여러 페이지에서도 재사용이 가능합니다.
관심사를 분리한다?
관심사의 분리는 정보를 잘 정의된 인터페이스가 있는 코드 부분 안에 캡슐화시킴으로써 달성한다.
관심사 분리를 이용하면 프로그램의 설계, 디플로이, 이용의 일부 관점에 더 높은 정도의 자유가 생긴다. 이 가운데 일반적인 것은 코드의 단순화 및 유지보수의 더 높은 수준의 자유이다. 관심사가 잘 분리될 때 독립적인 개발과 업그레이드 외에도 모듈 재사용을 위한 더 높은 정도의 자유가 있다. 모듈이 인터페이스 뒤에서 이러한 관심사의 세세한 부분을 숨기기 때문에 자유도가 높아짐으로써 다른 부분의 세세한 사항을 모르더라도, 또 해당 부분들에 상응하는 변경을 취하지 않더라도 하나의 관심사의 코드 부분을 개선하거나 수정할 수 있게 된다. 또, 모듈은 각기 다른 버전의 인터페이스를 노출할 수 있으며, 이를 통해 중간의 기능 손실 없이 단편적인 방식으로 복잡한 시스템을 업그레이드하는 자유도를 높여준다.
관심사를 분리하면 일반적으로 코드의 가독성을 높일 수 있고, 유지보수에 자유도가 생기는 이점을 얻을 수 있습니다.
지금까지 React에서 주로 사용되는 JSX 문법에 대해서 짧게 알아보았습니다.
앞으로 블로그에 글을 쓸 때에는 깊은 내용을 알아가기보다는 많은 내용을 빠르게 알아보겠습니다.
그리고 어느정도의 내용들이 머릿속에 들어온 뒤에, 더 깊은 주제들을 다루어보겠습니다.
