ILLUSTRATOR Reference v1.0 </doc>

React

리액트는 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리입니다.

리액트(React, React.js 또는 ReactJS)는 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용됩니다. 페이스북과 개별 개발자 및 기업들 공동체에 의해 유지보수됩니다. 리액트는 싱글 페이지 애플리케이션이나 모바일 애플리케이션 개발에 사용될 수 있습니다. 대규모 또는 복잡한 리액트 애플리케이션 개발에는 보통 라우팅, API통신 등의 기능이 요구되는데 리액트에는 기본적으로 제공되지 않기 때문에 추가 라이브러리를 사용해야 합니다.
https://ko.reactjs.org/

기본 개념 익히기

출력하기(index.js)

import React from "react";
import ReactDOM from "react-dom";

ReactDOM.render(<h1>Hello</h1>, document.getElementById("root"));

JSX

JSX라 하며 JavaScript를 확장한 문법입니다.

import React from "react";
import ReactDOM from "react-dom";

const name = "KkingKkang";
const element = <h1>hello, {name}</h1>;

ReactDOM.render(element, document.getElementById("root"));

import React from "react";
    import ReactDOM from "react-dom";
    
    function formatName(user) {
        return user.firstName + user.lastName;
    }
    
    const user = {
        firstName: "Kking",
        lastName: "Kkang",
    };
    
    const element = <h1>Hello, {formatName(user)}</h1>;
    
    ReactDOM.render(element, document.getElementById("root"));
    

import React from "react";
        import ReactDOM from "react-dom";
        
        //업그레이드 하면서 간편하게 바뀜
        const element = <h1 className="hello">Hello, KkingKkang</h1>
        
        //정석
        const element = React.createElement(
            "h1",
            { className: "hello" },
            "Hello, KkingKkang"
        );
        
        ReactDOM.render(element, document.getElementById("root"));
        
        

랜더링

import React from "react";
import ReactDOM from "react-dom";

function clock() {
    const element = (
    <div>
        <h1>Hello, KkingKkang!</h1>
        <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
    );
    ReactDOM.render(element, document.getElementById("root"));
}
setInterval(clock, 1000);

컴퍼넌트

import React from "react";
import ReactDOM from "react-dom";

function Welcome(props) {
    return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="KkingKkang" />;

ReactDOM.render(element, document.getElementById("root"));

컴퍼넌트 합성

import React from "react";
import ReactDOM from "react-dom";

function Welcome(props) {
    return <h1>Hello, {props.name}</h1>;
}

function App() {
    return (
    <div>
        <Welcome name="Kking" />
        <Welcome name="Kkang" />
        <Welcome name="Web" />
    </div>
    );
}

ReactDOM.render(<App //>, document.getElementById("root"));

import React from "react";
import ReactDOM from "react-dom";

function formatDate(date) {
    return date.toLocaleDateString();
}

function Comment(props) {
    return (
        <div className="comment">
            <div className="user-info">
            <img
                className="avatar"
                src={props.author.avatarUrl}
                alt={props.author.name}
            />
            <div className="user-name">{props.author.name}</div>
            </div>
            <div className="comment-text">{props.text}</div>
            <div className="comment-date">{formatDate(props.date)}</div>
        </div>
    );
}

const comment = {
    date: new Date(),
    text: "열심히 할수록 기회는 따른다.",
    author: {
    name: "KkingKkang",
    avatarUrl:"http://jjh100.dothome.co.kr/portfolio/assets/images/aboutImg01.jpg",
    },
};

ReactDOM.render(
    <Comment date={comment.date} text={comment.text} author={comment.author} />,
    document.getElementById("root")
);

import React from "react";
import ReactDOM from "react-dom";

function formatDate(date) {
    return date.toLocaleDateString();
}

function Comment(props) {
    return (
        <div className="comment">
            <div className="user-info">
            <img
                className="avatar"
                src={props.author.avatarUrl}
                alt={props.author.name}
            />
            <div className="user-name">{props.author.name}</div>
            </div>
            <div className="comment-text">{props.text}</div>
            <div className="comment-date">{formatDate(props.date)}</div>
        </div>
    );
}

const comment = {
    date: new Date(),
    text: "열심히 할수록 기회는 따른다.",
    author: {
    name: "KkingKkang",
    avatarUrl:"http://jjh100.dothome.co.kr/portfolio/assets/images/aboutImg01.jpg",
    },
};

ReactDOM.render(
    <Comment date={comment.date} text={comment.text} author={comment.author} />,
    document.getElementById("root")
);

생명주기

import React from 'react';
import ReactDOM from 'react-dom';

function clock() {
const element = (
<div>
<h1>Hello</h1>
<h2>지금은 {new Date().toLocaleTimeString()} 입니다.</h2>
</div>
)
ReactDOM.render(element, document.getElementById("root"));
}

setInterval(clock, 1000);

import React from 'react';
import ReactDOM from 'react-dom';

function Clock(props){
return (
<div>
<h1>Holle</h1>
<h2>지금은 {props.date.toLocaleTimeString()} 입니다.</h2>
</div>
)
}

function tick(){
ReactDOM.render(<Clock date={new Date()} />, document.getElementById("root"));
}

setInterval(tick, 1000);

import React from 'react';
import ReactDOM from 'react-dom';

class Clock extends React.Component {
render(){
return(
<div>
<h1>hello</h1>
<h2>지금은 {this.props.date.toLocaleTimeString()} 입니다.</h2>
</div>
)
}
}

function tick(){
ReactDOM.render(<Clock date={new Date()} />, document.getElementById("root"));
}

setInterval(tick, 1000)

터미널 설치
npm install react-router-dom
//주소 설정 
npm install prop-types
//변수 타입 설정
npm install node-sass
//사스 설치