🤷React란?

html + css + js

• JSX(JavaScript XML)는 Javascript에 XML을 추가한 확장한 문법입니다.

• 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아닙니다.

• 하나의 파일에 자바스크립트와 HTML을 동시에 작성하여 편리합니다.
  
  

JSX 문법

반드시 부모 요소 하나가 감싸는 형태여야 한다.

function App() {
	return (
		<div>
			<div>Hello</div>
			<div>Wold</div>
		</div>
	);
}
export default APP

JSX 스타일링🎨

• JSX에서 자바스크립트 문법을 쓰려면 {}를 써야 하기 때문에, 스타일을 적용할 때에도 객체 형태로 넣어 줘야 합니다.
• 카멜 표기법으로 작성해야 합니다. (font-size => fontSize)

function App() {
	const style = {
		backgroundColor: 'green',
		fontSize: '12px'
	}
	return (
		<div style={style}>Hello</div>
	);
}

🤷‍♀️엘리먼트란?

• 리액트에서의 가장 작은 단위 입니다.
• 화면에 표시할 내용을 기술 합니다.

const element = <h1>hello</h1>;

엘리먼트 렌더링 하기

ex) 루트 노드

<div id="root"></div>

ex) 엘리먼트

const element = <h1>hello</h1>;

React 엘리먼트를 루트 DOM 노드에 렌더링하려면 ReactDOM.render()로 전달하면 됩니다.


ex) 루트 노드에 엘리먼트 렌더링 하기

const element = <h1>hello</h1>;
ReactDOM.render(element, document.getElementById('root'));

렌더링 된 엘리먼트 업데이트 하기

• React 엘리먼트는 불변 객체로 엘리먼트 생성 이후 해당 엘리먼트의 자식, 속성 등을 변경할 수 없습니다.

• 지금까지 알고 있는 방법으로 UI를 업데이트 하는 방법은 새로운 엘리먼트를 생성하고, ReactDOM.render() 함수로 전달하는 방법 뿐입니다.

// setInterval() 콜백을 이용해 1초마다 ReactDOM.render()를 호출하여 갱신한다.
function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(element, document.getElementById('root'));
}

setInterval(tick, 1000);

특징

• React는 가상 돔을 사용하여, 변경된 텍스트 노드만 업데이트 되며 가상돔을 사용하는 특징 중 하나입니다.
  
  
  
  

💁리액트 컴포넌트(Component)란?

• 리액트로 만들어진 앱을 이루는 최소한의 단위입니다.

• 기존의 웹 프레임워크는 MVC방식으로 분리하여 관리하기 때문에 각 요소의 의존성이 높아 재활용이 어렵다는 단점이 있었습니다. 반면 컴포넌트는 MVC의 뷰를 독립적으로 구성하여 재사용을 할 수 있고 이를 통해 새로운 컴포넌트를 쉽게 만들 수 있습니다.

• 컴포넌트는 데이터(props)를 입력받아 View(state) 상태에 따라 DOM Node를 출력하는 함수입니다.

• 컴포넌트 이름은 항상 대문자로 시작해야 합니다.

• UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 나누어 코딩합니다.

• “props”라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환합니다.

컴포넌트의 종류

1) 함수형 컴포넌트 (Stateless Functional Component)
import React from 'react';

function MyComponent(props) {
	return <div>Hello, {props.name}</div>;
}

export default MyComponent; //다른 JS파일에서 불러올 수 있도록 내보내주기

2) 클래스형 컴포넌트 ( Class Component )

• 컴포넌트 구성 요소, 리액트 생명주기를 모두 포함하고 있습니다.

• 프로퍼티, state, 생명주기 함수가 필요한 구조의 컴포넌트를 만들 때 사용합니다.

• 함수형 컴포넌트로 작업을 처리하지 못할 때 사용합니다.

import React from 'react';

class MyComponent extends React.Component {
	constructor(props) { // 생성함수
		super(props);
	}
	
	componentDidMount() { // 상속받은 생명주기 함수
	}
	
	render() { // 상속받은 화면 출력 함수, 클래스형 컴포넌트는 render() 필수
		return <div>Hello, {this.props.name}</div>;
	}
}

export default MyComponent; //다른 JS파일에서 불러올 수 있도록 내보내주기

자바스크립트 라이브러리의 관리를 용이하게 도와주는 툴

npm install package
npm uninstall package

create-react-app

npm install -g create-react-app

버전확인

create-react-app -V

리엑트 프로젝트 생성
npx create-react-app my-app(저장하고 싶은 폴더명 my-app)

cd my-app (my-app 폴더로 이동)

npm start (react 실행)