[리액트스타터2] 2장. JSX

I. 코드 이해하기

1. import 구문

import React from 'react'; //react 모듈에서 React 컴포넌트를 불러오는 것

: 특정 파일을 불러오는 것으로, 모듈을 불러와서 사용하는 것은 원래 브라우저에는 없던 기능이며, 브라우저가 아닌 환경에서 JS를 실행할 수 있게 해주는 환경인 Node.js에서 지원하는 기능이다.  브라우저에서 사용하려면 번들러(bundler) 사용해야 한다.[ -> 파일을 묶듯이 연결]

 

- 번들러의 예시 : 웹팩, Parcel, browerify 등

-> 리액트 프로젝트에서는 주로 웹팩을 사용한다( ∵ 편의성과 확장성이 비교적 뛰어나다)

 

- 웹팩의 로더 - SVG/CSS 파일을 불러와서 사용한다 ( 별도의 설정이 필요없어 편리하다)

 

◎ 최신 JS로 작성된 코드를 변환하는 이유는 ?

>> 구 버전 웹 브라우저와의 호환을 위해서이다.

+) 리액트 컴포넌트에서 사용하는 JSX도 정식 JS 문법이 아니기 때문에 ES5(이전 버전)형태의 코드로 변환해야 한다!

 

2. 함수 컴포넌트

: function 키워드를 사용하여 만드는 컴포넌트이다.

 

(1) JSX

: 컴포넌트를 렌더링하면 함수에서 반환하고 있는 내용을 나타내는데, 이때의 코드는 HTML도, 문자열 템플릿도 아닌 JSX이다.

 

 II. JSX란 ?

>>JSX란 JS의 확장 문법이며, XML과 매우 비슷하게 생겼다.

(브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일단 JS 형태의 코드로 변환된다.)

function App () {
	return (
    	<div>
        	Hello <b> react </b>
        </div>
    );
}
//>>>
function App() {
return React.createElement("div",null,"Hello",React.createElement("b",null,"react"));
}

III. JSX의 장점

1. 보기 쉽고 익숙하다

> 가독성이 높고 작성이 더 쉽다

 

2.  활용도가 높다

> div나 span 같은 HTML 태그 사용 가능하다

(+ 컴포넌트 작성 가능하지만,  단 JSX 안에서만 사용 가능하다 )

 

(1) React.StrictMode 컴포넌트

: 앞으로 사라질 레거시 기능 사용 시 경고 + 앞으로 도입될 기능들이 정상적으로 호환될 수 있도록 유도하는 개발환경만 활성화되는 디버깅용 컴포넌트

 

IV. JSX 문법

> 편리하지만, 사용 시 준수해야 할 규칙이 있다!

 

1. 감싸인 요소

> 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 한다

<div>
<h1>리액트 안녕! </h1>
<h2>잘 작동하니? </h2>

왜 ? >> Virtual DOM에서 컴포넌트 변화를 감지해낼 때 효육적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문이다 !

 

**리액트 V16 이상에서는 div 요소 대신 Fragment 기능을 사용할 수 있다

import {Fragment} from 'react'; //추가하기

 

2. JS 표현

> JSX 안에서 JS 표현식 사용 가능하다. JSX 안에서 {...}로 감싸면 된다

const name = '리액트';
<h1>{name} 안녕! </h1>

 

Tip) 변수 선언 키워드

: 기본적으로 const를 사용하되, 값을 바꾸어야 할 때는 let을 사용하는 것이 좋다!

 

3. if문 대신 조건부 연산자

> JSX 내부에서는 if문 사용이 불가하다

대신, JSX 밖에서 if문을 사용해 사전에 값을 설정하거나, {...} 안에서 조건부 연산자(=삼항 연산자) 사용해야 한다.

{조건 ? 참일 때 실행 : 거짓일 때 실행 }

 

4. and 연산자(&&)를 사용한 조건부 렌더링

> 거짓일 때 실행하는 문장을 null로 하고 렌더링을 하면 아무것도 보여주지 않는다

{조건 && 참일 때 실행}

>> 리액트에서 false를 렌더링할 때 아무것도 나타나지 않기 때문에 &&연산자로 조건부 렌더링을 할 수 있다.

cf) 0은 예외적으로 화면에 나타남을 잊지 말 것!

 

5. undefined를 렌더링하지 않기

