Developer Story House

React STEP 27 - jquery + react

IT의 큰손 — Tue, 4 Mar 2025 17:17:11 +0900

⭐ jquery

jQuery는 클릭 이벤트, 체인지 이벤트 등 웹 페이지 동작의 기능을 조작할 때 브라우저의 영향을 받지 않고 원하는 기능을 제작할 수 있습니다.
브라우저의 버전에 따라 작동하지 않는 코드를 jQuery로 변경해서 사용하면 브라우저 문제 없이 사용할 수 있습니다.
https://jquery.com/

jQuery

What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

jquery.com

1. jquery install

install

npm install jquery

import

import $ from 'jquery';

2. 페이지 구조 생성하기

jquery.css

@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:300,400,700);

body, h1, h2, h3, h4, h5, h6, p, ul, ol, table, dl, dd {
	margin: 0;
	padding: 0;
}
h1 {
	font-size: 16px;
}
a {
	text-decoration: none;
	color: #000;
}
ul, ol {
	list-style: none;
}
img {
	max-width: 100%;
	vertical-align: top;
	border: none;
}
body {
	font-family: "Roboto Slab", serif;
	font-size: 16px;
	font-weight: 400;
}
#header {
	position: fixed;
	left: 0;
	top: 0;
	padding: 0 22px;
	width: 316px;
	height: 100%;
	background-color: #f5f6f8;
	box-sizing: border-box;
	transition: left 0.4s;
}
#header .title_area {
	position: relative;
	margin-top: 20px;
	width: 64px;
	height: 40px;
	line-height: 40px;
}
#header .title_area::after {
	content: "";
	display: block;
	position: absolute;
	top: 100%;
	width: 100%;
	height: 3px;
	background-color: #f66a69;
}
#header .title_area h2 {
	font-size: 15px;
	font-weight: 700;
}
#menu {
	margin-top: 34px;
}
#menu > ul > li {
	border-bottom: 1px solid #e1e1e1;
}
#menu > ul > li > a {
	display: block;
	line-height: 46px;
	text-transform: uppercase;
	font-size: 12px;
	font-weight: 400;
	color: #4a4a4a;
}
#menu ul ul {
	display: none;
	margin-bottom: 16px;
}
#menu > ul > li.active > a {
	color: #f66a69;
}
#menu > ul > li.active ul {
	display: block;
}
#menu ul ul a {
	display: block;
	padding-left: 12px;
	line-height: 36px;
	text-transform: uppercase;
	font-size: 12px;
	color: #bfbfbf;
}
.right_area {
	margin-left: 316px;
	width: auto;
	height: 800px;
	transition: margin-left 0.4s;
}
.right_area .tab {
	display: none;
	margin: 12px 0 0 12px;
	width: 60px;
	height: 42px;
	text-indent: -9999px;
	background: url(/public/assets/images/ico/btn_tab.jpg) no-repeat;
}

@media only screen and (max-width: 736px) {
	#header {
		left: -316px;
	}
	#header.open {
		left: 0;
	}
	.right_area .tab {
		display: block;
	}
	.right_area {
		margin-left: 0;
	}
	.right_area.open {
		margin-left: 316px;
	}
}

App.js

import React, { Component } from 'react';
import Header from './js2/step4/Header';
import Content from './js2/step4/Content';
import './css/jquery.css';

class App extends Component {
	render(){
		return(
			<div className="wrap">
				<Header />
				<Content />
			</div>
		);
	}
}

export default App;

Header.js

import React, { Component } from 'react';
import $ from 'jquery';

class Header extends Component {
	componentDidMount(){
		$(window).on("resize", function(){
			if($(window).width() > 736 && $("#header").hasClass("open") === true){
				$("#header").removeClass("open");
				$(".right_area").removeClass("open");
			}
		});
		$(".tab").on("click", function(e){
			e.preventDefault();

			if($(window).width() > 735) return;

			if($("#header").hasClass("open") === true){
				$("#header").removeClass("open");
				$(".right_area").removeClass("open");
			}
			else{
				$("#header").addClass("open");
				$(".right_area").addClass("open");
			}
		});
		$("#menu > ul > li").on("click", function(e){
			e.preventDefault();

			let idx=$(this).index();

			for(let i=0; i<$("#menu > ul > li").length; i++){
				if(i === idx){
					$("#menu > ul > li").eq(i).addClass("active");
				}
				else{
					$("#menu > ul > li").eq(i).removeClass("active");
				}
			}
		});
	}

