React 메인 바꿔보기

1. JSX

 

React를 처음 설치하고 App.js에 들어가 보면 보이는 코드로 JSX(Javascript Syntax eXtension)으로 작성된것을 볼 수 있다. JSX는 React로 프로젝트를 진행할때만 사용되므로 공식적인 Javascript 문법은 아니며, Javascript와 html을 동시에 작성해 편리하며, 브라우저에 실행될 때 바벨을 사용 해 일반 자바스크립트 형태의 코드로 변환된다.

 

그 외 가장 큰 특징 2개를 더 알아보자면

 

1) 요소가 하나 이상이면, 반드시 부모 요소가 존재해야한다.

Virtual DOM을 사용하는 React 특성 상 컴포넌트 변화를 감지할 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM Tree 구조로 이루어져야한다는 규칙이 존재해 부모요소가 필요하다.

import './App.css';

function App() {
  return (
  	<div>hi</div>
  	<div>hello</div>
  );
}

export default App;

 

위에 코드는 부모 요소가 존재하지 않기때문에 에러가 발생하며

 

import './App.css';

function App() {
  return (
    <div>
      <div>hi</div>
      <div>hello</div>
    </div>
  );
}

export default App;

 

위처럼 부모 요소가 존재해야 정상적으로 실행

 

import './App.css';

function App() {
  return (
    <>
      <div>hi</div>
      <div>hello</div>
    </>
  );
}

export default App;

 

다음과 같이 빈 요소를 넣어도 정상적으로 실행된다.

 

2) Javascript 표현식

JSX안에서 Javascript 표현식을 사용할 수 있으며 JSX 내부에서 {}로 감싸주면 된다.

import './App.css';

function App() {
	const a = 'hello';
  return (
    <div>
      <div>hi</div>
      <div>{a}</div>
    </div>
  );
}

export default App;

 

위와 같이 코드를 작성하면 a대신 hello가 출력

 

2. jsx와 css 수정하기

 

npm start 한 상태에서 메인페이지에 들어가면 볼수있는 메인페이지며

 

 

페이지를 수정하기 위해서 App.js에 들어가 return안의 내용을 수정해 주면 된다.

 

import './App.css';

function App() {
  return (
    <div>
      <h1>안녕하세요.</h1>
      <p>메인페이지입니다.</p>
    </div>
  );
}

export default App;

 

App.js의 코드를 다음과 같이 수정 후 메인페이지에 들어가 확인해보면

 

 

메인페이지의 내용이 바뀐 것을 확인할 수 있다.

참고로 코드 수정 후 저장 시 페이지가 자동으로 새로고침 작업 결과물을 바로 확인해 볼 수 있다.

 

 

CSS 스타일을 적용 시키고 싶다면 App.css에 들어가 코드를 작성해주면 정상적으로 스타일이 적용된다.