<리액트를 다루는 기술> 2장: JSX

INDEX

2장 JSX

● 2.1 코드 이해하기

● 2.2 JSX란?

● 2.3 JSX의 장점

● 2.4 JSX 문법

● 2.5 ESLint와 Prettier적용하기

● 정리

 

---

● 2.1 코드 이해하기

import React from 'react';

프로젝트 생성 과정에서 node_modules 디렉터리에 react 모듈이 설치된다.

import구분을 통해 리액트를 불러와서 사용 가능하다.

 

*Node.js에서는 import대신 require을 사용한다.

번들러: 파일을 묶는다.

번들러를 사용하면 import로 모듈을 불러왔을 때 불러온 모듈을 모두 합쳐서 하나의 파일을 생성해 준다.

-리액트에서는 주로 웹팩을 사용한다. (편의성, 확장성)

 

로더:파일을 불러온다.

*css-loader, file-loader, bavel-loader 등이 있다.

 

'프로젝트에서 컴포넌트를 렌더링한다'라는 것은 함수에서 반환하고 있는 내용을 보여준다는 의미

(여기에서 렌더링이란 보여준다는 것을 의미한다.)

 

---

● 2.2 JSX란?

JSX는 무엇일까?

JSX는 자바스크립트의 확장 문법이며 XML과 매우 비슷하게 생겼다.

 

코드를 작성하면 브라우저에 실행되기 전에 코드가 번들링되는 과정을 통해서 바벨을 사용하여 일반적인 자바스크립트의 형태로 변환된다.

*변환 전

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

*변환 후

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

---

● 2.3 JSX의 장점

1. 보기 쉽고 익숙하다.

위의 코드를 보면 가독성이 더 좋다는 것을 알 수 있다.

2. 더욱 높은 활용도

단순히 div, span 등을 사용할 수 있을 뿐만 아니라 컴포넌트도 JSX 안에 만들 수 있다.

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')
);

---

● 2.4 JSX 문법

1. 감싸인 요소

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

import React from 'react';

function App() {
  return (
    <h1>리액트 안녕!</h1>
    <h2>잘 작동하니?</h2>
  );
}

export default App;

위 코드를 작성한 후 웹 브라우저를 열면 오류가 나타난다.

-감싸지 않았기 때문이다.

import React from 'react';

function App() {
  return (
    <div>
      <h1>리액트 안녕!</h1>
      <h2>잘 작동하니?</h2>
    </div>
    
  );
}

export default App;

왜 하나로 감싸야 할까?

 

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

 

div 말고도 밑과 같은 방법들이 있다.

import React, {Fragment} from 'react';

function App() {
  return (
    <Fragment>
      <h1>리액트 안녕!</h1>
      <h2>잘 작동하니?</h2>
    </Fragment>
    
  );
}

export default App;

 

import React from 'react';

function App() {
  return (
    <>
      <h1>리액트 안녕!</h1>
      <h2>잘 작동하니?</h2>
    </>
    
  );
}

export default App;

 

2. 자바스크립트 표현

자바스크립트 표현식을 작성하려면 JSX 내부에서 코드를 { }로 감싸면 된다.

import React from 'react';

function App() {
  const name='리액트';

  return (
    <>
     <h1>{name} 안녕!</h1>
     <h2>잘 작동하니?</h2>
    </>
  )
}

export default App;

 

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

JSX 내부에서는 자바스크립트 표현식에서 사용하는 if문을 사용할 수 없다.

조건에 따라 다른 내용을 렌더링 해야할 때는 JSX 밖에서 사전에 값을 설정하거나, { } 안에 조건부 연산자를 사용하면 된다.

*여기에서 조건부 연산자는 삼항 연산자를 말한다.

import React from 'react';

function App() {
  const name='리액트';

  return (
    <div>
      {name==='리액트' ? (
        <h1>리액트 입니다.</h1>
      ) : (
        <h2>리액트가 아닙니다.</h2>
      )}
    </div>
  )
}

export default App;

 

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

특정 조건을 만족할 때 내용을 보여주고, 만족하지 않을 때 아예 아무것도 렌더링 되지 않게 해야되는 경우

import React from 'react';

function App() {
  const name='리액트';

  return (
    <div>
      {name==='리액트' ? <h1>리액트 입니다.</h1> : null}
    </div>
  )
}

export default App;

 

import React from 'react';

function App() {
  const name='리액트';

  return (
    <div>
      {name === '리액트' && <h1>리액트 입니다.</h1>}
    </div>
  )
}

export default App;

- && 연산자로 조건부 렌더링을 할 수 있는 이유는 리액트에서 false를 렌더링 할 때는 null과 마찬가지로 아무것도 나타나지 않기 때문이다.

-하지만 falsy한 값인 0은 예외이다.

 

const number=0;
return number && <div>내용</div>

 

5. undefined 를 렌더링하지 않기

리액트 컴포넌트에서는 함수에서 undefined만 반환하여 렌더링하면 안된다.

***React의 render 함수는 React element, null 그리고 false만 반환할 수 있어서 위와 같이 undefined가 반환되면 예외가 발생한다

*OR(||)연산자 이용

import React from 'react';
import './App.css';

function App() {
  const name=undefined;
  return name || '값이 undefined 입니다.';
}

export default App;

*JSX 내부에서 undefined 렌더링

import React from 'react';
import './App.css';

function App() {
  const name=undefined;
  return <div>{name}</div>
}

export default App;

* name 값이 undefiined 일 때 보여주고 싶은 문구가 있다면

import React from 'react';
import './App.css';

function App() {
  const name=undefined;
  return <div>{name || '리액트'}</div>
}

