"페이스북이 만들었는데 정작 페이스북은 왜..?"
React(이하 리액트로 표기) 는 스택 오버플로우의 2020 Developer Survey 의 most popular technoligies web framework 분야와 Most Loved, Dreaded, and Wanted Web Frameworks 분야에서 각각 2위를 차지했습니다. (라이브러리인데 왜 프레임워크에서...?)그만큼 많은 개발자들에게 선택받았다고도 할 수 있겠는데요.
하루 만에 리액트를 어떻게 다 알 수 있겠냐마는 그래도 짧게나마 접해본 리액트는 뭐랄까요, 조금 더 효율적으로 웹을 만들어가는 게 가능하지 않을까라는 생각을 하게 해줬습니다.
일단 리액트는 명시적인(explicit) 개발을 가능하게 합니다. 명시적이다는 말이 조금 어렵게 들릴 수 있지만, 보다 분명하다는 것으로 이해할 수 있습니다. 리액트는 HTML 과 Javascript 를 jsx 로 묶어 작성할 수 있기 때문에 보다 더 직관적으로 코드를 파악할 수 있죠.
여기에는 컴포넌트를 기반으로 하는 리액트의 특성이 크게 작용합니다. 컴포넌트는 어떤 기능의 구현을 목적으로 모인 코드의 집합이라고 할 수 있는데요. 유튜브를 예로 들자면 썸네일과 제목, 이름, 조회수, 게시일 등이 모여 "영상" 이라고 하는 하나의 컴포넌트를 구성하는 것이죠. 이렇게 구성된 컴포넌트는 쉽게 복제하여 사용할 수 있다는 장점이 있고, 독립적이기 때문에 다른 요소에 영향을 미치지 않게 됩니다.
jsx 를 활용할 때 기존의 문법에서 달라지는 부분들이 몇 가지 있습니다.
-
HTML element의 'class' 지정 시 'className' 을 사용한다.
-
Javascript 를 쓸 때 { } 를 이용합니다. jsx 는 자바스크립트 파일 안에서 마치 HTML 처럼 보이는 코드의 작성이 가능한 데, 이 때 엘리먼트 안에서 다시 javascript 를 사용할 때 { } 를 활용합니다.
-
직접 만든 컴포넌트의 이름은 대문자로 시작합니다.(Pascal Case)
-
조건부 렌더링을 위해 if 문 대신 삼항 연산자를 사용합니다. 삼항 연산자란,
조건 ? true일 때의 리턴 : false일 때의 리턴;
의 형태입니다. -
map() 를 활용해 여러개의 html 엘리먼트를 구성할 수 있습니다.
-
엘리먼트는 반드시 하나의 최상위 태그로 시작되어야 합니다.
더 많은 내용이 있겠지만 제가 오늘 배운 내용은 이 정도 입니다. 틀린 내용이 있을 수 있으니 확실한 것은 여러 다른 자료와 비교해가며 봐주시면 좋겠습니다. 나무위키에서도 4번 항목에서 jsx에 관해 설명하고 있으니 참고해보셔도 좋을 것 같습니다.
