1. React
리액트는 모던 웹 에플리케이션 개발에 있어서 사용자 인터페이스를 개발하기 위한 자바스크립트 라이브러리이다. Angular나 Vue.js와 같은 프론트엔드 프레임워크들도 있지만 깃허브에서 star를 받은 프로젝트 수나 npm에서의 패키지 다운로드 수는 리액트가 훨씬 많아서 사실상 웹 프론트엔드 개발의 표준 언어라고 봐도 무방할 정도이다. 이 리액트의 가장 큰 특징이라고 한다면 웹 페이지의 실제 DOM의 복사본인 가상 DOM으로 상태의 변경을 감지해서 필요한 경우에만 실제 DOM을 업데이트 해서 효율적인 렌더링을 수행할 수 있다는 점과 컴포넌트라는 개념에 기반해서 페이지를 작은 단위로 나누어 관리함으로써 가독성과 유지 보수성을 향상시킨다는 점을 들 수 있다.
컴포넌트에 대해서 조금만 자세하게 설명한다면 하나의 기능이라던가 UI의 한 부분의 구현을 담당하고 있는 일련의 코드 묶음을 의미한다. 이 컴포넌트들을 계층적 구조로 결합해나가면서 복잡한 기능이나 UI를 제작하고 나아가서 하나의 페이지나 웹 어플리케이션을 구현하는 것이 사실상 리액트의 핵심적인 부분이라고 볼 수 있다. 리액트를 사용하지 않는 프로젝트에서 UI를 변경하는 경우 HTML 문서에서 구조를 바꾼 다음 연결된 CSS 코드들을 수정하고 그에 맞게 다시 DOM을 조작하는 자바스크립트 로직을 수정해야 했다. 그러나 리액트가 도입되고 컴토넌트 단위의 개발이 대두되면서 이제는 컴포넌트들의 위치만 바꿔주면 되기 때문에 유지보수성가 쉽고 생산성이 높아지게 되었다. 이번 포스트에서는 그런 리액트를 사용할 때 거의 필수적으로 활용되는 JSX 문법에 알아보려고 한다.
2. JSX
JSX란 JavaScript XML의 줄임말로 리액트를 사용할 때 필요한 자바스크립트 확장 문법이다. 안타깝게도 JSX 문법이 적용된 자바스크립트 파일은 브라우저에서 바로 실행할 수 있는 것은 아니고 Babel을 사용해야 한다. Babel은 자바스크립트 파일을 원하는 버전으로 변환해주는 도구로 예를 들어 최신 자바스크립트 문법을 사용한 코드를 특정 버전의 자바스크립트 코드로 변환해주는 트랜스파일러이며 JSX 문법이 적용된 코드 역시 브라우저에서 해석할 수 있는 자바스크립트 버전으로 컴파일해줄 수 있다. 이런 추가적인 작업을 요하는 문법을 굳이 사용하는 이유는 이것을 사용하면 HTML 문서와 자바스크립트 파일을 하나의 파일로 합칠 수 있기 때문이다. 그래서 컴포넌트의 구조와 기능을 하나의 파일에서 작성하고 관리할 수 있게 되면서 훨씬 명시적인 코드를 작성할 수 있게 하기 때문이다. 이런 이유 때문에 DOM을 설명하면서 최근에는 DOM 직접 조작하는 코드를 사용할 일이 거의 없다고 했던 것이다.
간단하게 JSX 문법으로 작성한 예시를 보도록 하자.
위의 예시에서 살펴볼 수 있듯이 JSX를 사용한다면 자바스크립트 파일 안에서 HTML 문서에서 사용하던 요소가 쓰이고 있으며 이 때문에 구조와 기능을 한 번에 확인할 수 있다는 것이다. 사실 JSX 문법을 사용하지 않고도 리액트를 사용할 수 있기는 하다. 위의 예시에도 JSX 문법을 사용하지 않고 리액트 요소를 만드는 예시를 작성했는데 매번 외부 라이브러리의 메서드를 호출해서 리액트 요소를 만들어야 하기 때문에 훨씬 복잡해서 개발자가 작성하기도 힘들고 가독성도 떨어진다는 것을 느낄 수 있을 것이다.
JSX 문법에서 HTML 요소를 사용하는 방법은 HTML 문서와 거의 똑같긴 하지만 몇 가지 차이점도 있다.
우선 아예 지키지 않으면 에러가 발생하는 부분부터 알아보자. 여러 요소를 작성하려고 한다면 가장 최상단에 이것을 하나로 묶는 태그가 존재해야 한다는 점이 있다. 이는 JSX는 내부적으로 단일 요소로 구성된 가상 DOM 트리를 생성해야하기 때문이다. 예시에선 div 태그를 사용했지만 하나로 묶는 부모 요소가 실제 렌더링되는 상황에서 불필요하다면 부모 요소로 React.Fragment를 사용할 수도 있다. 아예 태그처럼 <React.Fragment>라고 적어도 되며 단축 형인 빈 태그 (<>)를 사용해도 된다.
다음으로는 에러를 발생시키지는 않지만 의도한대로 동작하지 않아서 버그를 발생시킬 수 있는 부분이다. 클래스 특성을 사용해야 할 때 class가 아닌 className으로 적어야 한다. 그냥 class라고 적는다면 리액트에서는 이것을 HTML의 클래스 특성이 아닌 자바스크립트의 클래스로 인식한다. 자바스크립트 코드를 중간에 사용하고 싶다면 중괄호({})로 묶어야 제대로 인식한다. 중괄호로 묶지 않는다면 일반 텍스트로 인식하고 그 코드 자체를 그대로 출력해버린다. 사용자 정의 컴포넌트를 사용하고 싶다면 선언할 때부터 대문자로 시작해야한다. 만약 소문자로 시작한다면 그것을 일반적인 HTML 요소로 인식하게 되서 사용자 정의 컴포넌트를 제대로 불러오지 못한다. 특정 요소를 조건부로 렌더링을 해야하는 경우도 있을 수 있는데 JSX 문법을 사용할 때는 if문은 사용할 수 없다. 따라서 일반적으로는 삼항연산자를 사용해서 분기를 구현하고 있으며 AND 연산자(& ) 또한 앞의 조건이 거짓이라면 뒤의 조건은 아예 넘어간다는 점을 활용해서 조건부 렌더링에 활용할 수도 있다.
3. map
이것도 일종의 팁에 가까운 요소인데 자세한 설명이 필요하기 때문에 분리해서 설명하려고 한다. 보통 여러 개의 비슷한 요소를 표현해야 할 때가 많이 있는데 리액트는 HTML과 같은 마크업 언어가 아니라 프로그래밍 언어인 자바스크립트의 라이브러리이기 때문에 일일이 다 작성할 필요 없이 보통은 map함수를 활용하게 된다. 여기서 map은 새로운 메서드는 아니고 고차 함수에 대해서 설명할 때 언급했던 자바스크립트 내장 고차 함수로 배열의 각 요소에 특정 함수를 적용한 결과를 새로운 배열로 반환하던 그 메서드이다. 위의 예시에서처럼 map 메서드의 결과를 변수로 추출해서 리턴문 안에 넣던지 혹은 map 메서드 자체를 중괄호 안에 넣어서 인라인으로 넣는 것 또한 가능하다.
중요한 점은 리액트에서 map 메서드를 사용해서 여러 요소를 출력하려고 할 때는 key 속성을 넣는 것이 좋다는 것이다. key 속성을 넣지 않는 경우 에러가 발생하지는 않지고 정상적으로 렌더링되는 것으로 보이지만 콘솔에 경고문이 계속해서 출력될 것이다. 이런 경고문을 띄우는 이유는 리액트가 컴포넌트를 업데이트할 때 예전과 현재의 가상 DOM을 비교해서 변경된 사항을 식별하는데 이때 key 속성으로 각 요소를 고유하게 식별하고 추적하기 때문이다. key 속성을 부여하지 않아도 리액트에서 자동으로 배열의 인덱스를 기본 키로 사용하기는 하지만 이는 고유한 식별자라는 보장이 없으므로 예를 들어 동일한 컴포넌트의 배열에서 요소를 삭제하는 경우 인덱스가 바뀔 것이기 때문에 리액트는 이를 새로운 요소를 추가한다고 인식하고 컴포넌트의 상태를 잘못 업데이트하는 등의 예상치 못한 결과를 초래할 수 있다. 따라서 순차적이고 간단한 번호(1,2,3,4...)를 사용해도 좋고 고유성을 보장하기 위해서 애초에 DB에서 보낸 데이터의 고유 ID가 있다면 이것을 key 값을 사용하는 것이 최선이다.
4. CRA
CRA는 Create React App의 줄임말로 따로 설정 과정을 진행하지 않고 리액트 어플리케이션을 개발할 환경을 바로 구성해주는 도구이다. 위에서 언급했던 Babel 외에도 Webpack, ESLint 등과 같이 리액트 어플리케이션을 위한 도구들이 자동으로 구성되어서 편리하며 기본적인 프로젝트 템플릿을 제공하기 때문에 이것을 기반으로 프로젝트를 작성해나갈 수 있다. 또한 개발을 위한 로컬 개발 서버를 자동으로 실행하고 개발 서버에서는 코드 변경 감지와 핫 리로딩을 지원해서 변경 사항을 실시간으로 반영해서 개발자가 빠르게 결과물을 확인할 수도 있고 빌드한 결과물을 정적 파일로 생성하고 번들링, 코드 압축 등의 작업을 자동으로 수행해서 배포를 위한 최적화 작업도 자동으로 수행한다. 그래서 Node.js라는 준비물만 있다면 리액트 어플리케이션 개발 환경 구성에 있어서 세부사항을 따로 변경할 필요가 없을 경우 매우 빠르고 편리하게 개발 환경을 구축할 수 있다. 사용방법 또한 매우 간단한데 터미널에서 원하는 위치로 간 뒤에 다음과 같은 명령어를 입력하면 된다.
npx create-react-app (이름)그러면 원하는 위치에 필요한 패키지가 전부 설치된 지정한 이름의 폴더가 생성되고 해당 폴더로 가서 npm start 명령어를 입력하면 개발 서버까지 쉽게 시작할 수 있다.
이처럼 CRA를 사용한다면 복잡할 수 있는 초기 설정과 구성 부분을 뛰어넘고 기본적인 개발 환경을 빠르게 구축할 수 있다.
