리액트 React 기본 개념 정리

 

기본 설정

1. 리액트 앱 만들기

npx create-react-app

1. 출력하기

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

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

1. JSX
2. javascript + html

// Some codeimport React from "react";
import ReactDOM from "react-dom";

const name = "gwni";
const hello = <h1>hello {name}</h1>

ReactDOM.render(hello, document.querySelector("#root"));

// Some code//JSX 

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

function helloName(name){
  return name.nick;
}
const name = {
  nick : "gwni",
};

const hello = <h1>hello {helloName(name)}</h1>;
ReactDOM.render(hello, document.querySelector("#root"));

// Some codeimport React from "react";
import ReactDOM from "react-dom";

const element = <h1 className="greetin">Hello, gwni</h1>;

// const element = React.createElement(
//   "h1",
//   {className:"greeting"},
//   "hello gwni"
// )

ReactDOM.render(element, document.querySelector("#root"));

3.랜더링 방식

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

// let clock = document.getElementById("clock");

// setInterval(function(){
//   clock.innerHTML = new Date().toLocaleDateString();
// },1000);

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

1. 컴포넌트 + props(매개변수)

// import React from "react";
import ReactDOM from "react-dom";
//컴포넌트는 대문자로 시작
function Hello(){
  return <h1>hello, gwni</h1>
}
// const element = <Hello></Hello>;  //컴포넌트 불러오기 쓸 내용이 있으면 닫는태그
const element = <Hello />;      //쓸 내용 없으면 그냥 닫아도 됨

  ReactDOM.render(element, document.querySelector("#root"));

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

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

const element = <Hello name="gwni" />;      

  ReactDOM.render(element, document.querySelector("#root"));