> 리액트 컴포넌트에서는 함수에서 undefined만 반환하여 렌더링하는 상황은 만들지 않아야 한다( >> 오류 발생)

만약 어떤 값이 undefined일 수 있다면, or(||) 연산자를 사용해 오류 방지가 가능하다

반면, JSX 내부에서 undefined를 렌더링하는 것은 가능하다

 

6. 인라인 스타일링

> 리액트에서 DOM 요소에 스타일을 적용할 때는 문자열 형태로 넣는 것이 아니라 객체 형태로 넣어주어야 한다.

 

+) '-'는 없애고 카멜 표기법으로 작성해야 한다!

background-color >> backgroundColor
font-size >> fontSize

 

7. class 대신 className

> 일반 HTML에서 css 클래스 사용 시, class 속성을 이용하지만, JSX에서는 className으로 설정해야 한다.

 

8. 꼭 닫아야 하는 태그

> HTML에서는 <input>, <br>, <hr> 등의 태그는 닫지 않아도 문제없이 작동하지만 JSX에서는 꼭 닫아야 한다.

*태그 사이에 별도의 내용이 들어가지 않는 경우

>>self-closing 태그 이용 ex) <input/> ; 태그 선언과 동시에 닫을 수 있다.

 

9. 주석

{/* ... */}

+) 시작 태그를 여러 줄로 작성할 때는 그 내부에서 //...와 같은 형태의 주석도 작성 가능하다.

 

V. ESLint와 Prettier 적용하기

(1) ESLint

: 문법 검사 도구

> 코드를 작성할 때 실수를 하면 에러 혹은 경고 메세지를 VS Code 에디터에서 바로 확인 가능하다.

+) 초록색 밑줄은 무시 가능하나, 빨간색 밑줄은 반드시 수정이 필요하다 !

 

(2) Prettier

: 코드 스타일 자동 정리 도구

> F1 ~> format 입력 ~> Enter 시,

Prettier를 사용하여 자동 코드 정리 + 세미콜론 자동 추가 + 작은 따옴표 > 큰 따옴표로 교체 등을 할 수 있다.

***스타일 커스터마이징 가능

=> 실행 프로젝트의 root 디렉터리에서 .prettierrc 파일 생성하여 쉽게 커스터마이징이 가능하다

 

QUIZ

1) (_________) 구문은 특정 파일을 불러오는 것을 의미한다.

2) 모듈을 불러와서 사용하는 기능을 브라우저에서 사용하기 위해서는 (_________)를 사용하며, 이는 파일을 묶듯이 연결하는 것을 의미한다.

3) 프로젝트에서 컴포넌트를 렌더링하면 함수에서 반환하고 있는 내용을 나타내는데, 이와 같은 코드를 (_______)라고 한다.

4) JSX 사용 시, 요소 여러 개가 부모 요소 하나에 의해 감싸져 있지 않으면 오류가 발생한다. ( o, x )

5) 리액트에서 DOM 요소에 스타일을 적용할 때는 문자열 형태로 넣는 것이 아니라 (________) 형태로 넣어야 한다.

6) HTML에서와 달리 JSX에서 CSS 클래스 사용 시에는 class가 아닌 (___________) 으로 설정해야 한다.

7) JSX에서의 주석 처리 방법은 HTML에서와 같은 방법이다.  ( o, x )

8) App 컴포넌트 함수 내부에서 style 객체를 미리 선언하고 div의 style 값으로 지정하는 코드를 작성하시오.(style 속성 - backgroundColor, color, fontSize)

9) div 요소 대신 Fragment를 이용해 App 컴포넌트 함수 내부를 수정하고, <h4>, <h6> 태그를 이용한 코드를 작성하시오.

 

 

answer

1) import

2) 번들러

3) JSX

4) o

5) 객체

6) className

7) x >> {/* ... */} 로 주석 처리

8) 예시 코드

function App () {
	const name = '리액트';
    const style = {
    	backgroundColor : 'black';
        color : 'aqua';
        fontSize : 16; //단위 생략할 경우 px
    };
    return <div style = {style}> {name} </div>;
}

export default App;

9) 예시 코드

import {Fragment} from 'react';
function App() {
return (
	<Fragment>
    <h4>리액트 스타터 2반 </h4>
    <h6>화이팅 ! </h6>
    </Fragment>
    );
}
export default App();

 

◎엘리