React는 Facebook에서 개발한 오픈 소스 자바스크립트 라이브러리입니다.
React는 Facebook에서 개발한 오픈 소스 자바스크립트 라이브러리입니다. React는 사용자 인터페이스를 만들기 위한 도구로 사용됩니다. React는 컴포넌트라고 하는 재사용 가능한 UI 요소를 만드는 데 중점을 둡니다. 각 컴포넌트는 자체적으로 상태를 관리하며, 필요에 따라 데이터를 받아와서 화면에 렌더링합니다.
React는 가상 DOM(Virtual DOM)을 사용하여 효율적인 업데이트를 가능하게 합니다. React는 상태 변경이 있을 때마다 전체 페이지를 다시 로드하는 대신, 변경된 부분만 업데이트하여 더 빠른 성능을 제공합니다. 이러한 기능으로 인해 React는 단일 페이지 어플리케이션(SPA)을 만들기에 매우 적합하며, 현재 웹 개발에서 가장 인기 있는 프론트엔드 라이브러리 중 하나입니다.
React를 사용하려면 먼저 Node.js를 설치해야 합니다. Node.js는 React와 함께 사용될 수 있는 JavaScript 런타임 환경입니다. Node.js를 설치하려면 Node.js 공식 웹사이트(https://nodejs.org/)에서 다운로드 받아 설치하세요.
Node.js를 설치하면 npm이 자동으로 설치됩니다. npm(Node Package Manager)은 Node.js 패키지 관리자입니다. npm을 사용하면 다른 사람이 만든 패키지를 쉽게 설치하고 관리할 수 있습니다. npm은 패키지 설치, 업데이트, 제거 및 의존성 관리를 포함한 다양한 작업을 수행할 수 있습니다.
Compiled successfully!
You can now view react1 in the browser.
Local: http://localhost:3000
On Your Network: http://192.168.0.145:3000
Note that the development build is not optimized.
To create a production build, use npm run build.
webpack compiled successfully
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
JSX(JavaScript XML)는 React에서 UI를 구성하는 데 사용되는 문법입니다. JSX는 HTML과 매우 유사하게 생겼지만, JavaScript를 확장한 문법입니다. JSX는 React 컴포넌트에서 UI를 정의할 때 사용되며, 이를 사용하면 JavaScript 코드 안에 HTML 코드를 작성할 수 있습니다.
JSX는 React에서 UI를 작성하는 데 매우 편리한 문법이며, JavaScript 코드와 HTML 코드를 혼합하여 작성하므로 가독성이 높고, 개발자들이 UI를 더 쉽게 작성할 수 있도록 도와줍니다.
import React from "react";
import ReactDOM from "react-dom/client";
const name = "dongjin";
const hello = <h1>hello {name}</h1>;
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(hello);
// hello dongjin
객체와 함수를 같이 사용한 경우
import React from "react";
import ReactDOM from "react-dom/client";
function helloName(){
return name.nick;
};
const name = {
nick : "dongjin"
}
const hello = <h1>Hello, {helloName()}</h1>;
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(hello);
// Hello, dongjin
React 컴포넌트를 화면에 그리는 과정이 랜더링이라고 할 수 있습니다. React에서 랜더링은 컴포넌트가 변화하면 다시 랜더링을 수행하여 변화된 내용을 화면에 반영하는 것을 말합니다. React는 Virtual DOM을 사용하여 랜더링 성능을 최적화하고, 필요한 부분만 업데이트하도록 처리하여 불필요한 랜더링을 줄입니다.
import React from 'react';
import ReactDOM from 'react-dom';
// 자바스크립트 javascript 유형
// function clock(){
// let clock = document.getElementById("clock");
// setInterval(function(){
// clock.innerHTML = new Date().toLocaleDateString();
// }, 1000);
// };
// clock();
// 리액트 react 유형
function clock(){
const element = (
<div>
<div>hello, dongjin</div>
<h2>지금은 {new Date().toLocaleDateString()}입니다.</h2>
</div>
);
ReactDOM.render(element, document.getElementById('root'));
};
export default clock;
리액트(React)는 UI(User Interface) 라이브러리로, 웹 어플리케이션의 구성 요소를 모듈화하여 개발할 수 있도록 지원합니다. 이러한 모듈화된 구성 요소를 컴포넌트(Component)라고 합니다.
리액트의 컴포넌트는 크게 두 가지 유형으로 나눌 수 있습니다. 하나는 클래스 컴포넌트(Class Component)이고, 다른 하나는 함수형 컴포넌트(Functional Component)입니다. 클래스 컴포넌트는 클래스로 정의되며, 라이프사이클 메서드(lifecycle methods)를 사용하여 컴포넌트의 생명주기에 따른 작업을 수행할 수 있습니다. 반면, 함수형 컴포넌트는 함수로 정의되며, Hooks를 사용하여 상태와 라이프사이클 메서드와 같은 기능을 구현할 수 있습니다.
import React from "react";
import ReactDOM from "react-dom/client";
function Hello(){
return <h1>Hello, dongjin</h1>
}
const element = <Hello />
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(element);
▶️ 2개의 컴퍼넌트 합치기
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 = "shin" />
<Welcome name = "dong" />
<Welcome name = "jin" />
</div>
)
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
리액트(React)에서 props는 부모 컴포넌트로부터 자식 컴포넌트에게 전달되는 데이터를 의미합니다. 이를 통해 자식 컴포넌트에서는 받은 데이터를 사용하여 UI를 렌더링하거나, 부모 컴포넌트에게 이벤트를 전달할 수 있습니다.
props는 부모 컴포넌트에서 자식 컴포넌트로 단방향으로 전달됩니다. 자식 컴포넌트는 props를 변경할 수 없으며, 오직 읽기 전용입니다. 이러한 단방향 데이터 흐름은 애플리케이션의 상태 관리를 간소화하고, 컴포넌트 간의 결합도를 낮추어 유지보수성과 확장성을 높입니다.
import React from "react";
import ReactDOM from "react-dom/client";
function Hello(props){
return <h1>Hello, {props.name}</h1>
}
const element = <Hello name = "dongjin" />
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(element);