리액트와 JSX 문법
JSX 문법은 리액트의 매우 훌륭한 기능 중 하나이다. 리액트에서 JSX 문법은 객체 생성과 함수 호출을 위한 문법적 편의를 제공한다. 먼저 아래 이미지를 보고 자세한 설명을 이어가겠다.
오른쪽 코드를 보면 충접된 React.createElement()가 여러 개 있다. 한 눈에 보기에도 복잡한 구조를 갖고 있으며, 직관적이지도 않고 가독성 또한 떨어진다. 하지만 오른쪽 코드 형태로 작성해도 리액트의 컴포넌트를 만들 수 있다.
왼쪽은 오른쪽 코드를 JSX 문법으로 변환시킨 코드이다. JSX 문법은 React.createElement()가 갖고 있는 문제를 해결하기 위해 등장했다. HTML처럼 보일 수도 있지만 실제로는 그렇지 않다. JSX 문법은 React 엘리먼트를 생성하면서 자바스크립트의 모든 기능을 사용할 수 있도록 도와준다.
JSX 문법은 HTML과 유사한 구조를 갖고 있어 직관적이고 사용하기 간편하다. 이 부분은 개발자마다 의견이 다를 수 있지만, HTML, CSS, 자바스크립트를 주로 다루는 필자 입장에서는 직관적으로 느껴졌다. 그럼 JSX 작성 방법과 주의점을 살펴보겠다.
1. JSX 문법은 닫힌 태그(?)가 필요하다.
앞에서도 언급했듯이 JSX 문법은 HTML 태그와 유사하게 작성할 수 있다. 단, 한 가지 차이점이 있다면 JSX는 무조건 닫힌 태그(?)가 존재해야 한다. <h1>, <div>, <HelloWorld /> 모두 닫힌 태그가 존재한다. 만약 <HelloWorld>로만 작성하면 에러가 발생한다.
2. 변수의 데이터를 전달할 수 있다.
JSX 문법은 중괄호 표기법을 사용하여 변수를 동적으로 출력할 수 있다. 자주 사용되는 작성법이니 꼭 기억해 두자.
3. CSS 적용하기
JSX 문법 안에서 스타일을 지정하는 방식은 CSS와 유사하다. 객체 형태로 값을 전달할 수도 있고, CSS Inline 방식과 유사하게 입력할 수도 있다. 단, background-color와 같은 하이픈이 들어간 속성은 backgroundColor와 같은 캐멀 케이스로 작성해야 한다. (자바스크립트는 케밥 케이스를 지원하지 않기 때문에 -(하이픈)을 사용할 수 없다. )
또는 링크 연결 방식과 유사하게 외부의 CSS 파일을 연동하여 디자인을 적용할 수도 있다. App.css 파일 안에 위 코드를 작성한다.
다음 App.js 파일 안에는 import './App.css'를 연결한 다음 className으로 해당 클래스명을 입력한다. HTML에서는 class 속성을 사용하지만, JSX 문법에서는 class 대신 className을 사용한다.
4. 주석 입력하는 방법
JSX에서 주석 처리를 할 때는 {/**/}를 사용한다. 또는 태그 안에도 //를 사용하여 주석을 삽입할 수 있다.
5. 리액트 컴포넌트 안에 메서드 생성하기
결과 화면클래스 컴포넌트 안에는 메서드를 생성하여 이를 동작시킬 수 있다. 앞에서도 언급했지만 메서드는 오직 클래스 컴포넌트에서만 입력이 가능하다.
화살표 함수가 아닌 일반 함수로 기능을 만들고 싶다면, 다음과 같이 bind()를 사용하여 this를 정의해주면 된다. ( 필자의 경우는 주로 화살표 함수를 사용한다. )
6. 조건부 처리 방법
중괄호 안에 삼항 연산자로 조건부를 처리할 수도 있다.
삼항 연산자 뿐 아니라 논리 연산자도 처리가 가능하다. 단, AND 연산자와 OR 연산자를 사용할 경우 결과값이 다르게 나타난다.
AND 연산자는 첫 조건이 true이면 뒤의 문장이 출력된다. OR 연산자는 AND 연산자의 반대로 첫 조건이 false이면 뒤의 문장이 출력된다.
이 방법 외에도 우리가 익히 알고 있는 IF 문을 사용할 수도 있다. 단, 중괄호 안에 IF 문을 바로 입력할 수는 없고, 즉시실행함수 형태로 작성해야 한다.
