React STEP 21 - Create React App - 3

⭐ Create React App

 

1. state 정의 하기

• App.js

import React, { Component } from 'react';
import SetState from './js/14_setState';
import './App.css';
 class App extends Component {
    render(){
        return (
            <div className="container">
                <h1>React Example</h1>
                <SetState></SetState>
            </div>
        );
    }
 }
export default App;

• SetState.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(document.getElementById('root'));

class SetState extends React.Component {
    constructor() {
        super();

        this.state = {
            comment: "Original State"
        }
    }

    modifyComment=() => {
        this.setState({
            comment: "Change State"
        });
    };
    render(){
        let buttonStyle={
            marginTop: 20,
            padding: 10,
            fontSize: 14,
            backgroundColor: "#999",
            color: "#fff",
            border: "none",
            cursor: "pointer"
        };
        return (
            <div>
                <p>{this.state.comment}</p>
                <button onClick={this.modifyComment} style={buttonStyle}>Modify Comment</button>
            </div>
        );
    }
}

export default SetState;

 

2. Fragments 이해하기

• 컴포넌트 단위로 태그를 return 할 때, HTML 태그로 전체를 감싸지 않으면 에러가 발생합니다.
• 이때 <Fragment> 태그로 감싸면 불필요한 HTML 태그를 추가하지 않고 사용할 수 있습니다.
• App.js

import React, { Component } from 'react';
import './App.css';
import Fragments from './js/15_fragments';
 class App extends Component {
    render(){
        return (
            <div className="container">
                <h1>React Example</h1>
                <Fragments></Fragments>
            </div>
        );
    }
 }
export default App;

• fragments.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(document.getElementById('root'));

class Fragments extends React.Component {
    render() {
        return (
            <Fragments>
                <p>P tag</p>
                <span>SPAN tag</span>
            </Fragments>
        )
    }
}

export default Fragments;