[7주차] JSX와 Component

3월 2일 자 학습 내용 정리입니다.

 

 

✅ JSX

JSX는 함수 호출과 객체 생성을 위한 문법적 편의를 제공하는 JavaScript의 확장이다.
HTML과 비슷하나 엄연한 JavaScript이고 HTML의 문법과 다른 부분이 존재한다.

 

JSX는 JavaScript 함수 내에서 다음과 같이 표현된다.

 

const App = () => {
    return (
        <div>
            <h1>Title</h1>
            <p>Hello World!</p>
        </div>
    );
}

 

함수의 리턴 값으로 화면에 그려지길 원하는 요소들을 넣는 것이다.

이러한 JSX는 Babel에 의해 트랜스컴파일된다.

위 코드를 Babel을 통해 트랜스컴파일시키면 아래와 같다.

 

const App = () => {
  return /*#__PURE__*/React.createElement("div", null, 
      /*#__PURE__*/React.createElement("h1", null, "Title"), 
      /*#__PURE__*/React.createElement("p", null, "Hello World!")
  );
};

 

create react-app을 이용한 경우 이 과정은 자동으로 이루어진다.

 

JSX의 장점은 다음과 같다.

• 개발자 편의성 향상
• 협업 용이, 생산성 향상
• 문법 오류와 코드량 감소

 

 

✅ JSX의 특징

✔️ HTML 태그 내 JS 연산

JSX 사용 시 HTML 태그 내에서 JavaScript 연산이 바로 이루어질 수 있다.

 

<div id="sum"></div>

<script>
    const a = 3;
    const b = 6;
    document.getElementById("sum").innerHTML = `${a} + ${b} = ${a + b}`;
</script>

 

기존에는 HTML과 JavaScript를 이용해 위와 같이 작성해야 했다면 JSX를 이용해 다음과 같이 작성할 수 있다.

 

const App = () => {
    const a = 3;
    const b = 6;
    return <div>{a} + {b} = {a+b}</div>
}

 

HTML 태그 내에서 {} 중괄호 안에 해당하는 변수명을 넣으면 바로 해당 변수를 사용할 수 있다.

이는 JS 요소 모두 가능하다.

 

✔️ camelCase 표기

HTML 문법에서의 class가 JSX에서는 className으로 쓰이고 onclick은 onClick으로 쓰이는 등 HTML 문법과 다른 점이 존재한다.

 

import React from "react";
import "./style.css";

export default function App() {
  return (
    <div className='greeting'>
      <h1>Hello!</h1>
      <button onClick={() => {
        alert("Hi!");
      }}>Click me!</button>
    </div>
  );
}

 

기본적인 DOM Element(div, span 등)의 Attribute는 camelCase로 작성한다.

그러나 data- 또는 aria-로 시작하는 Attribute들은 예외이다.
이들은 camelCase를 적용하지 않고 그대로 적는다.

 

HTML의 Attribute와 같은 동작방식이지만 다른 이름을 가진 Attribute가 존재한다.

앞서 적었듯 HTML의 class는 JSX에서 className으로 쓰인다.

 

반대로 같은 이름이지만 다른 동작방식을 가진 Attribute가 존재한다.
예를 들어 HTML에서 checked 또는 value는 해당 값이 초기 값으로 쓰이지만 React 내에서는 현재 값을 의미한다.
React 내에서 초기 값의 의미로 checked 또는 value를 사용하려면 defaultChecked, defaultValue를 사용해야 한다.

 

또한 key와 같이 React에서만 쓰이는 새로운 Attribute도 존재한다.

 

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

export default function App() {
  const pokemon = [
    { id: 1, name: '파이리', type: '불' },
    { id: 2, name: '꼬부기', type: '물' },
    { id: 3, name: '이상해씨', type: '풀' },
  ];
  return (
    <div className="pokemon">
      {pokemon.map((p) => (
        <li key={p.id}>
          {p.name} - {p.type}
        </li>
      ))}
    </div>
  );
}

key는 React가 어떤 항목을 변경, 추가, 삭제할지 식별하는 것을 돕는다.
key는 element에 안정적인 고유성을 부여하기 위해 배열 내부 Element에 지정해야 한다.
key는 해당 배열 안의 각 요소들 사이에서 고유한 값을 가져야 한다.

 

