리액트 기본 과정 정리 - 3 [JSX]

이 글은 Velopert 님의 인프런 - 누구든지 하는 리액트 강의 를 참고하여 작성한 글입니다. 혹시 저작권 상의 문제가 발생할시에 내리도록 하겠습니다.

개요

리액트 강의를 듣고 기본 개념을 정리하고 기억하기 위해 작성하였습니다. 공부하시는 다른 분들께 도움이 되었으면 합니다.

 

컴포넌트 파일 파헤치기

JSX에 대해 알아보기 전에 리액트의 컴포넌트 파일에 대해서 먼저 알아봅니다.

지난 글에서 봤던 리액트 보일러 플레이트를 통해 프로젝트를 구성하면 대략 다음과 같은 구조로 만들어집니다.

 

 

리액트를 사용하면 여러분의 웹 애플리케이션에서 사용하는 유저 인터페이스를 재사용 가능한 컴포넌트로 분리하여 작성함으로서, 프로젝트의 유지보수성을 우수하게 해줍니다.

 

여기서 컴포넌트에 해당하는 코드는 App.js 에서 확인해볼 수 있습니다. 한번 볼까요?

 

 

상단의 코드부터 살펴보겠습니다.

 

import 한다는 것은, 무엇을 불러온다는 것입니다. 첫 번째 코드는 리액트와 그 내부의 Component 를 불러옵니다. 파일에서 JSX 를 사용하려면, 꼭 React 를 import 해주어야 합니다.

 

React를 import 하지 않을 경우 (오류 발생)

 

그 아래는 같은 디렉토리안에 있는 파일 logo.svg 와 App.css 를 불러왔습니다.

이렇게 import 하는 것은 우리가 Webpack 을 사용하기에 가능한 작업입니다. 이렇게 불러오고나면 나중에 프로젝트를 빌드하게 됐을 때 웹팩에서 파일의 확장자에 따라 다른 작업을 하게 됩니다. CSS 파일을 불러오게되면, 나중에 프로젝트에서 사용한 파일을 한 파일에 모두 결합해주는 작업을 진행하고, 자바스크립트 파일을 불러오게되면 모든 코드들이 제대로 로딩되게끔 순서를 설정하고 하나의 파일로 합쳐주죠. 규칙에 따라 여러 파일로 분리해서 저장하는것도 가능합니다. 그리고 svg 처럼 사전에 따로 설정되지 않은 확장자의 경우, 그냥 파일로서 불러온 다음 나중에 특정 경로에 사본을 만들어주게되고 해당 사본의 경로를 텍스트로 받아오게 됩니다.

 

그 다음으로 내려가봅니다.

 

 

컴포넌트를 만드는 방법은 두 가지가 있습니다.

하나는 위처럼 클래스를 통해서 만드는 것이고, 또 하나는 함수를 통하여 컴포넌트를 만드는 것입니다.

 

 

클래스 형태로 만들어진 컴포넌트에는 꼭 render 함수가 있어야 합니다. 그리고 그 내부에서는 JSX 를 return 해주어야 합니다. 위에 HTML 코드처럼 보이는 것이 바로 JSX 입니다.

 

마지막 줄에 있는 코드는 :

 

 

우리가 작성한 컴포넌트를 다른 곳에서 불러와서 사용할 수 있도록 내보내기를 해줍니다.

 

index.js 파일을 보면 다음 코드가 있습니다.

 

 

우리가 만든 컴포넌트를 불러올 때는 위의 코드처럼 import 를 사용해서 불러와줍니다.

 

 

그리고 브라우저 상에 우리의 리액트 컴포넌트를 보여주기 위해서 ReactDOM.render 함수를 사용합니다. 첫 번째 파라미터는 렌더링 할 결과물이고, 두 번째 파라미터는 컴포넌트를 어떤 DOM에 그릴지 정해줍니다.

 

id가 root 인 DOM을 찾아서 그리도록 설정이 되어있는데, 해당 DOM은 public/index.html 파일에서 찾아보실 수 있습니다.

 

해당 파일 안에 있는

 

 

를 찾아서 렌더링해주게 됩니다.

 

JSX

자, 이제 드디어 JSX 에 대해서 알아봅시다. 다음 코드를 볼까요?

 

 

왼쪽 코드가 JSX로 짜여진 코드이고 오른쪽은 자바스크립트로 변환된 코드입니다. JSX는 얼핏 보기에는 html 같죠? 그런데 html이 아닙니다. 자바스크립트 입니다.

 

JSX는 리액트 컴포넌트를 작성할 때 사용하는 문법으로, HTML과 비슷하지만 지켜야 할 규칙이 몇가지 있습니다.

• 꼭 닫혀야 하는 태그
• 감싸져 있는 엘리먼트

 

꼭 닫혀야 하는 태그

JSX를 사용할 때 태그는 꼭 닫혀있어야 합니다. 만약 닫는 태그 없이 사용하면 다음과 같이 에러가 발생합니다.

 

태그를 닫지 않는 경우 : 에러 발생

태그를 닫을 경우 : 정상 동작

 

감싸져 있는 엘리먼트

두개 이상의 엘리먼트는 무조건 하나의 엘리먼트로 감싸져있어야 합니다. 다음 코드를 보세요.

 

