[벨로퍼트] #1

노마드코더 듣다가... 도저히 뭔말몰이라서 벨로퍼트님의 강의를 듣기 시작

 

리액트는 컴포넌트에 집중되어 있는 라이브러리.

 

리액트의 Virtual DOM

• 자바스크립트로 이루어진 가상의 DOM에 한번 렌더링하고, 기존의 DOM과 비교 후 정말 변화가 필요한 곳에만 업데이트

• 바뀐 부분만 찾아서 바꿔주는 것!

 

JSX

참고자료 : https://react-anyone.vlpt.us/03.html

HTML과 비슷하지만 지켜야 할 규칙이 몇 가지 있다.

• 태그는 꼭 닫혀있어야 한다.

  예를 들어 input 태그의 경우, </input> 이렇게 닫아도 되지만, /> 이렇게 닫아도 된다. (self-closing tag)

• 2개 이상의 엘리먼트는 무조건 하나의 엘리먼트로 감싸져있어야 한다.

  ( > 16.2에 Fragment라는 기능이 도입됨. 마치 맨 겉의 div처럼 엘리먼트들을 감싸주지만 코드를 보면 div 없이 깔끔~)

JSX 안에 자바스크립트 값 사용하기

• 중괄호 { } 를 사용한다.

조건부 렌더링

• 삼항연산자를 사용한다.

 

PROPS & STATE

PROPS

• Props : 부모 컴포넌트가 자식 컴포넌트에게 값을 전달할 때 사용.
  <Child value="value" />에서 value가 하나의 props인 것.
• (참고) 모든 컴포넌트는 render라는 함수가 있어야 함,,
  그리고 render 함수에서는 JSX를 return 해줘야 함,,

App.js

MyName.js

 

• 함수형 컴포넌트 사용 시에는 { Component } 이거를 import 안 해도 된다.

함수형 컴포넌트로 만든 MyName.js

 

STATE

• props는 읽기 전용인데 반해, state는 내부에서 변경할 수 있다. 변경할 때는 setState 라는 함수 사용