	render(){
		return(
			<header id="header">
				<div className="title_area">
					<h2>Menu</h2>
				</div>
				<nav id="menu">
					<ul>
						<li>
							<a href="">homepage</a>
							<ul className="sub">
								<li><a href="">lorem dolor</a></li>
								<li><a href="">ipsum adipiscing</a></li>
								<li><a href="">tempus magna</a></li>
								<li><a href="">feugiat veroeros</a></li>
							</ul>
						</li>
						<li>
							<a href="">generic</a>
							<ul className="sub">
								<li><a href="">lorem dolor</a></li>
								<li><a href="">ipsum adipiscing</a></li>
								<li><a href="">tempus magna</a></li>
								<li><a href="">feugiat veroeros</a></li>
							</ul>
						</li>
						<li><a href="">elements</a></li>
						<li><a href="">submenu</a></li>
					</ul>
				</nav>
			</header>
		);
	}
}

export default Header;

Content.js

import React, { Component } from 'react';

class Content extends Component {
	render(){
		return(
			<div className="right_area">
                <a href="" className="tab">Tab Menu</a>
            </div>
		);
	}
}

export default Content;

결과 - PC

결과 - 모바일

React STEP 26 - gsap + react

IT의 큰손 — Tue, 4 Mar 2025 14:43:32 +0900

⭐ Gsap

웹 화면에 쉽게 사용할 수 있는 강력한 타임라인 기반의 애니메이션 자바스크립트 라이브러리입니다.
GSAP를 이용해서 멋진 인터랙티브한 웹사이트를 만들 수 있습니다.
https://greensock.com/react
https://www.npmjs.com/package/gsap

gsap

GSAP is a framework-agnostic JavaScript animation library that turns developers into animation superheroes. Build high-performance animations that work in **every** major browser. Animate CSS, SVG, canvas, React, Vue, WebGL, colors, strings, motion paths,.

www.npmjs.com

1. gsap install

install

npm install gsap

import

import gsap from 'gsap';
import ScrollToPlugin from 'gsap/ScrollToPlugin';

gsap.registerPlugin(ScrollToPlugin);

2. gsap - step1

기본 구조 및 css 정의
gsap1.css

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic);

body, h1, h2, h3, h4, h5, h6, p, ul, ol, table, dl, dd {
	margin: 0;
	padding: 0;
}
h1 {
	font-size: 16px;
}
a {
	text-decoration: none;
	color: #000;
}
ul, ol {
	list-style: none;
}
img {
	max-width: 100%;
	vertical-align: top;
	border: none;
}
body {
	margin: 20px;
	padding: 20px;
	line-height: 1;
	font-family: "Open Sans", sans-serif;
	font-size: 1em;
	background-color: #f1f1f1;
	color: #555;
}
.title {
	margin: 0;
	padding: 0;
	font-size: 1.5em;
	font-weight: 300;
	color: #555;
}
.container {
	margin-top: 50px;
}
.ball {
	position: absolute;
	left: 0;
	top: 200px;
	width: 50px;
	height: 50px;
	background-color: #8ac007;
	border-radius: 25px;
}

App.js

import React, { Component, Fragment } from 'react';
import './App.css';
import gsap from 'gsap';
import './css/gsap1.css';

 class App extends Component {
    componentDidMount() {
        let ball = document.getElementsByClassName("ball")[0];

        ball.addEventListener("click", function() {
            gsap.fromTo(ball, {opacity: 0}, {opacity: 1, left: 300, duration: 0.3, delay: 2});
        });
    }

    render() {
        return (
            <Fragment>
                <h1 className='title'>basic :: React Example</h1>
                <div className='container'>
                    <div className='ball'></div>
                </div>
            </Fragment>
        )
    }
 }

 export default App;

3. gsap - step2

헤더, 콘텐트, Scroll Page 만들기
gsap2.css

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic);

