리액트 공부 1일차

리액트의 특징

• 오직 V(view)만 신경 쓰는 라이브러리다.
• Virtual DOM 방식을 사용하여 DOM 업데이트를 추상화함으로써 DOM 처리 횟수를 최소화하고 효율적으로 진행한다. (아직 무슨 말인지 와닿지 않음)
• 지속적으로 데이터가 변화하는 대규모 애플리케이션을 구축하기 위해 리액트가 만들어졌다.
• 다른 웹 프레임워크나 라이브러리와 혼용할 수 있다. ex) React + Vue.js, React + react-router + redux ...

작업 환경 설정

필수 설치

• Node.js / npm
• Git

부가 설치

• yarn
• vscode or webstorm
• eslint
• prettier

JSX

JSX는 자바스크립트의 확장 문법이며 브라우저에서 실행되기 전에 바벨을 사용하여 일반 자바스크립트의 형태의 코드로 변환된다.

// jsx 형태
function App() {
	return (
    	<div>
        	Hello <b>react</b>
        </div>
    );
}

// 바벨을 사용하여 변환된 후의 모습
function App() {
  return React.createElement("div", null, "Hello ", React.createElement("b", null, "react"));
}

JSX 문법

• 최상위 부모 요소는 하나여야 한다. = return에 여려개의 태그는 문법 에러
• undefined만 반환하여 랜더링하는 상황을 만들면 안된다.
• class 대신 className을 사용한다
• 반드시 닫는 태그를 작성해야한다. HTML에서는 input 태그의 경우 닫는 태그가 필요 없지만 jsx에서는 닫는 태그 있어야함

컴포넌트 생성

import React from 'react';

const MyComponent = () => {
  return <div>나의 컴포넌트</div>;
};

export default MyComponent;

컴포넌트의 이름의 첫글자는 대문자를 사용한다. 다른 파일에서 이 컴포넌트를 사용하기 위해 export default MyComponet로 모듈을 내보낸다.

import React from 'react';
import MyComponent from './MyComponent';

const App = () => {
  return <MyComponent><MyComponet />;
};

export default App;

App 컴포넌트에서 MyComponent 컴포넌트를 불러와서 사용하는 코드