2. JSX

2-1. 기초 2-2 JSX문법 최상위 부모요소는 1개 주석 태그에 클래스 넣기 + 스타일 적용하기 자바스크립트 사용하기 2-3. 실습

2-1. 기초

src에 있는 App.js를 수정하며 살펴보겠습니다.


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.js의 App()함수

html을 사용해 보셨다면 return() 안에 있는 내용들이 익숙할 거에요. 우리가 기본 js에서 위와 같은 방식으로 사용한다면 에러가 발생합니다. 하지만 위와 같은 방법을 사용하면 더 편하게 코드를 작성할 수 있습니다. 이렇게 코드를 편하게 작성하게 해주는 방법이 기존의 js를 확장한 jsx입니다. 이제 return 안의 구문을 싹 지우고 아래와 같이 수정해 보세요. 다뤄보도록 하겠습니다.


function App() {
  return (
    <h1>안녕, 라이캣!</h1>
  );
}

수정된 App()함수

코드를 수정한 후 터미널에서 npm start 명령어를 입력하여 실행해 봅시다.


npm start

2-2 JSX문법

최상위 부모요소는 1개

이번에는 h1 태그를 이용해 2개의 태그를 작성하고 저장해보겠습니다.


function App() {
  return (
			<h1>안녕, 라이캣 1호!</h1>
			<h1>안녕, 라이캣 2호!</h1>
  );
}

이런, 컴파일에 실패했군요! 문제가 있는 부분에 이렇게 알림을 주는데요.

jsx로 표현할 때에는 하나의 부모만 가질 수 있습니다. 즉, 최상위에는 한 개의 태그만 있어야 한다는 것입니다. 아래와 같이 코드를 수정하면 잘 실행되는 것을 확인할 수 있습니다.


function App() {
  return (
		<div>
			<h1>안녕, 라이캣 1호!</h1>
			<h1>안녕, 라이캣 2호!</h1>
		</div>
  );
}

수정된 App()

주석


function App() {
	//여기는 js할 때와 똑같이 주석을 입력합니다!
  return (
		<div>{/* 최상위태그는 하나만! */}
			{/* 여기부터는 jsx! 주석은 이런식으로 작성합니다~ */}
			<h1>안녕, 라이캣 1호</h1>
			<h1>
				안녕, 라이캣 2호!
			</h1>{/* 태그는 무조건 닫아줘야합니다! 안그러면 에러나와요! */}
			<div/>{/* 이런식으로 바로 닫히게 할 수도 있어요! */}
		</div>
  );
}

태그에 클래스 넣기 + 스타일 적용하기


import './App.css';

function App() {
  return (
		<div>
			<h1>안녕, 라이캣 1호</h1>
			<h1>안녕, 라이캣 2호!</h1>
			<div className="newClass"/> {/* class대신 className=""로 진행! */}
		</div>
  );
}

export default App;

자, 이번에는 위에서 작성한 div 태그에 스타일을 적용해 봅시다.

우선 만든 div에 클래스를 먼저 추가하겠습니다. 여기서 HTML에서와 달리 클래스를 추가할 때 jsx에서는 class라고 기재하지 않고 className이라고 표기하여 클래스를 정의합니다.

클래스를 추가해 주었다면 이제는 css 파일을 수정해 봅시다. 우선 App.css 파일을 열어봅시다. 안을 살펴보면 App.css도 기본으로 작성되어 있는 코드가 있습니다. 안에 있는 내용을 모두 지워준 후 아래 코드를 작성하면 됩니다. css는 기존에 우리가 작성했던 방식 그대로! 사용하면 됩니다.


.newClass{
  width: 100%;
  height: 20px;
  background-color: black;
}

저장 후 실행하면 위의 사진과 같이 '안녕, 라이캣 2호!' 하단에 검은색 줄이 생긴 모습을 보실 수 있습니다. css가 잘 적용되었네요! in-line 스타일로 적용하는 법도 살펴보겠습니다.

in-line 스타일로 적용할 때는 주의할 점이 있습니다. style을 정의할 때는 오브젝트 형태로 작성해야 하는데요! 오브젝트 형태는 아래와 같이 key와 value를 짝을 지어 작성합니다.


{
	"key":value,	
}