body, h1, h2, h3, h4, h5, h6, p, ul, ol, table, dl, dd {
	margin: 0;
	padding: 0;
}
h1 {
	font-size: 16px;
}
a {
	text-decoration: none;
	color: #2f2f2f;
}
ul, ol {
	list-style: none;
}
img {
	max-width: 100%;
	vertical-align: top;
	border: none;
}
body {
	line-height: 1;
	font-family: "Open Sans", sans-serif;
	font-size: 1em;
}
.top {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	min-width: 1100px;
	background-color: transparent;
}
.top.fixed {
	position: fixed;
	background-color: rgba(0,0,0,.1);
}
.top .top_inner {
	margin: 0 auto;
	padding: 30px 0;
	width: 1100px;
	height: 100px;
	box-sizing: border-box;
}
.top .logo {
	float: left;
	height: 40px;
}
.top .logo a img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#gnb {
	float: left;
	margin-left: 80px;
}
#gnb li {
	display: inline-block;
}
#gnb li a {
	display: block;
	padding: 0 25px;
	line-height: 40px;
	text-transform: uppercase;
	font-size: 0.875em;
	font-weight: 400;
	color: #000;
}
#gnb li a:hover,
#gnb li.active a {
	color: #e5493a;
}
.content div {
	padding: 120px 40px 40px;
	height: 900px;
	text-transform: uppercase;
	font-size: 2em;
	font-weight: 300;
	color: #ccc;
	border-bottom: 1px solid #eaeaea;
	box-sizing: border-box;
}

App.js

import React, { Component, Fragment } from 'react';
import './App.css';
import gsap from 'gsap';
import './css/gsap2.css';
import Logo from './js2/step3/Logo';
import Navigation from './js2/step3/Navigation';
import Content from './js2/step3/Content';

 class App extends Component {
    render() {
        return (
            <div className='container'>
                <div className='top'>
                    <div className="top_inner">
                        <Logo />
                        <Navigation />
                    </div>
                </div>
                <Content />
            </div>
        )
    }
 }

 export default App;

Content.js : Content의 영역을 담을 컴포넌트

import React, { Component } from 'react';
import ContentList from './ContentList';

class Content extends React.Component {
    render() {
        return (
            <div className='content'>
                <ContentList id="area1">content1</ContentList>
                <ContentList id="area2">content2</ContentList>
                <ContentList id="area3">content3</ContentList>
                <ContentList id="area4">content4</ContentList>
                <ContentList id="area5">content5</ContentList>
                <ContentList id="area6">content6</ContentList>
                <ContentList id="area7">content7</ContentList>
                <ContentList id="area8">content8</ContentList>
            </div>
        )
    }
}

export default Content;

ContentList.js : Content의 공통 사용 컴포넌트

import React, { Component } from 'react';

class ContentList extends React.Component {
    render() {
        return (
            <div id={this.props.id}>{this.props.children}</div>
        );
    }
}

export default ContentList;

Logo.js : 헤더의 로고 컴포넌트

import React, { Component } from 'react';

class Logo extends React.Component {
    render() {
        return (
            <h1 className='logo'>
                <a href=''>
                    <img src="/assets/images/logo.png" alt='logo'></img>
                </a>
            </h1>
        )
    }
}

export default Logo;

Navigation.js : 실제 Navagation 행위가 이루어질 컴포넌트

import React, { Component } from 'react';
import gsap from 'gsap';
import ScrollToPlugin from 'gsap/ScrollToPlugin';

