[React] React.js 시작하기

 

 

 

 

[ CONTENTS ]

1. Reac 실행 명령어

2. React 에서 Jquery 사용하기

3. React prop 사용하기

 

 

---

 

 

React 란?

리액트는 사용자 인터페이스를 만드는 데 사용하는 자바 스크립트 라이브러리이며, 오직 View 만 신경 쓰는 라이브러리이다.

 

 

React 특징

리액트의 주요 특징 중 하나는 Virtual DOM 을 사용한다. DOM(Document Object Model) 은 객체로 문서 구조를 표현하는 방법으로 XML 이나 HTML 로 작성한다. 웹 브라우저는 DOM 을 활용해서 객체에 자바스크립트와 CSS 를 적용하고 DOM 은 트리 형태라서 특정 노드를 찾거나 수정하거나 제거하거나 원하는 곳에 삽입할 수 있다.

 

 

 

왜 리액트 컴포넌트에서 요소 여러 개를 하나의 요소로 감싸주어야 할까?

Virtual DOM 에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문입니다.

 

function App(){
	return(
    	<div>
        	<h1>리액트 안녕</h1>
        	<h2>hello world</h2>
        </div>
    )
}

 

 

꼭 div 요소를 사용하지 않더라도 Fragment 라는 기능을 사용하면 된다.

 

function App(){
	return(
    	<Fragment>
        	<h1>리액트 안녕</h1>
        	<h2>hello world</h2>
        </Fragment>
    )
}

 

 

 

렌더링이란?

사용자 화면에 뷰를 보여주는 것을 렌더링이라고 한다.

 

 

 

---

 

 

1. React 실행 명령어 (vscode 내 터미널에서)

 

1. 폴더 생성

2. cd 폴더

3. npx create-react-app .

4. npm install react-router-dom

5. npm start

6. React 폴더 구조가 생성 된다.

 

 

localhost:3000

 

 

 

 

 

2. React 에서 Jquery 사용하기

 

1. cd 폴더

2. npm install jquery

3. App.js 수정

 

import './App.css';
import Jquery from './R016_Jquery';

function App() {
  return (
    <div>
      <h1>Start React 200!</h1>
      <p>CSS 적용하기</p>
      <Jquery />
    </div>
  );
}

export default App;

 

 

4. Jquery 파일 작성

 

import React, {Component} from 'react';
import $ from 'jquery';

class R016_Jquery extends Component {
    input_alert = (e) => {
        var input_val = $('#inputId').val();
        alert(input_val);
    }
    render(){
        return(
            <div>
                <h2>[THIS IS Jquery]</h2>
                <input id="inputId" name="inputName"/>
                <button id="ButtonId" onClick={e=>this.input_alert(e)}>Jquery Button </button>
            </div>
        )
    }
}

export default R016_Jquery;

 

 

 

5. 웹 실행 화면

 

 

 

3. React props 사용하기

props 란, 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달할 때 사용한다. props 를 전달받은 자식 컴포넌트에서는 데이터를 수정할 수 없다. 데이터를 변경하기 위해서는 컴포넌트 내부에서만 사용하는 변수에 값을 넣어 사용해야 한다.

 

 

 

1. App.js 수정

 

import './App.css';
import Props from './R017_Props';

function App() {
  return (
    <div>
      <h1>Start React 200!</h1>
      <p>CSS 적용하기</p>
      <Props props_val="THIS IS PROPS" />
    </div>
  );
}

export default App;

 

 

2. prop 파일 작성하기

 

import React, { Component } from 'react'

class R017_Props extends Component {
    render() {
        let props_val = this.props.props_val;
        props_val += ' from App.js'
        return (
            <div>
                {props_val}
            </div>
        )
    }
}
export default R017_Props;

 

 

 

3. 웹 실행 화면

 

 

 

 

*참고 : 본 포스팅은 도서 [초보자를 위한 리액트 200제] 로 공부하며 정리한 내용이다.