React란
의미
Facebook에서 개발한, 프론트앤드 개발을 위한 JavaScript 오픈소스 라이브러리
cf. 라이브러리와 프레임워크
라이브러리
소프트웨어를 개발할 때 컴퓨터 프로그램이 사용하는 비휘발성 자원의 모임
👉🏼 특정 기능을 모아둔 코드, 함수들의 집합이며 코드 작성 시 활용 가능한 도구들을 의미
프레임워크
원하는 기능 구현에 집중하여 개발할 수 있도록 일정한 형태와 필요한 기능을 갖추고 있는 골격, 뼈대
차이점
누가 제어의 흐름을 가지고 있는가
- 라이브러리: 사용자가 애플리케이션 코드를 직접 제어함.
- 따라서 특정 기능이 필요하다면 직접 라이브러리를 호출해서 이용하거나 기존에 구성된 함수나 코드를 이용함
- 프레임워크: 프레임워크가 애플리케이션의 코드를 제어함.
- 즉, 프레임워크의 구성 내에서 애플리케이션 코드가 수동적으로 동작함.
- 따라서 프레임워크가 제어의 흐름을 가지고 있고 사용자는 그 안에 필요한 코드를 작성함
특징
선언형(Declarative)
HTML/CSS/JS로 파일을 나누지 않고, 하나의 파일에 명시적으로 작성할 수 있도록 JSX(자바스크립트의 확장 문법)를 활용함
컴포넌트 기반(Component-Based)
하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발함
→ 컴포넌트는 서로 독립적이고 재사용 가능함
→ 기능 작동에 집중해서 개발 가능 + 유지 보수 및 유닛 테스트를 하기 쉬움
cf) 컴포넌트(Component)
-
UI를 구성하는 필수 요소로, 하나의 기능 구현을 위한 여러 종류의 코드 묶음
→ 각자의 기능을 가지고 있으면서 UI의 한 부분을 맡고 있음 -
여러 개의 컴포턴트를 조합하여 하나의 어플리케이션을 만들 수 있음
-
모든 리액트 애플리케이션은 최소 한 개의 컴포넌트를 가지고 있음
- 이 컴포넌트는 최상위 컴포넌트로, 애플리케이션 내부적으로 근원(root)의 역할을 함
- 따라서 다른 자식 컴포넌트를 가질 수 있고, 이 계층적 구조(hierarchy)를 트리 구조로 형상화할 수 있음
- 컴포넌트 트리
- 애플리케이션의 컴포넌트 예시
-
각각의 컴포넌트는 각자 고유의 기능을 가지고 있으면서 UI의 한 부분을 담당
- 독립적인 컴포넌트들을 여러 개 생성 → 컴포넌트들을 모아 UI를 구성
→ 애플리케이션 탄생!
- 독립적인 컴포넌트들을 여러 개 생성 → 컴포넌트들을 모아 UI를 구성
범용성(Learn Once, Write Anywhere)
- JavaScript 프로젝트 어디에든 유연하게 적용
- 리엑트 네이티브: 모바일 개발 가능
JSX(JavaScript XML)
JSX의 의미와 특징
의미
React로 UI를 구성할 때 사용하는 문법 → JavaScript를 확장한 문법
특징
- JSX를 통해 React 엘리먼트를 만들 수 있음
- JavaScript만으로 마크업(markup)형태의 코드를 작성하여 DOM에 배치
- CSS, JSX + Bable만을 가지고 웹 애플리케이션 개발 가능
- Babel : JSX를 브라우저가 바로 실행할 수 없기 때문에, 브라우저가 이해할 수 있는 JavaScript코드로 컴파일(변환) 해주는 것
- JSX로 작성 → Babel이 JavaScript로 컴파일 → 브라우저가 JavaScript를 읽음 → 화면에 렌더링
JSX 문법
- JSX에서 여러 엘리먼트를 작성할 때는 최상위에서 opening tag와 closing tag로 감싸주어야함
- React에서 CSS class 속성을 지정할 때는 className 으로 표기
<div>
<div className="greeting">
<h1>Hello</h1>
</div>
<div>
<h2>World</h2>
</div>
</div>```
- JavaScript 표현식 사용할 때는 꼭 중괄호{} 로 감싸주기
function App() {
const name = 'Josh Perez';
return (
<div>
Hello, {name}!
</div>
);
}- 사용자 정의 컴포넌트는 대문자로 시작하기
function Hello() {
return <div>Hello!</div>;
}
function HelloWorld() {
return <Hello/>;
}- 조건부 렌더링에는 삼항연산자 사용
<div>
{
(1+1 === 2) > (<p>정답</p>) : (<p>탈락</p>)
}
</div>map을 이용한 반복
- 여러 개의 HTML 엘리먼트를 표시할 때는 map()함수 이용
- map 함수를 사용할 때는 반드시 "key" JSX 속성을 넣어야 함
- key 속성은
map메서드 내부에 있는 엘리먼트 즉, 첫 엘리먼트에 넣기- key 속성값은 가능하면 데이터에서 제공하는 id를 할당하는 것을 권장
- key 속성값은 id와 마찬가지로 변하지 않고, 예상 가능하며, 유일해야 하기 때문
- id가 없는 경우에는 배열 인덱스를 넣어서 해결할 수 있으나, 배열 인덱스는 최후의 수단(as a last resort)으로만 사용
- key 속성값은 가능하면 데이터에서 제공하는 id를 할당하는 것을 권장
const posts = [
{ id: 1, title: "Hello World", content: "Welcome to learning React" },
{ id: 2, title: "Installation", content: "You can install React from npm" }
];
export default function App() {
// 한 포스트의 정보를 담은 객체 post를 매개변수로 받고
// obj를 JSX 표현식으로 바꿔 리턴해주는 함수 postToJSX
const postToJSX = (post) => {
return (
<div key={post.id}>
<h3>{post.title}</h3>
<p>{post.content}</p>
</div>
);
};
return (
<div className="App">
<h1>Hello JSX</h1>
{posts.map(postToJSX)}
</div>
);
}참고자료
React 공식 홈페이지
[개발상식] 프레임워크(Framework) 와 라이브러리(Library)의 차이