class Navigation extends Component {
    componentDidMount() {
        gsap.registerPlugin(ScrollToPlugin);

        let n = 0;
        let t = 0;
        let targety = 0;
        let scrollTimer = 0;
        let winHalf;

        let top = document.getElementsByClassName("top")[0];
        let content=document.getElementsByClassName("content")[0];
		let contentLi=content.children;
		let gnb=document.getElementById("gnb");
		let gnbLi=gnb.firstElementChild.children;
		gnbLi[n].classList.add("active");

		let init=() => winHalf=window.innerHeight/2;

		init();
        window.addEventListener("resize", init);

		window.addEventListener("scroll", () => {
			clearTimeout(scrollTimer);

			scrollTimer=setTimeout(() => {
				t=window.scrollY;

				if(t < contentLi[1].offsetTop-winHalf){
					n=0;
				}
				else if(t < contentLi[2].offsetTop-winHalf){
					n=1;
				}
				else if(t < contentLi[3].offsetTop-winHalf){
					n=2;
				}
				else if(t < contentLi[4].offsetTop-winHalf){
					n=3;
				}
				else if(t < contentLi[5].offsetTop-winHalf){
					n=4;
				}
				else if(t < contentLi[6].offsetTop-winHalf){
					n=5;
				}
				else if(t < contentLi[7].offsetTop-winHalf){
					n=6;
				}
				else{
					n=7;
				}

				// console.log("n : "+n);

				for(let i=0; i<gnbLi.length; i++){
					if(i === n){
						gnbLi[i].classList.add("active");
					}
					else{
						gnbLi[i].classList.remove("active");
					}
				}

				if(t > 80){
					if(top.classList.contains("fixed") === false){
						top.classList.add("fixed");
						gsap.fromTo(top, {top: -100}, {top: 0, duration: 0.3, delay: 0.5});
					}
				}
				else{
					if(top.classList.contains("fixed") === true){
						top.classList.remove("fixed");
						top.removeAttribute("style");
					}
				}
			}, 50);
		});

		for(let i=0; i<gnbLi.length; i++){
			gnbLi[i].addEventListener("click", e => {
				e.preventDefault();
				targety=contentLi[i].offsetTop;
				gsap.to(window, {scrollTo: targety, duration: 0.5});
			});
		}		
	}

	render(){
		return(
			<nav id="gnb">
				<ul>
					<li><a href="#area1">HOME</a></li>
					<li><a href="#area2">ABOUT US</a></li>
					<li><a href="#area3">PAGES</a></li>
					<li><a href="#area4">FEATURES</a></li>
					<li><a href="#area5">PORTFOLIO</a></li>
					<li><a href="#area6">BLOG</a></li>
					<li><a href="#area7">SHOP</a></li>
					<li><a href="#area8">CONTACT US</a></li>
				</ul>
			</nav>
		);
	}
}

export default Navigation;

결과

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

IT의 큰손 — Tue, 4 Mar 2025 13:58:13 +0900

⭐ 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;

결과

React STEP 24 - TODO 리스트 예제

IT의 큰손 — Tue, 11 Feb 2025 16:38:57 +0900

⭐ TODO LIST

1. 단계 1

기본 구조 잡기
AddTask.js

class AddTask extends React.Component {
    render() {
        let inputStyle = {
            marginTop : 20,
            padding: "0px 10px",
            width: 125,
            lineHeight: "32px",
            fontSize : 14,
            border: "1px solid #ccc"
        };
        let buttonStyle = {
            margin: "20px 0px 0px 5px",
            padding: 10,
            fontSize: 14,
            backgroundColor: "#999",
            color: "#fff",
            border: "none",
            cursor: "pointer"
        };

        return (
            <div className="main">
                <div className="header">
                    <form>
                        <input type="text" placeholder='Add Task' style={inputStyle}>
                        </input>
                        <button type="submit" style={buttonStyle}>Added</button>
                    </form>
                </div>
            </div>
        )
    }
}

export default AddTask;

2. 단계 2

React에서의 ref 속성은 HTML 요소의 레퍼런스를 변수에 저장하기 위해서 사용합니다.
특히 <input> 을 통해 변수를 저장할 때 유용합니다.

class AddTask2 extends React.Component {
    addTask(e) {
        e.preventDefault();
        console.log(this._input.value);
    }

    render() {
        let inputStyle={
            marginTop: 20,
            padding: "0px 10px",
            width: 125,
            lineHeight: "32px",
            fontSize: 14,
            border: "1px solid #ccc"
        };
        let buttonStyle={
            margin: "20px 0px 0px 5px",
            padding: 10,
            fontSize: 14,
            backgroundColor: "#999",
            color: "#fff",
            border: "none",
            cursor: "pointer"
        };

        return (
            <div className='main'>
                <div className="header">
                    <form onSubmit={this.addTask.bind(this)}>
                        <input type='text' placeholder='Add Task' style={inputStyle} 
                        ref={
                            function(e) {
                                this._input=e;
                            }.bind(this)
                        }
                        ></input>
                        <button type='submit' style={buttonStyle}>Added</button>
                    </form>
                </div>
            </div>
        )
    }
}

export default AddTask2;

3. 단계 3

