프로젝트 생성 시 만들어졌던 페이지를 수정해보자 


프로젝트

   src -> App.js 를 수정해보자


1
2
3
4
5
6
7
8
9
10
11
12
13
14
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
 
class App extends Component {
  render() {
    return (
     <h1>리액트를 시작해보자</h1>
     <h2>리액트</h2>
    );
  }
}
 
export default App;
cs


이렇게 하면 에러를 발생시킨다 ..


이유는 h1 , h2 두개의 요소가 1개의 부모 요소를 가지고 있지 않아서 에러를 발생시킨다 ..


그래서 div로 둘러준다 ~


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
 
class App extends Component {
  render() {
    return (
    <div>
      <h1>리액트를 시작해보자</h1>
      <h2>리액트</h2>
    </div>
    );
  }
}
 
export default App;
 
cs


그리고 yarn start 로 실행해보자



리액트 v16 이상에서는 Fragment컴포넌트가 추가되어  div로 감싸지 않고 여러 요소를 렌더링 하고싶다면


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import React, { Component , Fragment} from 'react';
import logo from './logo.svg';
import './App.css';
 
class App extends Component {
  render() {
    return (
    <Fragment>
      <h1>리액트를 시작해보자</h1>
      <h2>리액트</h2>
    </Fragment>
    );
  }
}
 
export default App;
cs


다음과 같이 작성해서 실행하면 된다.~




저작자표시 비영리

'웹 프론트엔드 > React' 카테고리의 다른 글

8. React / 리액트 (조건부 렌더링)  (0) 2018.10.23
7. React / 리액트 (JSX 에 스크립트식 표현하기)  (0) 2018.10.22
5. React / 리액트 ( ES5 와 ES6)  (0) 2018.10.21
4. React / 리액트 (webpack , 웹팩)  (0) 2018.10.21
3. React / 리액트 프로젝트 만들기  (0) 2018.10.21

+ Recent posts

티스토리툴바