React 시작하기

Suyeon Kim·2020년 5월 9일
1

React

목록 보기
1/5

React ?

VirtualDom
: 리액트가 관리하는 가상 DOM. (브라우저의 DOM과 별도)

  • 페이지 내 내용이 변경되면 VirtualDom 은 차이가 있는 부분을 확인한다.
  • 자체적으로 변경된 부분만 찾아서 Reflow(재렌더링) 한다.

JSX (JavaScript+XML)
: 자바스크립트를 확장한 프로그래밍 언어.

장점?

1) Component 를 사용하여 속도가 빠르다.
2) react-dom 이라는 가상돔에서 만든다.

단점?

1) 단방향, 데이터를 바꿀 때 전체(최상위)를 바꿔야 함. -개선된것 Redux
2) function 기반은 전역변수 사용이 어렵다. -개선 Hooks (속성으로 넘기기힘듦 - UserState: state를 자유자재로 쓸수있음)

설치

리액트를 사용하기위해 아래 순서대로 설치를 진행해준다.

1. Node.js 설치

2. React 설치

C:\Users\sist27>npm install -g create-react-app

3. WebStorm 설치 (편집기)


React 프로젝트 생성/실행 with WebStorm


  1. New Project 생성 후 (왼쪽 사이드바에 React App 선택)
    image

  2. App.js 에서 약간의 수정이후 터미널에서 npm start 를 실행한다.
    image (1)

  3. package.json 의 dependencies 에 axios 버전을 추가해준다.


"axios": "^0.19.2"

Component 기본 형식 [class 기반, function 기반]

class 기반 : 생명주기가 있음

    class App extends Component
    {
        constructor(){}
        // 화면에 불러오기 전 (데이터 받기전)
        componentWillMount()
        // 화면 출력을 읽는 데이터 (데이터 받음)
        render(){}
        // 화면을 출력 (onLoad() 와 비슷)
        componentDidMount()
        //javaScript onLoad() 방식은 아래와 같음.
        componentDidMount() => $(function(){})
            $(document).ready(function(){})
            window.onload=function(){}
    }

function : 생명주기가 없음 -> Data를 넘겨주는 방식 -> 그런데 어려움 -> Hooks 사용

    function App()
    {
        return{
            <html>
            </html>
        )
    }

JSX 형식

  1. 반드시 계층구조를 만든다.
<div>Hello</div>
<div>React</div>
//- Error
/* 계층구조로 아래와 같이 */
<div>
  	<div>Hello</div>
	<div>React</div>
</div>
  1. HTML 태그는 반드시 소문자
<Html> => //- Error
  1. 속성은 반드시 ""
<table width="100">
<table width=100> //- Error
profile
내맘대로 개발

0개의 댓글