state를 활용
state -> tasks:[] -> taskArray

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

        this.state = {
            tasks: []
        }
    }

    addTask = e => {
        e.preventDefault();

        let taskArray = this.state.tasks;

        if(this._input.value != '') {
            taskArray.push(
                {
                    key: Date.now(),
                    msg: this._input.value
                }
            );
        }

        console.log(taskArray);
    };

    render() {
        let inputStyle={
            marginTop: 20,
            padding: "0px 10px",
            width: 125,
            lineHeight: "32px",
            fontSize: 14,
            border: "1px solid #ccc"
        };
        let buttonStyle={
            margin: "20px 0px 0px 5px",
            padding: 10,
            fontSize: 14,
            backgroundColor: "#999",
            color: "#fff",
            border: "none",
            cursor: "pointer"
        };

        return (
            <div className="main">
                <div className="header">
                    <form onSubmit={this.addTask}>
                        <input
                            type="text"
                            placeholder="Add Task"
                            style={inputStyle}
                            ref={e => this._input=e}
                        >
                        </input>
                        <button type="submit" style={buttonStyle}>Added</button>
                    </form>
                </div>
            </div>
        )
    }
}

export default AddTask3;

4. 단계 4

setState() 를 사용해, 상태를 업데이트
등록되는 항목에 대한 List

class AddTask4 extends React.Component {
    constructor() {
        super();
        
        this.state = {
            tasks : []
        };
    }

    addTask = e => {
        e.preventDefault();

        let taskArray = this.state.tasks;

        if(this._input.value !='') {
            taskArray.push(
                {
                    key: Date.now(),
                    msg: this._input.value
                }
            );
        }
        this.setState({
            tasks: taskArray
        });
    }
    
    render() {
        let inputStyle={
            marginTop: 20,
            padding: "0px 10px",
            width: 125,
            lineHeight: "32px",
            fontSize: 14,
            border: "1px solid #ccc"
        };
        let buttonStyle={
            margin: "20px 0px 0px 5px",
            padding: 10,
            fontSize: 14,
            backgroundColor: "#999",
            color: "#fff",
            border: "none",
            cursor: "pointer"
        };
        let liStyle={
            marginTop: 10
        }

        let data = this.state.tasks;

        let listTasks = data.map(function(task) {
            return <li key={task.key} style={liStyle}>{task.msg}</li>
        })

        return (
            <div className='main'>
                <div className='header'>
                    <form onSubmit={this.addTask}>
                    <input
                            type="text"
                            placeholder="Add Task"
                            style={inputStyle}
                            ref={e => this._input=e}
                        >
                        </input>
                        <button type="submit" style={buttonStyle}>Added</button>
                        <ul>
                            {listTasks}
                        </ul>
                    </form>
                </div>
            </div>
        )
    }
}

export default AddTask4;

5. 단계 5

src/AddTask.js
TaskList -> 컴포넌트로 분리하여, import 방식으로 사용

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

        this.state = {
            tasks : []
        }
    }

    addTask = e => {
        e.preventDefault();

        let taskArray = this.state.tasks;

        if(this._input.value != '') {
            taskArray.push({
                key: Date.now(),
                msg: this._input.value
            })
        }

        this.setState({
            tasks: taskArray
        })
    }
    render() {
        let inputStyle={
            marginTop: 20,
            padding: "0px 10px",
            width: 125,
            lineHeight: "32px",
            fontSize: 14,
            border: "1px solid #ccc"
        };
        let buttonStyle={
            margin: "20px 0px 0px 5px",
            padding: 10,
            fontSize: 14,
            backgroundColor: "#999",
            color: "#fff",
            border: "none",
            cursor: "pointer"
        }

        return (
            <div className='main'>
                <div className='header'>
                    <form onSubmit={this.addTask}>
                        <input type='text' placeholder='Add Task' style={inputStyle}
                        ref={e => this._input = e}>
                        </input>
                        <button type='submit' style={buttonStyle}>Added</button>
                        <AddTaskList propsValue={this.state.tasks} />
                    </form>
                </div>
            </div>
        )
    }
}

export default AddTask5;

AddTaskList.js
props의 value를 가져와 date형식으로 변환 후, TODO List를 노출

