React 기초

What is React?

리액트는 프론트앤드를 위한 Javascript 오픈소스 라이브러리 입니다.

 

React의 3가지 특징

선언형 (Declarative) - 한 페이지를 보여주기 위해 HTML CSS JS로 나누지 않고 하나의 파일에 작성할 수 있게합니다.

컴포넌트 기반 (Component-Based) - 서로 독립적이고 재사용 가능하게 컴포넌트를 기반으로 개발합니다.

범용성 (Learn Once, Write Anywhere) - JS 프로젝트 어디에든 유연하게 적용될 수 있습니다.

Facebook에서 관리되어 안정적이고, 가장 유명하며, 리액트 네이티브로 모바일 개발도 가능합니다.

 

JSX 규칙

1. 하나의 엘리먼트 안에 모든 엘리먼트가 포함

// 틀린 예시 - 하나의 엘리먼트 안에 모든 엘리먼트가 포함되고 있지 않음
<div>
	<h1>Hello<h1>
</div>
<div>
	<h2>World</h2>
</div>

// 옳은 예시 - 하나의 엘리먼트 안에 모든 엘리먼트가 포함되고 있음
<div>
	<div>
    	<h1>Hello</h1>
    </div>
    <div>
    	<h2>World</h2>
    </div>
</div>

2. 엘리먼트 클래스 사용 시, className 으로 표기

// 틀린 예시 - 흔히 하는 실수로 조심해야 합니다! class 가 아닌 className으로 표기해야 합니다!
<div class="greeting">Hello!</div>

// 옳은 예시
<div className="greeting">Hello!</div>

3. Javascript 표현식 사용 시, 중괄호{} 이용

function App() {
	const name = '박민혁';
    return (
    	<div>
        	Hello, {name}
        </div>
    );
}

4. 사용자 정의 컴포넌트는 대문자로 시작 (PascalCase)

// 틀린 예시 - 사용자 정의 컴포넌트를 소문자로 시작했어요
function hello() {
	return <div>Hello!</div>;
}

// 옳은 예시
function Hello() {
	return <div>Hello!</div>;
}

5. 조건부 렌더링에는 삼항연산자 사용

// if (1+1 ===2) { return 정답; }
// else { return 탈락; }
// JSX에서는 위의 if 구문을 아래처럼 사용합니다.
<div>
	{
    	(1+1 === 2) ? (<p>정답</p>) : (<p>탈락</p>
    }
</div>

6. 여러 개의 HTML 엘리먼트를 표시할 때, map() 함수를 이용

const posts = [
	{id: 1, title: 'Hello World', content: 'Welome to learning React!'},
    {id: 2, title: 'Installation', content: 'You can install React from npm.'}
];

function Blog() {
	const content = posts.map{(post) =>
    	<div key = {post.id}> // 꼭 키값을 정해줍시다! 가능하면 제공하는 id를 할당합니다!
        	<h3>{post.title}</h3>
            <p>{post.content}</p>
        </div>
	};

	return <div>{content}</div>;
}

 

 

What is Create React App?

Create React App은 리액트 SPA를 쉽고 빠르게 개발할 수 있도록 만들어진 툴 체인입니다.

// react-random-proverb 라는 새로운 리액트 프로젝트를 만들 수 있습니다
npx create-react-app react-random-proverb