겁나게 쉬운 React.js 0장 : 리엑트란

Dennis Yun·2022년 2월 4일

겁나게 쉬운 React.js

목록 보기

1/1

⚠️주의!⚠️

HTML, CSS, JavaScript를 배우신 분들만 이 글을 읽으시기 바랍니다.

React.js를 배우신 적이 있거나 고수 분들은 바로 뒤로 가기 버튼을 클릭하시거나, alt + <-키를 클릭하여 이 글에서 나가시기를 권장드립니다.

1) 리엑트는...

리엑트(react.js)는 웹 프론트 엔드 프레임워크로 Meta(전 facebook)사에서 개발했습니다. JavaScript 개발되었으며, JavaScript 코드를 짜서 실행시킵니다.React.js는 AngularJS, Vue.js와 더불어 가장 인기있는 웹 프론트엔트 프레임워크입니다. npm(node package manager)다운로드 수는 React.js가 가장 많습니다.

2) 리엑트 특징

1. 리엑트는 선언형(Declarative)이다

React는 상호작용이 많은 UI를 만들 때 생기는 어려움을 줄여줍니다. 애플리케이션의 각 상태에 대한 간단한 뷰만 설계하세요. 그럼 React는 데이터가 변경됨에 따라 적절한 컴포넌트만 효율적으로 갱신하고 렌더링합니다.

선언형 뷰는 코드를 예측 가능하고 디버그하기 쉽게 만들어 줍니다.

2. 리엑트는 컴포넌트(Component) 기반이다

스스로 상태를 관리하는 캡슐화된 컴포넌트를 만들 수 있습니다. 그리고 이를 조합해 복잡한 UI를 만들어볼 수 있습니다.

컴포넌트 로직은 템플릿이 아닌 JavaScript로 작성됩니다. 따라서 다양한 형식의 데이터를 앱 안에서 손쉽게 전달할 수 있고, DOM(document object model)과는 별개로 상태를 관리할 수 있습니다.

컴포넌트 예시 코드

class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        Hello {this.props.name}
      </div>
    );
  }
}
ReactDOM.render(
  <HelloMessage name="Taylor" />,
  document.getElementById('hello-example')
);

3. 리엑트는 한 번 배워서 어디서나 사용할 수 있다

기술 스택의 나머지 부분에는 관여하지 않기 때문에, 기존 코드를 다시 작성하지 않고도 React의 새로운 기능을 이용해 개발할 수 있습니다.

React는 Node 서버에서 렌더링을 할 수도 있고, React Native를 이용하면 모바일 앱도 만들 수 있습니다.

React Native 예시 코드

import React from 'react';
import {Text, View} from 'react-native';
import {Header} from './Header';
import {heading} from './Typography';
const WelcomeScreen = () => (
  <View>
    <Header title="Welcome to React Native"/>
    <Text style={heading}>Step One</Text>
    <Text>
      Edit App.js to change this screen and turn it
      into your app.
    </Text>
    <Text style={heading}>See Your Changes</Text>
    <Text>
      Press Cmd + R inside the simulator to reload
      your app’s code.
    </Text>
    <Text style={heading}>Debug</Text>
    <Text>
      Press Cmd + M or Shake your device to open the
      React Native Debug Menu.
    </Text>
    <Text style={heading}>Learn</Text>
    <Text>
      Read the docs to discover what to do next:
    </Text>
   </View>
);

3) 리엑트를 쓰는 이유

1.단순함

컴포넌트 기반 접근법, 잘 정의된 라이프사이클 및 단순한 JavaScript 사용으로 리엑트는 학습이 매우 간단하고 전문적인 웹(및 모바일 애플리케이션)을 구축하고 이를 지원할 수 있습니다. 리엑트는 JSX라는 특별한 구문(굉장히 쉽습니다!)을 사용하여 HTML과 JavaScript를 혼합할 수 있습니다.

2. 쉬움

HTML, CSS, JavaScript에 대한 기본 지식만 있으면 됩니다.

3. 앱 개발

리엑트는 모바일 애플리케이션(Ract Native)을 만드는 데 사용할 수 있습니다. 리엑트는 코드 재이용성이 좋아서 동시에 IOS, Android, 웹 어플리케이션을 만들 수 있습니다.

4. 시험성

리엑트는 테스트하기 매우 쉽습니다.

출처

나무위키 리엑트 문서 : https://namu.wiki/w/React(%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC)
리엑트 한국 웹사이트 : https://ko.reactjs.org/
what and why react.js : https://www.c-sharpcorner.com/article/what-and-why-reactjs/

Dennis Yun

웹을 좋아하는 중학교 2학년;

겁나게 쉬운 React.js 0장 : 리엑트란