class AddTaskList extends React.Component {
    render() {
        let liStyle={
            marginTop: 10
        }
        let data=this.props.propsValue;

        let listTasks = data.map(task => {
            let date = new Date(task.key);
            let formattedDate = `${date.getFullYear()}년 ${date.getMonth() + 1}월 ${date.getDate()}일 ` +
                                `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
        
            return (
                <li key={task.key} style={liStyle}>
                    {task.msg} ({formattedDate})
                </li>
            );
        });

        return (
            <ul>
                {listTasks}
            </ul>
        )
    }
}

export default AddTaskList;

React STEP 23 - Create React App - 5

IT의 큰손 — Tue, 11 Feb 2025 13:59:08 +0900

⭐ Create React App

컴포넌트 매핑 이해하기

1. 단계 1

src/DataComponent.js

class DataComponent extends React.Component {
    render() {
        let ulStyle = {
            marginTop : 15
        }
        let liStyle = {
            lineHeight : 1.8
        }

        return (
            <ul style={ulStyle}>
                <li style={liStyle}>member1</li>
                <li style={liStyle}>member2</li>
                <li style={liStyle}>member3</li>
            </ul>
        )
    }
}

2. 단계 2

src/App.js

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

        this.state = {
            loginData : [
                {name: "member1", age: 21},
                {name: "member2", age: 22},
                {name: "member3", age: 23},
            ]
        }
    }
    render() {
        return (
            <div className="container">
                <h1>React Example</h1>
                <DataComponent loginData={this.state.loginData}></DataComponent>
            </div>
        )
    }
 }

src/DataComponent.js

class DataComponent2 extends React.Component {
    constructor(props) {
        super(props);
        this.state = {loginData: props.loginData}
    }
    render() {
        let ulStyle={
            marginTop: 15
        };
        let liStyle={
            lineHeight: 1.8
        };
        let data=this.state.loginData;
        let dataList=data.map((d, i) => <li key={i+1} style={liStyle}>{d.name}, {d.age}</li>);
        return (
            <ul style={ulStyle}>
                {dataList}
            </ul>
        );
    }
}

export default DataComponent2;

React STEP 22 - Create React App - 4

IT의 큰손 — Tue, 11 Feb 2025 13:44:33 +0900

⭐ Create React App

map() 함수로 태그 반환하기

1. 단계 1

반복해서 출력해야 하는 태그들을 배열에 넣어두고 map() 함수로 순서대로 나열해 컴포넌트를 return 할 수 있습니다.
src/ReturnMap.js

class ReturnMap extends React.Component {
    render() {
        let ulStyle= {
            marginTop: 15
        }
        let liStyle = {
            lineHeight: 1.8
        }
        let forArray = [
            <li key="1" style={liStyle}>React</li>,
            <li key="2" style={liStyle}>18.2.0</li>,
            <li key="3" style={liStyle}>Array Map</li>
        ];

        return (
            <ul style={ulStyle}>
                {forArray}
            </ul>
        )
    }
}

export default ReturnMap;

2. 단계 2

새로운 array에 옮겨 담기

class ReturnMap2 extends React.Component {
    render() {
        let ulStyle = {
            marginTop : 15
        };
        let liStyle = {
            lineHeight : 1.8
        };
        let forArray = [
            <li key="1" style={liStyle}>React</li>,
            <li key="2" style={liStyle}>18.2</li>,
            <li key="3" style={liStyle}>Array Map</li>
        ];
        let forNewArray = [];

        for(let i=0; i<forArray.length; i++) {
            forNewArray.push(forArray[i]);
        }

        return (
            <ul style={ulStyle}>
                {forNewArray}
            </ul>
        )
    }
}

export default ReturnMap2;

3. 단계 3

forEach문을 통한 더욱 편리한 방법

class ReturnMap3 extends React.Component {
    render() {
        let ulStyle = {
            marginTop : 15
        }
        let liStyle = {
            lineHeight : 1.8
        }
        let forEachArray = [
            <li key="1" style={liStyle}>React</li>,
            <li key="2" style={liStyle}>18.2.0</li>,
            <li key="3" style={liStyle}>Array Map</li>
        ];
        let forEachNewArray = [];

        forEachArray.forEach(result => {
            forEachNewArray.push(result);
        });

        return (
            <ul style={ulStyle}>
                {forEachNewArray}
            </ul>
        )
    }
}

export default ReturnMap3;

4. 단계 4

map 함수를 사용하여 더 간단한 방법

class ReturnMap4 extends React.Component {
    render() {
        let ulStyle = {
            marginTop : 15
        }
        let liStyle = {
            lineHeight : 1.8
        }
        let mapArray = [
            <li key="1" style={liStyle}>React</li>,
            <li key="2" style={liStyle}>18.2.0</li>,
            <li key="3" style={liStyle}>Array Map</li>
        ]
        let mapNewArray = mapArray.map(arrayVal => arrayVal);

        return (
            <ul style={ulStyle}>
                {mapNewArray}
            </ul>
        )
    }
}

export default ReturnMap4;

5. 단계 5

elementArray 방법

class ReturnMap5 extends React.Component {
    render() {
        let ulStyle = {
            marginTop : 15
        }
        let liStyle = {
            lineHeight : 1.8
        }
        let elementArray = [
            <li key="1" style={liStyle}>React</li>,
            <li key="2" style={liStyle}>18.2.0</li>,
            <li key="3" style={liStyle}>Array Map</li>
        ]

        return (
            <ul style={ulStyle}>
                {elementArray.map(arrayVal => arrayVal)}
            </ul>
        )
    }
}

export default ReturnMap5

React STEP 21 - Create React App - 3

IT의 큰손 — Tue, 11 Feb 2025 10:12:39 +0900

⭐ 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;

React STEP 20 - Create React App - 2

IT의 큰손 — Mon, 10 Feb 2025 17:09:51 +0900

⭐ 생명주기 함수 이해하기

컴포넌트의 정보를 보여주는 도구를 설치 -> 크롬 브라우저에서 해당 URL 접속
https://chrome.google.com/webstore

Chrome Web Store

브라우저에 새로운 기능을 추가하고 탐색 환경을 맞춤설정합니다.

chromewebstore.google.com

React Developer Tool 검색 및 [Chrome에 추가] 버튼을 눌러 확장 프로그램을 설치
React 개발상에서의 컴포넌트를 보고 싶을 때, [Components]라는 탭이 앞에서 설치한 확장 프로그램에 의해 개발자 도구에 추가되어 있습니다.
실제 태그를 보고 싶을 때는 [Elements] 탭을 쓰면 되지만, React 코드를 분석할 때는 [Components] 탭을 쓰면 컴포넌트들을 볼 수 있습니다

1. 단계 1

src/App.js

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

src/Lifecycle.js

 import React, { Component } from 'react';
 class Lifecycle extends Component {
    constructor(props){
        super(props);
        this.state={};
        console.log("1. constructor()");
        console.log(props);
    }
    static getDerivedStateFromProps(props, state){
        console.log("2. getDerivedStateFromProps(), "+props.propValue);
        console.log(props);
        console.log(state);
        return {};
    }
    render(){
        console.log("3. render()");
 1-1) 단계1
 src/App.js
 src/Lifecycle.js
        return (
            <h2>This is Render Function.</h2>
        );
    }
 }
 export default Lifecycle;

2. 단계 2

src/Lifecycle.js

import React, { Component } from 'react';
 class Lifecycle extends Component {
    constructor(props){
        super(props);
        this.state={};
        console.log("1. constructor()");
        console.log(props);
    }
    static getDerivedStateFromProps(props, state){
        console.log("2. getDerivedStateFromProps(), "+props.propValue);
        return {tempState: props.propValue};
    }
    componentDidMount(){
        console.log("4. componentDidMount()");
        console.log("5. tempState : "+this.state.tempState);
        console.log(this.state);
    }
    render(){
        console.log("3. render()");
        return (
            <h2>This is Render Function.</h2>
        );
    }
 }
 1-2) 단계2
 src/Lifecycle.js
export default Lifecycle;

3. 단계 3

src/Lifecycle.js

import React, { Component } from 'react';
 class Lifecycle extends Component {
    constructor(props){
        super(props);
        this.state={};
        console.log("1. constructor()");
        console.log(props);
    }
    static getDerivedStateFromProps(props, state){
        console.log("2. getDerivedStateFromProps(). "+props.propValue);
        return {tempState1: props.propValue};
    }
    componentDidMount(){
        console.log("4. componentDidMount()");
        console.log("5. tempState1 : "+this.state.tempState1);
        this.setState({tempState2: true});
    }
    shouldComponentUpdate(props, state){
        console.log("6. shouldComponentUpdate(), tempState2 : "+state.tempState2);
        return state.tempState2;
        // return false;
    }
    render(){
        console.log("3. render()");
        return (
            <h2>This is Render Function.</h2>
        );
    }
 }
 
 export default Lifecycle;

React STEP 19 - Create React App - 1

IT의 큰손 — Mon, 10 Feb 2025 16:21:24 +0900

⭐ 기본 구조 이해하기

1. src/index.js

 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 const root=ReactDOM.createRoot(document.getElementById("root"));
 root.render(
 	<App />
 );
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
 reportWebVitals()

2. src/App.css

.container {
    padding: 10px;
 }
 .container h1 {
    font-size: 25px;
    font-weight: normal;
 }
 .container h2 {
    margin-top: 16px;
    font-size: 16px;
    font-weight: normal;
 }
 .container p {
    margin-top: 16px;
    font-weight: normal;
 }

3. src/App.js

 import React, { Component } from 'react';
 import './App.css';
 // class App extends React.Component {
 class App extends Component {
    constructor(props){
        super(props);
    }
    render(){
        return (
            <div className="container">
                <h1>React Example</h1>
                <p>HTML 적용하기</p>
            </div>
        );
    }
 }
 export default App;

⭐ React 컴포넌트 이해하기

1. src/App.js

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

2. src/ImportComponent.js

 import React, { Component } from 'react';
 class ImportComponent extends Component {
    render(){
        return (
            <h2>This is Imported Component.</h2>
        );
    }
 }
 export default ImportComponent

⭐ 생명주기 함수 이해하기

1. src/App.js

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

2. src/Lifecycle.js

 import React, { Component } from 'react';
 class Lifecycle extends Component {
    render(){
        console.log("3. render()");
        return (
            <h2>This is Render Function.</h2>
        );
    }
 }
 export default Lifecycle;

React STEP 18 - React 이벤트

IT의 큰손 — Mon, 10 Feb 2025 16:11:37 +0900

⭐ React Event

JavaScript에서의 이벤트를 React에서도 사용 할 수 있습니다.

1. 단계 1

class CounterText extends React.Component {
  render() {
    let textStyle = {
      paddingBottom: 20,
      fontSize: 36,
      color: "#333"
    };

    return (
      <div style={textStyle}>
        {this.props.countProps}
      </div>
    )
  }
}

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

    this.state= {
      count: 0
    }
  }

  countPlus() {
    this.setState({
      count: this.state.count +1
    });
  }

  countMinus() {
    this.setState({
      count: this.state.count -1
    })
  }

  render() {
    let backgroundStyle = {
      display: "inline-block",
      padding: 20,
      textAlign: "center",
      backgroundColor: "#f4f4f4",
      borderRadius: 10
    }
    let buttonStyle = {
      margin: 2,
      width: 40,
      height: 30,
      textAlign: "center",
      fontSize: 14,
      fontWeight: "bold",
      color: "#666"
    }

    return (
      <div style={backgroundStyle}>
        <CounterText countProps={this.state.count}></CounterText>
        <button onClick={this.countPlus} style={buttonStyle}>+</button>
        <button onClick={this.countMinus} style={buttonStyle}>-</button>
      </div>
    )
  }
}

root.render (
  <App2></App2>
)

해석

 countPlus(){
     this.setState({
     count: this.state.count+1
     });
 }
 countMinus(){
     this.setState({
     count: this.state.count-1
     });
 }
 countPlus(), countMinus() 함수에서의 this는 컴포넌트를 참조할 수 없습니다. 따라서 버튼을 
클릭하더라도 숫자가 증가되거나 감소되지 않습니다

2. 단계 2

해결 방법 1 : 화살표 함수 사용

countPlus=() => {
    this.setState({
        count: this.state.count+1
    });
};
countMinus=() => {
    this.setState({
        count: this.state.count-1
    });
}

해결 방법 2 : bind(this) 사용

return(
    <div style={backgroundStyle}>
    <CounterText countPros={this.state.count} />
    <button onClick={this.countPlus.bind(this)} style={buttonStyle}>+</button>
    <button onClick={this.countMinus.bind(this)} style={buttonStyle}>-</button>
    </div>
);