React STEP 25 - 기본 구조 사용하기

⭐ React 기본 구조

• HTML : 컴포넌트 방식으로 로딩합니다.
• CSS : import 방식으로 로딩합니다.
• Script: 생명주기 함수로 스크립트 작업을 할 수 있습니다.

 

1. Form 형식 페이지

• 기본 사용 Form 페이지, title, description, form 각각의 컴포넌트로 분리 및 사용
• App.js

import React, { Component } from 'react';
import './App.css';
import './css/basic1.css';
import Component1 from './js2/Component1_1';
import Component2 from './js2/Component1_2';
import Component3 from './js2/Component1_3';

 class App extends Component {
    constructor(){
		super();

		this.state={
			title: "Contact Me",
			description: "Integer eu ante ornare amet commetus vestibulum blandit integer in curae ac faucibus integer non. Adipiscing cubilia elementum integer. Integer eu ante ornare amet commetus."
		};
	}

	render(){
		return(
			<div className="container">
				<section id="contact">
					<Component1 propsValue={this.state.title} />
					<Component2 propsValue={this.state.description} />
					<Component3 />
				</section>
			</div>
		);
	}
 }

 export default App;

• Component1_1.js ~ Component1_3.js

import React, { Component } from 'react';

class Component1_1 extends React.Component {
    render() {
        return (
            <h2>{this.props.propsValue}</h2>
        );
    }
}

export default Component1_1;

import React, { Component } from 'react';

class Component1_2 extends Component {
    render() {
        return (
            <p>{this.props.propsValue}</p>
        );
    }
}

export default Component1_2;

import React, { Component } from 'react';

class Component1_3 extends Component {
    render() {
        return (
            <form>
                <input type="text" placeholder='Name' className='name' />
                <input type="email" placeholder="Email" className="email" />
				<input type="text" placeholder="Subject" className="subject" />
				<textarea placeholder="Message" className="message" />
				<input type="submit" value="Send Message" />
				<input type="reset" value="Reset Form" />
            </form>
        );
    }
}

export default Component1_3;

 

• 결과

 

2. 푸터 사용하기

• 기본 사용 Footer : List 형식으로 요소들을 state를 사용하여 동적 반영
• App.js

import React, { Component } from 'react';
import './App.css';
import './css/basic2.css';
import Component1 from './js2/step2/Component2_1';
import Component2 from './js2/step2/Component2_2';
import Component3 from './js2/step2/Component2_3';

 class App extends Component {
    constructor(){
		super();

		this.state={
			logo: "React Example",
            navigation: [
                {menu : "Tutorials"},
                {menu : "Referenece"},
                {menu : "Example"}
            ],
            sns: [
                {icon: "facebook"},
                {icon: "twitter"},
                {icon: "google-plus"}
            ]
		};
	}

	render(){
		return(
			<section className="main">
				<footer>
					<div className="wrap">
						<Component1 propsValue={this.state.logo} />
						<Component2 propsValue={this.state.navigation} />
						<Component3 propsValue={this.state.sns} />
					</div>
				</footer>
			</section>
		);
	}
 }

 export default App;

• Component2_1.js ~ Component2_3.js

import React, { Component } from 'react';

class Component2_1 extends React.Component {
    render() {
        return (
            <div className='logo'>
                <a href=''>
                    {this.props.propsValue}
                </a>
            </div>
        )
    }
}

export default Component2_1;

import React, { Component } from 'react';

class Component2_2 extends React.Component {
    constructor(props) {
        super();

        this.state= {
            navigationData : props.propsValue
        }
    }

    render() {
        let data = this.state.navigationData;

        let navigationList = data.map((d, i) => <li key={i+1}>
            <a href="">
                {d.menu}
            </a>
        </li>);

        return (
            <div className='navi'>
                <ul>
                    {navigationList}
                </ul>
            </div>
        )
    }
}

export default Component2_2;

import React, { Component } from 'react';

class Component2_3 extends React.Component {
    constructor(props) {
        super();

        this.state = {
            snsData : props.propsValue 
        };
    }

    render() {
        let data = this.state.snsData;

        let snsList = data.map((d, i) => 
        <li key={i+1}>
            <a href='' className={"fa fa-" + d.icon} title={d.icon}></a>
        </li>)

        return (
            <div className='sns'>
                <ul className='clearfix'>
                    {snsList}
                </ul>
            </div>
        );
    }
}

export default Component2_3;

• 결과