21-22/21-22 리액트 마스터

[리액트를다루는기술]2장 JSX

Kimpeep 2021. 10. 4. 14:01
728x90

1. 코드 이해하기

import React from 'react';
  • 리액트를 불러와서 사용할 수 있게 해주는 코드
  • 리액트 프로젝트를 만들 때 node_modules라는 디렉터리도 함께 생성되는데, 프로젝트 생성 과정에서 node_modules 디렉터리에 react모듈이 설치된다.
  • 이로 인해 import 구문을 통해 리액트를 불러와 사용할 수 있게 된다.

▶ 번들러의 사용

  • 위처럼 모듈을 불러와 사용하는 것은 브라우저엔 없는 기능이며, Node.js에서 지원하는 기능이다.
  • 이런 기능을 브라우저에서 사용하기 위해 번들러(bundler)를 사용한다. 번들(bundel)은 묶는다는 뜻이며 파일을 묶듯이 연결한다.
  • 리액트는 웹팩 번들러를 사용한다.
  • 번들러 도구를 사용하면 import(또는 require)로 모듈을 불러왔을 때 불러온 모듈을 모두 합쳐서 하나의 파일을 생성해 준다. 최적화 과정에서 여러 개의 파일로 분리될 수도 있다.
  • 이 프로젝트에선 src/index.js를 시작으로 필요한 파일을 불러와 번들링하게 된다.
import logo from './logo.svg';
import './App.css';
  • 웹팩을 사용하면 SVG파일과 CSS파일도 불러와 사용할 수 있다.
  • 이렇게 파일들을 불러오는 것은 웹팩의 로더(loader)라는 기능이 담당한다.
  • 로더는 여러 종류가 있는데, css-loader는 CSS파일을 불러올 수 있게 해주고, file-loader는 웹 폰트나 미디어 파일 등을 불러올 수 있게 해 준다. babel-loader는 자바스크립트 파일들을 불러오면서 최신 자바스크립트 문법으로 작성된 코드를 바베링하는 도구를 사용하여 ES5문법으로 변환해 준다.
  • 웹팩의 로더는 원래 직접 설치하고 설정해야 하지만, CRA로 프로젝트를 만들면서 이런 번거로운 작업을 대신해 주었기 때문에 별도의 설정을 하지 않아도 된다.
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}
  • App이라는 컴포넌트를 만들어주는 코드이다.
  • function 키워드를 사용하여 컴포넌트를 만들었으며 이를 함수형 컴포넌트라고 부른다.
  • 함수에서 반환하는 내용을 보면 HTML을 작성한 것과 같지만, 실제로 이 코드는 HTML이 아닌 JSX이다.

2. JSX란?

JSX는 자바스크립트 확장 문법이다. JSX는 브라우저에서 실행되기 전에 코드가 번들링 되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.

▶ JSX코드 → 자바스크립트 형태의 코드로 변환

[JSX코드]

function App() {
	return(
		<div>
			<Hello <b>react</b>
		</div>
	);
}

[변환되는 자바스크립트 코드]

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

3. JSX의 장점

1. 보기 쉽고 익숙하다
→ 위의 JSX코드와 변환된 자바스크립트 코드를 보면 JSX코드가 더 가독성이 높고 작성하기 쉬움을 한눈에 알 수 있다.
2. 더욱 높은 활용도를 가지고 있다
→ src/index.js를 보면 알 수 있듯이 JSX에서는 <div>나 <span>과 같은 HTML 태그뿐만 아니라 앞으로 만들 컴포넌트들도 작성할 수 있다.

[참고를 위한 src/index.js코드]

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

4. JSX 문법

JSX 문법을 올바르게 사용하기 위한 몇 가지 규칙 알기
1. 컴포넌트에 여러 요소가 있다면 반드시 하나의 부모 요소로 감싸기
2. JSX 내부에서 자바스크립트 표현식을 작성하려면 코드를 { }로 감싸기
3. if 문 대신에 조건부 연산자(삼항 연산자) 사용하기
4. AND 연산자(&&)를 사용해 조건부 렌더링 하기
5. undefined 렌더링 하지 않기
6. DOM 요소에 스타일을 적용할 때는 문자열 형태가 아닌 객체 형태로 넣어주기(단, styled-component 형식보단 scss를 이용한 스타일 적용 추천)
7. class 대신 className 사용하기
8. 태그 꼭 닫아주기
9. JSX 내부의 주석은 {/* ··· */} 같은 형식으로 작성하기

※ const와 let, var

  • const : 변경이 불가능한 상수 선언(블록 단위)
  • let : 동적인 값을 담을 수 있는 변수 선언(블록 단위)
  • var : scope(해당 값을 사용할 수 있는 코드 영역) 함수 단위에서 변수 선언

5. ESLint와 Prettier 적용하기

1) ESLint 사용하기

에디터 하단에 [보기] - [문제] 탭을 클릭하여 경고 창 확인하기

2) Prettier 사용하기

[F1] 누르고 format이라 입력한 후 Enter!

- 변경 전

- 변경 후

3) 저장할 때 자동으로 코드 정리하기

[파일] - [기본 설정] - [설정] 메뉴 클릭하기

<2장 Quiz>

Q1) 리액트에서 주로 사용하는 번들러는 무엇일까요?

답 : (          )

 

Q2) JSX는 자바스크립트 문법인가요?(O, X 문제)

답 : (          )

 

Q3) 삼항 연산자 형식 적어보기! (조건은 비교문이라 표시, 참일 때는 A, 거짓일 때는 B로 표시)

답 : (          )

 

Q4) JSX에서는 class가 아닌 '이것'을 쓰는데요 '이것은 무엇일까요?

답 : (          )

 

Q5) 리액트에서 DOM 요소에 스타일을 적용할 때는 문자열이 아닌 객체 형태로 넣어줘야 합니다. 스타일 이름 중에서 background-color처럼 -문자가 포함되는 이름이 있는데, 리액트에선 -문자를 없애고 '이 표기법'으로 작성해야 합니다. 따라서 background-color는 ( )로 작성합니다. '이 표기법'은 무엇이며 괄호 안 또한 채워주세요.

답 : (          ), (          )

 

▼정답 확인하기

더보기

A1) 웹팩
A2) X, 확장된 문법입니다.
A3) 비교문?A:B
A4) className
A5) 카멜표기법, backgroundColor

 

728x90