하나의 엘리먼트로 감싸지 않았을 때 : 에러 발생

 

오류가 발생하고 모든 태그가 두개 이상이 되면 무조건 하나의 태그로 감싸줘야 합니다.

 

하나의 엘리먼트로 감싸줬을 때 : 정상 동작

그런데 가끔 어떠한 상황에선 단순히 감싸기 위해서 div 태그를 사용하는 것이 불필요 할수도 있습니다.

예를 들어 스타일 관련 설정을 하면서 코드가 꼬일 수도 있고, table 관련 태그를 작성할 때 번거로울 수도 있습니다. 

그럴 때는 Fragment 를 사용해서 감싸줄 수 있습니다.

Fragment는 React 16.2 부터 도입되었으며 상단에서 Fragment 를 호출해주고 사용할 수 있습니다.

 

 

Fragment를 사용했을 때와 div 사용했을 때의 차이점은 실제 화면에 렌더링했을 때 div 태그가 추가로 생기냐, 안 생기느냐 입니다. 다음을 보세요

 

div 를 사용했을 때 : div 태그 생김

Fragment 를 사용했을 때 : 태그 안생김

 

JSX 안에서 자바스크립트 값 사용하기

JSX 안에서 자바스크립트 값을 사용하려면 다음과 같이 변수를 중괄호로 감싸면 사용할 수 있습니다.

 

 

조건부 렌더링

JSX 에서 조건부 렌더링을 하기 위해선 삼항 연산자나 AND 연산자를 사용해야 합니다. 반면 if 문은 바로 사용할 수 없습니다. 만약 사용한다면 IIFE로 사용을 해야합니다. 삼항 연산자를 사용한 코드를 볼게요.

 

삼항 연산자를 사용함

맞아요! 로 결과가 나옵니다. 삼항 연산자는 true 일 때와 false 일 때 다른 것들을 보여주고 싶을 때 사용합니다.

이제 AND 연산자를 사용한 코드를 보겠습니다.

 

AND 연산자를 사용함

AND 연산자는 단순히 true 일 때만 보여주고 false 일 때는 아무것도 보여주지 않을 때 사용합니다.

 

대부분의 상황에는 위 방식들로 해결할 수 있습니다, 그러나 조금 복잡한 조건을 작성해야 할 때가 있습니다.

그러한 조건들은 웬만하면 JSX 밖에서 로직을 작성하는 것이 좋습니다. 하지만 꼭 JSX 내부에서 작성을 해야한다면 IIFE(즉시 실행 함수, 함수를 선언하고 바로 호출)를 사용하면 됩니다. 다음 코드를 보세요.

 

IIFE 를 사용해서 if 문 작성

if 문 대신 switch 문으로도 작성할 수도 있습니다.

 

 

style과 className

JSX 에선 style과 css 클래스를 설정할 때, 일반 html에서 하는 것과 사뭇 다릅니다.

일반 html : 인라인 스타일 및 클래스 사용

위 사진에서 일반적인 html 에서 css 를 적용할 땐 인라인 스타일 또는 클래스를 사용해서 css 속성을 적용합니다.

 

JSX에서는 이와 다르게 객체 형태로 선언해서 사용을 하고, css 속성명 또한 카멜 케이스로 바꿔서 작성해줘야 합니다.

 

 

style 이란 객체를 선언하고 내부의 css 속성들을 카멜케이스로 입력, 그리고 값을 꼭 문자열로 설정합니다 (문자열로 적지 않으면 오류가 발생합니다) 그리고 특정 태그의 style에 style 객체를 중괄호로 묶어서 대입을 해주면 됩니다.

 

리액트 컴포넌트에서 클래스를 설정하게 될 때는 className을 사용합니다. class로도 써도 동작은 하지만 className으로 쓰는 것이 올바른 convention 입니다. 다음 코드를 보겠습니다.

 

App.css 파일

App 이라는 css 클래스 속성을 App.css 파일에 선언하였고 이제 이것을 사용하겠습니다.

 

 

먼저 css 파일을 사용하기 위해 App.css 파일을 불러옵니다.

그리고 css 속성을 사용할 태그에 className="App" 과 같이 작성하면 스타일이 적용된 것을 볼 수 있습니다.

 

 

주석

JSX 에서 주석을 작성하는 방법을 알아보겠습니다.

 

JSX 내부에서 일반 주석을 그대로 쓸 경우

js 내에선 일반 주석을 사용할 수 있지만, JSX 내부에서 일반 주석을 쓰는 방식대로 하면 주석처리가 되지 않고 그대로 그려집니다. 그래서 중괄호를 먼저 쓴 다음에 그 안에 주석을 작성합니다.

 

 

그리고 컴포넌트들을 여러 줄로 선언하게 될 때 주석을 작성해야되는 상황도 있습니다. 이 때는 태그 사이에 일반 주석을 작성하던 방식으로 쓰면 됩니다.

 

태그 사이에 주석을 작성

JSX 를 사용할 때 주의해야 하는 점들을 살펴보았습니다. 다음에는 컴포넌트에 전달해주는 값인 props 와, 컴포넌트가 내부적으로 가지고 있는 값인 state에 대해서 알아보겠습니다.