Skip to main content

REACT

Yeo Da Seul

REACT

❤️REACT

React는 Facebook에서 개발한 JavaScript 기반의 프론트엔드 라이브러리입니다.

React를 사용하면 동적인 사용자 인터페이스를 만들 수 있으며, 가상 DOM을 사용하여 웹 애플리케이션의 성능을 최적화할 수 있습니다. React는 컴포넌트 기반으로 작동하며, 컴포넌트는 UI 요소를 렌더링하고 상태를 관리하는 자체적인 기능 단위입니다. 이러한 컴포넌트는 더 큰 애플리케이션을 작고 재사용 가능한 단위로 분할하여 작성할 수 있으므로 코드의 유지 보수성과 재사용성이 향상됩니다.

🧡REACT 설치

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

Node.js와 npm이 설치되어 있는지 확인하세요.이를 확인하려면 터미널 또는 명령 프롬프트에서 다음 명령어를 입력하세요.

1. npx create-react-app react1
2. 해당 경로로 이동
3. npm start 
Compiled successfully!

You can now view react1 in the browser.

    Local:            http://localhost:3000
    On Your Network:  http://192.168.0.140:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully

scss 설치

npm install sass

router 설치 (가상의 주소를 만들어줌)

npm install react-router-dom

axios 설치

npm install axios

prop-types 설치

npm install prop-types

gsap 설치

npm i gsap
"dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^1.4.0",
    "gsap": "^3.11.5",
    "prop-types": "^15.8.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.11.2",
    "react-scripts": "5.0.1",
    "sass": "^1.62.1",
    "web-vitals": "^2.1.4"
},

yarn 설치

npm install -g yarn
yarn --version

vue cli 설치

npm install -g @vue/cli

vue 파일 생성

vue create site-vue

vue 설치할 때 설정

Vue CLI v5.0.8
    ? Please pick a preset: Manually select features
    ? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
    ? Choose a version of Vue.js that you want to start the project with 3.x
    ? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
    ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
    ? Pick a linter / formatter config: Standard
    ? Pick additional lint features: Lint on save
    ? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
    ? Save this as a preset for future projects? No

💛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 코드를 결합해 코드의 가독성과 유지 보수성을 높여주며, React 엘리먼트를 생성하는 데에도 사용됩니다. 

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

const name = "Yeo Da Seul";
const hello = <h1>hello {name}</h1>;

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(hello);

//hello Yeo Da Seul

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

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

function helloName(){
    return name.nick;
}

const name = {
    nick: "JJUL",
}

const hello = <h1>Hello, {helloName()}</h1>;

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(hello);

//hello JJUL

3. 렌더링

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

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

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

function clock(){
    const element = (
    <div>
        <div>hello, jjul</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';

function Hello() {
    return <h1>Hello, YDS</h1>
}
const element = <Hello />;

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

export default Hello;

// Hello, YDS        


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 = "YDS"/>
        <Welcome name = "Yeo Da Seul"/>
        <Welcome name = "JJUL"/>
    </div>
    )
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);     


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

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

function Comment(props){
    return (
    <div>
        <div>{formatDate(props.date)}</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
    )
}

const comment = {
    date: new Date(),
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Comment date={comment.date}/>);    


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

function Hello(props){
    return (
        <div>
        <div><h1>{props.title1}</h1></div>
        <div><h1>{props.title2}</h1></div>
        <div><h1>{props.title3}</h1></div>
        <div><h1>{props.title4}</h1></div>
        </div>
    )
}

const name = {
        name: "YDS",
        text: "오늘의 점심은 쌀국수",
        author: {
        name: "해피반미",
        url: "JMT"
    }
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Hello title1={name.name} title2={name.text} title3={name.author.name} title4={name.author.url}/>);

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 = "YDS"/>;

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(element);

// Hello, YDS