본 내용은 코딩애플 강의를 기반으로 정리하였습니다.

1. 리액트 프로젝트 만들기

npx create-react-app app이름

위와 같이 입력하면 파일 구조를 만들어주고,

2. 리액트 실행하기

npm start

리액트 프로젝트 미리보기를 확인할 수 있다.

3. React 코드 수정

import logo from './logo.svg';
import './App.css';

function App() {
	return (
		<div className="App">
			<div></div>
		</div>
	);
}

export default App;

왜 js파일에 html 파일이 존재하는가

이거는 html이 아니라 jsx라는 언어라서 그렇다.

jsx : js에서 쓸 수 있는 html의 대용품 같은 역할

이걸 쓰는 이유는…

원래 리액트에서 div 를 만들 때

React.createElement('div', null, 'Hello World');

위와 같이 사용해줘야 함. 이런식으로 쓰면 사람들이 너무 어려우니까 jsx로 가독성을 높이겠다.

4. jsx 수정

일반 html 처럼 class 를 먹이고 css로 수정하면 동작한다.

import logo from './logo.svg';
import './App.css';

function App() {
	return (
		<div className="App">
			<div className="black-nav">
				<h4>블로그임</h4>
			</div>
		</div>
	);
}

export default App;

.black-nav {
	display: flex;
	background: black;
	width: 100%;
	color: white;
	padding-left: 20px;
}

1) className을 사용하라

그러나 jsx 안에서는 class라고 쓰면 안되고, className 넣어야 함.

왜냐, jsx는 결론적으로는 js파일이기 때문에, class를 쓰면, js의 class로 인식되어버림 그래서 className으로 사용해줘야 한다.

2) jsx내에선 {} 안에 변수를 넣어서 출력가능

import logo from './logo.svg';
import './App.css';

function App() {
	let post = '강남 우동 맛집';

	return (
		<div className="App">
			<div className="black-nav">
				<h4 id={post}>블로그임</h4>
			</div>
			<h4>{post}</h4>
		</div>
	);
}

export default App;

위와 같이 {} 안에 post를 넣어서 사용하면 된다.

id에도 넣어서 사용할 수 있다.

이걸 데이터 바인딩..

3) style을 넣을 땐 style = { }

import logo from './logo.svg';
import './App.css';

function App() {
	let post = '강남 우동 맛집';

	return (
		<div className="App">
			<div className="black-nav">
				<h4 style={{ color: 'red', fontSize: '30px' }}>블로그임</h4>
			</div>
			<h4>{post}</h4>
		</div>
	);
}

export default App;

위와 같이 style을 사용할 때는, {} 안에 object 형식으로 넣어줘야한다.