✔️ style은 object로

const App = () => {
    return (
        <div style={{backgroundColor:'red', fontSize=16}}>
            <p>Hello World!</p>
        </div>
    );
}

 

JSX에서 style 속성은 object로 주어진다.

이때 중괄호가 두번 쓰이게 되어 혼동이 올 수 있는데 첫 번째 중괄호는 JSX 문법을 이용해 style을 부여하겠다라는 뜻이며 두 번째 중괄호는 object이다.

위와 같이 인라인으로 style을 부여할 경우 속성명은 camelCase로 적는다.

예를 들어 background-color를 backgroundColor로 적을 수 있다.

 

✔️ 닫는 태그는 필수

--- HTML ---
<div>
    <input type='text'>
    <br>
</div>


--- JSX ---
<div>
    <input type='text' />
    <br />
</div>

 

기존 HTML에서는 input과 br 등 닫는 태그를 생략해도 되는 태그들이 존재했다.

하지만 JSX에서는 이들을 사용할 경우 반드시 닫는 태그를 작성해야 한다.

 

✔️ 최상단 element는 반드시 하나

JSX에서 최상단 element는 반드시 하나만 존재해야 하기 때문에 아래의 경우 에러가 발생한다.

 

const App = () => {
    return (
        <div>HI</div> // Error!
        <div>Hello</div>
    );
}

 

위 에러를 해결하기 위해서는 두 div 태그를 div로 감싸주거나 React.Fragment를 사용한다.

 

const App = () => {
    return (
        <React.Fragment>
            <div>HI</div>
            <div>Hello</div>
        </React.Fragment>
    );
}

 

이처럼 React.Fragment를 사용하면 DOM에 별도의 노드를 추가하지 않고 여러 자식을 그룹화할 수 있다.

<React.Fragment></React.Fragment>는 간단하게 <></>로도 사용할 수 있다.

 

const App = () => {
    return (
        <>
            <div>HI</div>
            <div>Hello</div>
        </>
    );
}

 

 

✅ Component

컴포넌트(Component)는 React에서 페이지를 구성하는 최소 단위이고 클래스 컴포넌트(Class Component)와 함수 컴포넌트(Function Component)로 나뉜다.

 

// --- class component ---
class Pokemon extends Component {
    render() {
        const name = '파이리';
        return <div>선택한 포켓몬은 {name}입니다.</div>
    }
}


// --- function component ---
const Pokemon = () => {
    const name = '파이리';
    return <div>선택한 포켓몬은 {name}입니다.</div>
}

 

만들어진 컴포넌트는 다른 컴포넌트에서 자유롭게 활용할 수 있다.

즉, 모듈화가 가능하며 재사용성이 좋다.

다른 컴포넌트에서 사용할 경우 컴포넌트와 기존 HTML 태그를 구분할 필요가 있기 때문에 컴포넌트의 이름은 반드시 대문자로 시작해야 한다.

 

// --- Pokemon.js ---
const Pokemon = () => {
    const name = '파이리';
    return <div>선택한 포켓몬은 {name}입니다.</div>
}

export default Pokemon;

// --- App.js ---
import Pokemon from './Pokemon';

const App = () => {
    return (
        <div>
            <Pokemon />
        </div>
    );
}

export default App;

 

컴포넌트는 Props를 통해 데이터를 넘겨줄 수 있다.
Props는 컴포넌트의 attribute 부분에 작성된다.
컴포넌트 안에 작성된 하위 요소들을 children이라고 하는데 이들도 props 중 하나에 속한다.

 

// --- Pokemon.js ---
const Pokemon = (props) => {
    const { pick } = props;
    return (
        <div>
            선택한 포켓몬은 {pick.name}이며, 
            {pick.type}타입 포켓몬입니다.
        </div>
    );
}

export default Pokemon;

// --- App.js ---
import Pokemon from './Pokemon';

const App = () => {
    return (
        <div>
            <Pokemon pick={{name:'파이리', type: '불'}} />
        </div>
    );
}

export default App;

 

이때 Props는 부모 컴포넌트에서 자식 컴포넌트로만 전달될 수 있다.

 

 

🔍 참조

React.Fragment https://ko.reactjs.org/docs/fragments.html