Skip to main content

React

dkdlelw

React

React

React는 페이스북에서 개발한 오픈 소스 자바스크립트 라이브러리입니다

React는 웹 애플리케이션 또는 모바일 앱을 개발하기 위한 도구로 사용됩니다. React는 커뮤니티에서 지속적으로 발전하고 있으며, 많은 회사와 개발자들이 사용하고 있습니다. React Native라는 도구를 사용하면 React를 기반으로 하는 모바일 애플리케이션도 개발할 수 있습니다.

REACT 설치

Node.js 설치
https://nodejs.org/ko

Node.js 설치: React는 Node.js 환경에서 동작하므로, Node.js를 먼저 설치해야 합니다. Node.js는 공식 홈페이지(https://nodejs.org)에서 다운로드할 수 있습니다.

npm create-react-app react1 
Compiled successfully!
You can now view react1 in the browser.
    Local:            http://localhost:3000
    On Your Network:  http://192.168.1.191:3000
Note that the development build is not optimized.
To create a production build, use npm run build.
webpack compiled successfully

scss설치

npm install node-sass

router설치

npm install react-router-dom

axios설치

npm install axios

prop-types설치

npm install prop-types

gsap설치

npm install gsap

REACT 기본 개념 익히기

1. hello world 출력하기

import React from "react";
import ReactDOM from "react-dom/client";
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>HELLO WORLD</h1>);
//hello world

2. JSX

JSX는 JavaScript XML의 약어로, React에서 UI를 구성하기 위한 문법입니다. JSX는 JavaScript의 확장 문법으로, XML과 유사한 문법을 사용하여 JavaScript 코드 안에 HTML 요소를 삽입할 수 있게 해줍니다.

const name = "webstoryboy";
const hello = <h1>hello {name}</h1>;
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(hello);
//hello webstoryboy

객체와 함수를 같이 사용한 경우

function helloName(){
return name.nick;
}
const name = {
nick : "webstoryboy",
}
const hello = <h1>Hello, {helloName()}</h1>;

3. 렌더링

// function clock(){
//   let clock = document.getElementById("clock");
//   setInterval(function(){
//     clock.innerHTML = new Date().toLocaleDateString();
//   }, 1000);
// }
// clock();
function clock(){
const element = (
<div>
    <div>hello, webstoryboy</div>
    <h2>지금은 {new Date().toLocaleDateString()}입니다. </h2>
</div>
);
ReactDOM.render(element, document.getElementById('root'));
}
export default clock;

4. 컴퍼넌트

import React from "react";
import ReactDOM from "react-dom/client";
function Hello(){
return <h1>Hello, webstoryboy</h1>
}
const element = <Hello />;
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(element);

import React from "react";
import ReactDOM from "react-dom/client";
function Welcome(props){
return <h1>Hello, {props.name}</h1>
}
function App(){
return (
<div>
    <Welcome name = "webs" />
    <Welcome name = "webstoryboy" />
    <Welcome name = "webss" />
</div>
)
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

5. props

import React from "react";
import ReactDOM from "react-dom/client";
function Hello(props){
return <h1>Hello, {props.name}</h1>
}
const element = <Hello name = "webstoryboy" />;
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(element);