리액트JS란?

반응하다

React는 2013년 Facebook에서 사용자 인터페이스(UI)를 구축하기 위해 만든 JavaScript 라이브러리입니다.
UI 구성 요소를 만들기 위한 무료 오픈 소스 프런트 엔드 JavaScript 라이브러리입니다.

React는 웹 애플리케이션용 구성 요소를 만드는 데 초점을 맞춰 만들어졌습니다. 이러한 React 구성 요소는 버튼, 텍스트, 입력, 섹션과 같은 애플리케이션의 모든 것이 될 수 있습니다.

JSX

JSX(JavaScript XML)에는 태그 이름, 속성 및 자식이 있는 구문과 같은 HTML이 있습니다. ES6(ECMAScript 2015)의 모든 기능을 제공합니다.

const  link = <span className="nav-link">About</span>

여기className는 요소에 클래스를 할당하기 위한 JSX의 태그입니다.

React DOM 렌더

ReactDom.render() 메서드는 HTML 요소를 렌더링(표시)하는 데 사용됩니다.

<div id="section">Here comes HTML</div>

<script type="text/babel"> 
ReactDOM.render( 
<h1>Here comes React</h1>, 
document.getElementById('section')); 
</script>

여기서 첫 번째 매개변수는 렌더링하려는 코드 또는 JSX이고 두 번째 매개변수는 코드 또는 JSX를 렌더링(표시)하려는 위치입니다.

JSX 표현식

JSX에서는 표현식을 중괄호로 묶어 표현식을 사용할 수 있습니다{...}.

<div id="section">Here comes HTML</div>

<script type="text/babel"> 
    const language = "React";
        ReactDOM.render( 
            <h1>Here comes {language}</h1>, 
            document.getElementById('section')); 
</script>

반응 요소

React 애플리케이션은 일반적으로 root 노드라고 하는 단일 HTML 요소를 기반으로 구축되며 다음과 같습니다.

<div id="root"></div>

React 요소는 다음과 같으며 ReactDOM.render() 메서드로 렌더링됩니다.

const  link = <span className="nav-link">About</span>

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

반응 구성 요소

React 컴포넌트는 재사용 가능한 코드 조각입니다. 이러한 구성 요소는 Javascript 함수 또는 클래스입니다.

기능성 성분

function Intro()
{ 
   return <h1>Here comes React!</h1>; 
} 
ReactDOM.render(<Intro />, document.getElementById('root'));

클래스 컴포넌트

class Intro extends React.Component
{ 
    render () 
    {
    return <h1>Here comes React!</h1>; 
    }
} 
ReactDOM.render(<Intro />, document.getElementById('root'));

반응 구성 요소 속성

속성 인수를 사용하여 이름이 Intro인 React 구성 요소 만들기

기능성 성분

function Intro(props)
{ 
return <h1>Here comes {props.name}</h1>; 
} 
ReactDOM.render(<Intro name=”React” />, document.getElementById('root'));

클래스 컴포넌트

class Intro extends React.Component
{ 
    render () 
    {
    return <h1>Here comes {this.props.name}</h1>; 
    }
} 
ReactDOM.render(<Intro name=”React” />, document.getElementById('root'));

주요 기능

가상 DOM: 응용 프로그램이 수정되거나 업데이트될 때마다 전체 응용 프로그램을 업데이트하는 대신 수정된 구성 요소만 업데이트하여 전체 UI가 가상 DOM에 의해 다시 렌더링됩니다. 이를 통해 개발에 소요되는 시간과 비용을 줄일 수 있습니다.

Javascript XML 또는 JSX: JSX는 개발자가 빌딩 블록을 매우 쉽게 작성할 수 있게 해주기 때문에 React JS의 가장 뛰어난 기능 중 하나입니다. React 구성 요소를 만들기 위한 HTML과 같은 구문이 있습니다.

React Native: 이 기능은 iOS 및 Android 플랫폼과 호환되도록 반응 코드를 변환하고 기본 기능도 제공합니다.

단방향 데이터 바인딩: 이는 react가 단방향 데이터 흐름을 사용하여 개발자가 콜백 기능을 사용하여 구성 요소를 편집하도록 하고 구성 요소를 직접 편집하지 못하게 함을 의미합니다.

선언적 UI: 이 기능은 더 읽기 쉽고 버그를 수정하기 쉬운 선언적 UI를 빌드하는 데 반응하는 데 도움이 됩니다.

구성 요소 기반 아키텍처: 이는 React의 가장 인기 있는 기능 중 하나로, 앱의 사용자 인터페이스(UI)가 여러 구성 요소로 나뉘고 각 구성 요소에는 JavaScript로 작성된 특정 논리가 있습니다

.

새로운 React 앱 만들기

Note: If you’re learning React or creating a new single-page app, use Create React App.

Node >= 14.0.0 및 npm >= 5.6이 필요합니다. 프로젝트를 만들려면 다음을 실행합니다.

npx create-react-app my-app

여기npx는 npm 5.2+와 함께 제공되는 노드 패키지 실행기 도구입니다. my-app는 프로젝트의 이름이며 원하는 대로 이름을 지정할 수 있습니다.
프로젝트 디렉토리로 이동하려면 다음을 실행하십시오.

cd my-app

localhost에서 앱을 실행하려면 다음을 실행하세요.

npm start

Create React App은 최신 개발 기능을 사용할 수 있도록 개발 환경을 설정하고 훌륭한 개발자 경험을 제공하며 프로덕션을 위해 앱을 최적화합니다.

Create React App은 프런트 엔드 빌드 파이프라인을 설정하기만 하면 원하는 모든 백엔드에서 작업할 수 있습니다. 백엔드 논리 또는 데이터베이스를 처리하지 않습니다. 내부적으로는 babel 및 webpack 를 사용합니다.

Babel이 사용되는 이유는 JSX가 모든 브라우저에서 직접 구현되는 것이 아니라 컴파일러가 JSX를 ECMAScript로 변환해야 하기 때문입니다. 여기서 babel이 사용됩니다. Webpack은 React 애플리케이션을 빌드하고 dist 폴더에 배치하는 데 사용되며 기본적으로 번들러로 사용됩니다.

모아잠 알리 팔로우

Hi there, I am Moazam Ali, a Frontend Engineer based in Pakistan. Having around 2+ years of experience in frontend development.