React?
프론트 개발을 위한 JavaScript 오픈소스 라이브러리
리액트의 가장 큰 특징은 페이지 단위가 아닌 컴포넌트 단위로 시작
상향식으로 앱 제작 → 테스트가 쉽고 확장성이 좋다
따라서 페이지를 만들기 이전에 컴포넌트를 먼저 만들고 조립
하나의 컴포넌트는 한 가지 일만 한다.
컴포넌트 단위로 재사용성이 좋음
react 특징
•
선언형 (Declarative)
하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향
직관적이므로 코드만 보고도 실제 웹 어플리케이션의 모습을 상상할 수 있다.
•
컴포넌트 기반
하나의 기능 구현을 위해 여러 종류의 코드를 묶어놓은 컴포넌트를 기반
컴포넌트로 분리하면 서로 독립적이고 재사용이 가능하기 때문에 기능 자체에 집중하여 개발할 수 있음
유지보수가 편하고 유닛 테스트 하기 좋음
•
범용성
자바스크립트 라이브러리, 자바스크립트 프로젝트 어디에든 유연하게 적용
리액트 네이티브 사용하여 모바일 개발 가능
Virtual Dom
꼭 바꿔야하는 일부만 수정
브라우저가 모든 파일을 렌더링 하지 않고 리소스 재활용하는 효과
부드럽고 빠른 페이지 전환과 연속적인 사용자 경험
첫 방문 시 javascript 파일을 받아야 하기 때문에 로드 시간이 걸리지만 재 방문 시에는 가상돔을 사용하여 빠름
JSX (JavaScript XML)
JavaScript를 확장한 문법
JSX는 React element를 생성
JSX는 HTML처럼 보이지만 HTML이 아니다! 브라우저는 JSX를 바로 실행할 수 없음. 따라서 브라우저가 이해할 수 있는 코드인 JS 코드로 변환시켜주어야함.
이때 JSX를 JS로 컴파일해주는 것이 바로 Babel
Babel을 통해 JS로 컴파일 후 브라우저가 이를 읽고 렌더링 가능
React에서는 DOM과 달리 CSS, JSX 문법만을 가지고 웹 애플리케이션 개발이 가능하다
하나의 컴포넌트를 구현하기 위한 파일이 줄어 한눈에 컴포넌트를 확인할 수 있다.
JSX를 사용하여 JS만으로 마크업 형태의 코드를 작성하여 DOM에 배치할 수 있다.
왜 JSX를 써야할까?
기존에는 DOM에서 JS와 함께 사용하기 위해서는 HTML에서 inline방식이나 script 태그를 사용하여 외부 JS파일을 연결해주어야 했다.
하지만 JSX를 사용하게되면 JS문법과 HTML문법을 동시에 이용하여 구조와 기능을 한눈에 파악할 수 있다.
JSX 없이도 개발은 가능! 하지만 코드가 복잡하고 가독성이 떨어짐
구조와 동작에 대한 코드를 묶어놓은 코드셋을 컴포넌트라고 한다.
JSX 규칙
•
하나의 엘리먼트 안에 모든 엘리먼트가 포함
여러 엘리먼트를 작성하고자 하는 경우 opening tag와 closing tag로 감싸주어야 한다.
•
JavaScript 표현식 사용 시 중괄호 {} 이용
JSX의 중괄호 안에는 유효한 모든 JavaScript 표현식을 넣을 수 있음
function App() {
const name = "Soyeon";
return (
<div>
Hello, {name}!
</div>
);
}
JavaScript
복사
•
엘리먼트 클래스 사용 시, className으로 표기
<div className="user_info">soyeon</div>
JavaScript
복사
•
사용자 정의 컴포넌트는 대문자로 시작 (PascalCase)
소문자로 시작하면 일반적인 HTML 엘리먼트로 인식하게됨
function Hello() { // Hello 대문자로 시작
return <div>Hello!</div>;
}
JavaScript
복사
•
조건부 렌더링에는 삼항 연산자 사용
<div>
{
(1 + 1 === 2) ? (<p>정답</p>) : (<p>탈락</p>)
}
</div>
JavaScript
복사
•
여러개의 HTML 엘리먼트를 표시할 때 map()함수 사용
map 함수를 사용할 때는 반드시 key JSX 속성을 넣어야한다!
const posts = [
{id: 1, title: 'Hello', content: 'welcome'},
{id: 2, title: 'Bye', content: 'See you later'}
]
function Blog() {
const content = posts.map((post) =>
<div key={post.id}>
<h3>{post.title}</h3>
<p>{post.content}</p>
</div>
);
return (
<div>
{content}
</div>
);
}
JavaScript
복사
key값으로 상요할 안정적인 id가 없다면 최후의 수단으로 항목의 인덱스를 key로 사용가능
항목의 순서가 바뀔 수 있는 경우에는 key에 인덱스 사용을 권장하지 않음. 이로 인해 성능이 저하되거나 컴포넌트 state와 관련된 문제가 발생할 수 있다.
const todoItems = todos.map((todo, index) =>
// Only do this if items have no stable IDs
<li key={index}>
{todo.text}
</li>
);
JavaScript
복사
•
중괄호를 쓰면 JavaScript 코드로 인지하므로 함수 안에 return이 존재해야한다. ()로 묶으면 ()안의 값이 리턴값이 된다.
•
태그