Week_2_4.md

2주차 - 4.JSX

JSX

JavaScript XML의 약자
Javascript에서 사용하는 HTML과 비슷하다.

특징

1. 태그 이름은 기존 HTML과 거의 유사하다.
2. Attributes나 css는 카멜 케이스를 사용한다. (className, textAlign)
3. Javascript코드를 활용하기 위해서는 { }를 이용한다.

JSX 사용해보기

이전과 동일하게 아래의 명령어를 사용해 React앱을 생성해줍니다.

npx create-react-app my-app

앱 생성이 완료되었다면 App.js파일을 아래와 같이 수정합니다.

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

function App() {
    return (
        <div className="App">
            <h1>Hello World!</h1>
            <h2>ReactJS 둘러보기</h2>
        </div>
    );
}

export default App;

h1 태그에 스타일 입혀보기

App.js에서 App함수를 아래와 같이 수정한다.

function App() {
    return (
        <div className="App">
            <h1 style={{ color: "red" }}>Hello World!</h1>
            <h2>ReactJS 둘러보기</h2>
        </div>
    );
}

style={{...}}에서 첫번째 중괄호는 JS코드가 들어간 다는 것을 의미를 갖고
그 안에있는 { color: "red }는 하나의 스타일 정보를 가지고 있는 Object다.

위와 같이 스타일이 잘 적용된 것을 확인할 수 있게되었다.
아래 처럼 직접 넣지 않고 밖에서 코드를 작성하여 넣을 수도 있다.

...
const headerStyle = {
    color: "red",
};

function App() {
    return (
        <div className="App">
            <h1 style={headerStyle}>Hello World!</h1>
            <h2>ReactJS 둘러보기</h2>
        </div>
    );
}
...

css에서의 font-weight과 같은 속성을 주기위해서는 카멜 케이스를 사용한다.

...
const headerStyle = {
    color: "red",
    fontWeight: 800
};
...

우리가 의도한 스타일이 잘 적용되었음을 개발자 도구로 확인할 수 있다.

h2태그에 클래스 지정해보기

위의 방식과 같이 style속성만 이용하다보면 코드가 복잡해질 가능성이 있다.
따라서 기존의 HTML에서 사용했던 방법과 동일하게 클래스를 사용할 수 있다.

function App() {
    return (
        <div className="App">
            <h1 style={headerStyle}>Hello World!</h1>
            <h2 className={"titleStyle"}>ReactJS 둘러보기</h2>
        </div>
    );
}

위와 같이 className이라는 속성을 주어 클래스를 지정할 수 있다.
클래스가 잘 지정되었는지 App.css에 아래의 코드를 추가한 후 새로고침 해보자.

.titleStyle {
    color: white;
    background-color: black;
}

우리가 지정한 titleStyle클래스에 css가 잘 적용된 것을 확인할 수 있다.