앞서 클래스 이름을 태그에 추가할 때 class="클래스이름" 형태가 아닌 className="클래스이름"으로 적었었죠?

이처럼 HTML과 또 다른 차이점이 존재합니다. 스타일을 정의할 때는 '-'를 사용할 수 없습니다. 그렇기 때문에 camelCase(단어를 대문자로구분)를 사용하여 작성합니다.

아래와 같이 backgournd-color 라고 작성하는 대신 backgroundColor 처럼 작성합니다.


<div style={{backgroundColor:"black", color:"white"}}></div>

비교해보세요.


<h1 style={{backgroundColor:"black", color:"white"}}>안녕, 라이캣 1호</h1>

<h1 style='background-color:black; color:white'>안녕, 라이캣 2호!</h1>


import './App.css';

function App() {
  return (
		<div>
			<h1 style={{backgroundColor:"black", color:"white"}}>안녕, 라이캣 1호</h1>
			<h1>안녕, 라이캣 2호!</h1>
			<div className="newClass"/>
		</div>
  );
}

export default App;

자바스크립트 사용하기

이번에는 자바스크립트에서 변수를 만들고 이 변수를 넣어보겠습니다. 어디서 작성하냐고요? jsx 문법 안에서 작성합니다. 어떻게? 는 이제 함께 확인해 보시죠!

자! 아래 코드를 작성해 주세요. 기존 return() 위에 const name = '라이캣!' 으로 변수 하나를 생성하고, return() 안 jsx 태그 안에 라이캣 대신 중괄호를 사용하여 name으로 변경합니다.


import './App.css';

function App() {
	const name = '라이캣!';
  return (
		<div>
			<h1 style={{backgroundColor:"black", color:"white"}}>
				안녕, {name} 1호
			</h1>
			<h1>안녕, 라이캣 2호!</h1>
			<div className="newClass"/>
		</div>
  );
}

export default App;

스타일도 변수에 넣어 사용할 수 있습니다. 첫번째 h1에 적용한 스타일을 someStyle 변수에 할당해 봅시다.


const someStyle = {backgroundColor:"black", color:"white"}

변수를 선언해 준 후 아래와 같이 style={somStyle} 을 추가하여 스타일을 적용합니다.


import './App.css';

function App() {
  const name = '라이캣!';
  const someStyle = {backgroundColor:"black", color:"white"};
  return (
    <div>
      <h1 style={someStyle}>
        안녕, {name} 1호
      </h1>
      <h1>안녕, 라이캣 2호!</h1>
    <div className="newClass"/>
  </div>
  );
}

export default App;

이 외에도 js에서 동작하는 기본적인 기능들을 활용하여 많은 것들을 할 수 있습니다. 이 부분은 뒤에서 더 살펴보도록 하겠습니다.

특히 데이터를 매핑하는 방법은 기존에 document.querySelector 등을 사용하여 선택자를 찾고, element.innerHTML 을 통해 값을 변경해주는 방법에 비해 매우 편리합니다. 그리고 이런 데이터를 넣어주는 것을 데이터바인딩이라고 합니다.

2-3. 실습

앞에서 배운 내용을 바탕으로 아래와 같은 UI를 추가해 보세요.

각 시간은 직접 입력(문자열로 타이핑)하지 않고 출력하게 만들어 주세요.

새로고침할 때마다 현재 시간을 표시합니다. Tip)자바스크립트에서 제공하는 Date 활용, 데이터바인딩 하기!

스타일도 적용해 보세요.

정답


import './App.css';

function App() {
	const name = '라이캣!';
  const someStyle = {backgroundColor:"black", color:"white"};
  const today = new Date();
  const year = today.getFullYear();
  const month = today.getMonth()+1;
  const date = today.getDate();
  const hour = today.getHours();
  const min = today.getMinutes();
  const sec = today.getSeconds();

  return (
    <div>
      <div>
        <h1 style={someStyle}>안녕, {name} 1호</h1>
        <h1>안녕, 라이캣 2호!</h1>
        <div className="newClass"/>
      </div>
      <div style={{backgroundColor:"black", color:"white"}}>
        <h1 style={{color:'red'}}>년 : {year}</h1>
        <h1>월/일 : {month}/{date}</h1>
        <h1>시간 : {hour}시 {min}분 {sec}초</h1>
      </div>
    </div>
  );
}

export default App;