003. [코딩애플] [part1] React에서 사용하는 JSX 기초 문법

프로젝트 기본 준비

터미널에 밑의 명령어를 넣어서 실시간 미리보기를 웹 브라우저에 띄운 상태로 작업 시작한다.

npm start

App.js 파일 내에 있는 코드 중 가장 최상단의 div 하나만 남기고 다 지우면 됨.

JSX 문법 시작하기

HTML 만들기 (정확히는 JSX)

가장 최상단의 div 안에 HTML 태그를 입력하면 된다. 그런데 이것은 엄밀히 말하면 HTML이 아님. HTML은 .html이라는 파일에만 입력할 수 있고 이건 js 파일이기 때문에 자바스크립트에 HTML 마크업 언어를 입력하기 쉽게 만들어 주는 jsx라는 방식임. HTML과 거의 흡사하게 생겨 편리하지만 조금씩 차이점이 있음.

가장 큰 차이는 class를 선언할 때 class라고 속성을 만들면 안 되고, className이라고 속성을 만들어야 함. class는 자바스크립트에서 사용하는 class 문법의 키워드이기 때문에 중복됨.

CSS 수정하기

App.js 최상단에서 CSS파일을 import 하면 되는데 이미 초기 세팅에 되어 있음. 건드리지 않아도 됨.

import './App.css';

즉 CSS는 App.css에서 수정하면 됨.

그런데 HTML 내부에서 인라인으로 스타일을 지정할 땐 아래와 같이 하면 안 됨.

큰 따옴표 대신 {} 중괄호를 사용해야 함. 여기서 중괄호는 자바스크립트에서의 객체를 말하는 것이고, 객체를 입력할 때는 key: value 형태로 넣는데 value가 string 타입이면 그곳에 따옴표를 넣어주어야 함.

<!-- 전통적인 방식 -->
<h1 style="color: red">제목입니다.</h1>

// jsx에서 인라인 CSS 넣기
<h1 style={ {color: 'red', fontSize: '16px'} }>제목입니다.</h1>
// 원래 CSS는 `font-size`이지만 `-`은 자바스크립트에서 뺼셈을 의미 하기 때문에 jsx에서 HTML을 다룰 때는
// 이것을 빼고 camelCase 문법으로 작성해주면 됨.

변수를 넣을 땐 {} 중괄호 사용 (데이터 바인딩)

원래 자바스크립트에서 HTML 요소에 태그를 밀어 넣을 때는 innerHTML이라는 키워드를 사용해서 구현했음.

<!-- 전통적인 DOM 제어 방식 -->
<div>
    <h1 id="subtitle">제목입니다.</h1>
</div>

<script>
    const subtitle = document.getElementById('subtitle');
    subtitle.innerHTML = '오늘의 메뉴';
</script>

import logo from './logo.svg';
import './App.css';

// 변수가 있거나, fetch로 받아온 API가 있는 경우.
let subtitle = '오늘의 메뉴';

function App() {
  return (
    <div className="App">
    {/* 중괄호 안에 넣으면 바로 들어감. */}
        <h1 id="subtitle">{ post }</h1>
    </div>
  );
}

export default App;

중괄호는 단순히 innerHTML의 대체가 아니라 ID든 Class든 모든 곳에 사용 가능함.

const newId = "myId";

function App() {
  return (
    <div className="App">
        <h1 id="{ myId }}">{ post }</h1>
    </div>
  );
}

추가 학습 내용

JSX 주요 특징

1. 태그 문법 사용 : HTML과 유사한 태그를 사용함.
2. 자바스크립트 표현식 사용 가능 : {} 중괄호를 사용하여 JS 표현식을 JSX 내부에 포함시킬 수 있음.
3. 속성(Attribute)과 표현식 사용 가능 : HTML과 유사하게 JSX에서도 속성 정의 가능. 속성값은 자바스크립트 표현식으로도 사용 가능.
4. 조건부 렌더링 : JSX 내에서 조건문을 사용하여 특정 조건에 따라 다른 요소를 렌더링 할 수 있음.
5. 자식 정의 : 태그 내부에 다른 JSX 엘리먼트를 자식으로 포함할 수 있음.

주요 예제

기본 예제

const element = <h1>Hello, World!</h1>;

자바스크립트 표현식 포함하기

중괄호로 변수 참조 가능.

자바스크립트의 ${} 달러 사인과 유사하나, 자바스크립트 달러 사인은 자바스크립트에서만 사용 가능 했던 것인데, jsx는 jsx 내부에서 자바스크립트도 사용할 수 있고 HTML과 유사한 마크업 언어도 동시에 쓸 수 있음.

const name = '장원영';
const element = <h1>Hello, {name}!</h1>;

조건부 렌더링

const user = { name: '장원영' };
const element = <h1>Hello, {user.name ? user.name : '익명'}!</h1>

공식처럼 많이 사용하는 방법인 것 같은데,

삼항 연산자를 사용해서 값이 없으면 다른 처리를 하도록 위처럼 사용하기도 함.

속성과 자식 사용하기

const element = (
  <div> className = "container">
    <h1>안녕하세요!</h1>
    <p>이것은 문단입니다.</p>
  </div>
);

이벤트 핸들러 추가하기

// 함수 표현식으로 익명 함수에 액션을 담아
const handleClick = () => {
  alert('Button clicked!');
};

// jsx 내부에 `onClick`으로 추가함.
const button = <button onClick={handleClick}>Click me!</button>;

CSS 스타일링 (인라인, CSS 파일 아님)

jsx에서 직접 스타일링할 때를 이야기하며 인라인으로 CSS를 적용할 때의 예시이다.

jsx에서 CSS는 객체 형태로 작성한다.

따라서 value에 오는 것은 string이라면 '' 따옴표로 묶어줘야 한다.

자바스크립트처럼 camelCase 명명법으로 명명한다는 것도 차이다.

const elementStyle = {
  color: 'red',
  backgroundColor: 'black'
};

const element = <h1 style={elementStyle}>제목입니다.</h1>;