개발야옹

Element

React app의 가장 작은 단위로, screen에 표시할 content를 표현.

ex)

const element = <h1>Hello, world</h1>;

Browser DOM Element와 달리 React Element 는 일반 객체이며, 쉽게 생성이 가능하다. ReactDOM은 React element와 일치하도록 DOM을 Update해준다. 

※ Element는 Component의 구성요소.

※ React Element는 불변객체로서, Element를 생성한 이후에는 해당 element의 자식이나 속성을 변경할 수 없기 때문에 UI를 새로 Update하기 위해서는 새로운 Element를 생성하여 ReactDOM.render() 로 전달하여 redering해줘야 한다. 

[ + ] React Element는 사용자 정의 Component로도 나타낼 수 있다.

ex) 

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


const element = <Welcome name ="Sara"/>;
ReactDOM.render(
	element, 
    document.getElementById('root')
);

과정 : 

1) <Welcome name = "Sara"/> element로 ReactDOM.render() 호출

2) props 값 : { name : 'Sara' } 를 Welcome component로

3) Welcome Component의 결과로 <h1>Hello, Sara</h1> element 반환

4) ReactDOM은 반환된 해당 element( <h1>Hello, Sara</h1> ) 와 DOM이 일치하도록 UPDATE

결과 값 => Hello, Sara

JSX 

Javscript를 확장한 문법으로, JS의 모든 기능이 포함되어 있다. 

JSX는 React element를 생성한다. 

React에서 HTML을 표현할 때 JSX를 사용하는데 겉으로 보기에는 HTML을 입력하는 것 처럼 보이지만, Build 시 Babel( Javascript Compiler ) 에 의해서 JS로 변환된다. 

※ React에서 JSX를 사용하는 것은 필수가 아니지만 대부분 사용한다. ( 1. UI관련 작업 시 시각적으로 도움이 됨. 2. Error 및 경고 메시지 표시 더 잘 뜸. ) 

JSX 표현식

1. 중괄호 내에는 모든 유효한 JS 표현식 사용가능.

    (1) 변수 

const nmae = "Kite z";
const element = <h1>Hello, {name}</h1>

ReactDOM.render(
	// ReactDOM.render : React component를 Web browser에 redering하는 API
	element,
    document.getElementById('root')
);

    (2) 함수 호출 결과

function formatName(user){
	return user.firstName + ' ' + user.lastName;
}

const user = {
	firstName : "Kite",
    lastName : "z"
};

const elemnet = (
	<h1>
    	Hello, {formatName(user)}!
    </h1>
);

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

2. JSX attribute 정의

    (1) 따옴표 사용

const element = <div Index = "0"></div>;

    (2) 중괄호 사용 

const element = <img src = { user.avatarUrl }></img>;

두가지 표현식 중 하나만 사용해야 하며, 동시 사용 X

출처 : https://ko.reactjs.org/docs/introducing-jsx.html

1. MySQL 설치 : https://dev.mysql.com/downloads/windows/installer/8.0.htmlㅇ

npm install mysql

2. test용 database 생성

CREATE DATABASE HOMPAGE;

CREATE TABLE USER (
	ID VARCHAR(45) NOT NULL,
    PASSWORD VARCHAR(45) NOT NULL,
    PRIMARY KEY(ID)
);

CREATE TABLE POST_LIST(
	POST_ID INT NOT NULL AUTO_INCREMENT,
    TITLE VARCHAR(50) NOT NULL,
    CONTENT VARCHAR(50) NOT NULL
);

3. db.js

const mysql = require('mysql'); // mysql module 불러오기
const port = 3000; // 사용할 port number


// createConnection() : mysql db server와 연결하기위한 Connection 객체 생성, 인자 ( db 관련 info )
const connection = mysql.createConnection({
    host : 'localhost',
    user :'root',
    password : 'your db password',
    database : 'homepage'
});

// db 연결하기.
connection.connect(function(err){
    if(err) throw err;
    console.log("Connected!");
});

// connection.query('query',callback )
// db로 query문 전송하고, callback 함수 실행
// results는 query문에 대한 return값을 받아옴

connection.query('SELECT * FROM post_list WHERE post_id=1;',function(error, results, fields){
    if(error) throw error;
    const queryResult_id = results[0].post_id;
    const queryResult_title = results[0].title;
    const queryResult_content = results[0].content;
    console.log(`DATABASE :
    post_id : ${queryResult_id}
    title : ${queryResult_title}
    content : ${queryResult_content}
    `);
});

4. 결과 

참고 : https://www.npmjs.com/package/mysql