export default App;

 

6. 인라인 스타일링

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

또한, 카멜 표기법으로 적어주어야 한다. (background-color->backgroundColor)

 

-style 객체를 미리 선언하고 div 의 style값으로 지정하는 경우

import React from 'react';

function App() {
  const name='리액트';
  const style={
    background:'aqua',
    color:'black',
    fontSize:'48px',
    fontWeight:'bold',
    padding:16,
  };
  return <div style={style}>{name} </div>
}

export default App;

 

-미리 선언하지 않는 방법

import React from 'react';

function App() {
  const name='리액트';
  return (
    <div
    style={{
      background:'aqua',
      color:'black',
      fontSize:'48px',
      fontWeight:'bold',
      padding:16,
    }}
    >
      {name}
    </div>
  );
}

export default App;

 

7. class 대신 className

일반적으로 HTML에서 CSS를 사용할 때는 class라는 속성을 설정한다,

하지만, JSX에서는 class가 아닌 className을 사용해야 한다.

.react {
  background:aqua;
  color:black;
  font-size:48px;
  font-weight:'bold';
  padding:16px;
}

-App.css 를 불러온 후 div 요소에 className 값을 지정한다.

**class로 해도 스타일이 적용되기는 하지만 개발자 도구로 열어볼 경우 오류가 생긴것을 확인할 수 있다..

import React from 'react';
import './App.css'

function App() {
  const name='리액트';
  return <div className="react">{name}</div>;
}

export default App;

 

8. 꼭 닫아야 하는 태그

HTML과 비교해 보자면 HTML에서는 <input>, <br>등의 일부 태그는 열기만 하고 닫지 않아도 정상적으로 작동한다.

하지만, JSX는 태그를 닫지 않으면 오류가 발생한다.

import React from 'react';
import './App.css'

function App() {
  const name='리액트';
  return (
    <>
    <div className="react">{name}</div>
    </>
  );
}

export default App;

태그 사이에 별도의 내용이 들어가지 않은 경우에는 self-closing 태그를 사용할 수 있다.

**self-closing 태그란 태그를 선언하면서 동시에 닫을 수 있는 태그를 말한다.

import React from 'react';
import './App.css'

function App() {
  const name='리액트';
  return (
    <input>
    <div className="react">{name}</div>
    <input/>
    </>
  );
}

export default App;

 

9. 주석

일반적인 자바스크립트와 차이가 있다.  코드를 통해 차이를 알아보자.

import React from 'react';
import './App.css'

function App() {
  const name='리액트';
  return (
    <>
    {/*주석은 이렇게 작성합니다*/}
    <div className="react">{name}</div>
    //하지만 이런 주석이나
    /*이런 주석은 페이지에 그대로 나타나게 됩니다*/
    <input/>
  );
}

export default App;

주석을 작성할 때는 {/* .......*/} 형태로 작성을 한다.

---

● 2.5 ESLint 와 Prettier 적용하기

1. ESLint

ESLint는 문법 검사 도구이다.

 

에디터 상단 메뉴에서 보기>문제를 클릭하면 에디터 하단에 문제 탭을 열 수 있다.

-빨간 줄이 있는 코드는 반드시 고쳐야 한다.

-초록색 줄이 있는 코드는 무시해도 괜찮다.

 

2. Prettier

Prettier은 코드 스타일 자동 정리 도구이다.

 

VS Code에서 F1을 누르고 format을 입력하면 Prettier을 사용하여 자동으로 코드가 정리된다.

 

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

VS Code에서 파일>기본설정>설정 메뉴를 클릭한 다음 format on save를 클릭하면 저장할 떄마다 코드가 자동으로 정리되게 설정이 가능하다.

---

● 정리

Quiz

1. (       )를 사용하면 import로 모듈을 불러왔을 때 불러온 모듈을 모두 합쳐서 하나의 파일을 생성해 준다.

2. '프로젝트에서 컴포넌트를 렌더링한다'라는 것은 함수에서 반환하고 있는 내용을 보여준다는 의미이다. 여기에서 렌더링이란 (        )라는 의미를 가지고 있다.

3. 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 한다. 그 이유는 Virtual DOM에서 컴포넌트의 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 (            )로 이루어져야 한다는 규칙이 있기 때문이다.

4. 리액트에서 DOM 요소에 스타일을 적용할 때는 (        ) 형태가 아닌 (        ) 형태로 넣어 주어야 한다.

5.  일반적으로 HTML에서 CSS를 사용할 때는 class라는 속성을 설정한다,

하지만, JSX에서는 class가 아닌 (       )을 사용해야 한다.

6. 태그 사이에 별도의 내용이 들어가지 않은 경우에는 (       )태그를 사용할 수 있다.

7. (     )는 문법 검사 도구이다. (     )은 코드 스타일 자동 정리 도구이다.

 

코드 Quiz

1. 주어진 코드를 AND(&&) 연산자를 사용하여 더 간단하게 변형시켜 보세요.

import React from 'react';

function App() {
  const name='컴퓨터공학';

  return (
    <div>
      {name==='컴퓨터공학' ? <h1>컴퓨터공학 입니다.</h1> : null}
    </div>
  )
}

export default App;

2. 주어진 코드에 style을 css파일에 작성해보고 className을 이용해서 같은 결과가 나오게 변형해보세요.

import React from 'react';

function App() {
  const name='컴퓨터공학';
  const style={
    background:'pink',
    color:'black',
    fontSize:'50px',
    fontWeight:'bold',
    padding:16,
  };
  return <div style={style}>{name} </div>
}

export default App;

---

Corner React Starter #2

Editor 성민