리액트
- 리액트는 프론트앤드 개발을 위한 JS 오픈소스 라이브러리 입니다.
- 리액트는 선언형이다.
- 리액트는 컴포넌트 기반이다.
- 리액트는 다양한 곳에서 활용가능하다.
선언형
- 코드를 자세히 분석하지 않고도 코드의 의도를 알 수 있게 해주는 것
리액트는 한 페이지를 보여주기 위해 HTML/CSS/JS로 나눠서 적기 보다는 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향합니다.
컴포넌트 기반(Component-Based)
리액트는 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발합니다.
컴포넌트로 분리하면 서로 독립적이고 재사용 가능하기 때문에, 기능 자체에 집중하여 개발할 수 있습니다.
범용성(Learn Once, Write Anywhere)
리액트는 JS 프로젝트 어디에든 유연하게 적용될 수 있습니다.
페이스북에서 관리되어 안정적이고, 가장 유명하며, 리액트 네이티브로 모바일 개발도 가능합니다.
JSX
- JavaScript XML의 줄임말로 문자열도 아니고 HTML도 아닙니다.
- React에서 UI를 구성할 때 사용하는 문법으로 JS를 확장한 문법입니다.
- 이 문법을 통해 React 엘리먼트를 만들 수 있습니다.
JSX는 JS가 확장된 문법이지만, 브라우저가 바로 실행할 수 있는 코드가 아닙니다. 이를 JS코드로 변환하여 사용해야 하는데
이는 "Babel"을 통해 JSX를 브라우저가 이해할 수 있는 JS로 컴파일 합니다.
컴파일 후 JS를 브라우저가 읽고 화면에 렌더링할 수 있습니다.
리액트에서는 DOM과 다르게 CSS,JSX만 가지고 웹 애플리케이션을 개발할 수 있씁니다. 즉 컴포넌트 하나를 구현하기 위해서 필요한 파일이 줄어들고, 한눈에 컴포넌트를 확인가능합니다.
즉 JSX를 사용하면 JS만으로 마크업 형태의 코드를 작성하여 DOM에 배치할 수 있게 되는겁니다.
JSX는 HTML이 아니기 때문에 "Babel"을 통해 컴파일 과정이 필요합니다.
HTML과 JS를 이용하기 위해서는 HTML에 JS와 연결하기 위한 script 태그를 이용한 연결이 필요한데
리액트는 JSX를 이용해서 앞서 HTML과 JS를 연결한 코드보다 명시적으로 코드를 작성할 수 있습니다.
이렇게 구조와 동작에 대한 코드를 한 뭉치로 적은 코드셋을 컴포넌트라고 합니다.
JSX 없이 리액트 요소를 만들수는 있지만 코드가 복잡해지고, 가독성이 떨어집니다.
JSX 활용법
<div>
<div>
<h1>hello</h1>
</div>
<div>
<h2>World</h2>
</div>
</div>JSX에서 여러 엘리먼트를 작성하고자 하는 경우, 최상위에서 OPEN TAG와 CLOSE TAG로 감싸주어야 합니다.
<div className="greeting">Hello!</div>리액트에서 css class 속성을 지정하려면 "className"으로 표기해야 합니다.
만약 class로 작성하게 되면 리액트에서는 이를 html 클래스 속성 대신 자바스크립트 클래스로 받아들이기 때문에 주의해햐 합니다.
function App() {
const name = 'Josh Perez';
return (
<div>
Hello, {name}!
</div>
);
}JSX에서 JS를 쓰고자 한다면, 꼭 중괄호를 이용해야 합니다.
중괄호를 이용하지 않으면 일반 텍스트로 이해합니다.
function Hello() {
return <div>헬로우</div>
}
function HelloWorld() {
return <Hello />;
}리액트 엘리먼트가 JSX로 작성되면 "대문자"로 시작해야 합니다.
소문자로 시작하게 되면 일반적인 HTML 엘리먼트로 인식하게 됩니다.
이렇게 대문자로 정의된 JSX컴포넌트를 따로 사용자 정의 컴포넌트라 부릅니다.
<div>
{
(1+1 === 2) ? (<p>정답</p>) : (<p>탈락</p>)
}
</div>조건부 렌더링은 if문이 아닌 삼항연사자를 이용해야 합니다.
const posts = [
{id: 1, title: "Hello World', content: 'Welcome to learning React!'},
{id: 2, title: "Hello World2', content: 'You can install React from npm'},
];
function Blog(){
const content = posts.map((post) =>
<div key = {post.id}>
<h3>{post.title}</h3>
<p>{post.content}</p>
</div>
);
return (
<div>
{content}
</div>
)
}React 에서 여러 개의 HTML 엘리먼트를 표시할 때는 "map()" 함수를 사용합니다.
map 함수를 사용할 때는 반드시 "key" JSX 속성을 넣어야 합니다.
"key" JSX 속성을 넣지 않으면 리스트의 각 항목에 key를 넣어야 한다는 경고가 표시됩니다.
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>
);
};
// TODO: postToJSX 함수를 이용하여 에러를 해결하고 여러 개의 엘리먼트롤 표시해보세요.
return (
<div className="App">
<h1>Hello JSX</h1>
{posts.map(postToJSX)}
</div>
);
}
컴포넌트
- 하나의 기능 구현을 위한 여러 종류의 코드 묶음
- UI를 구성하는 필수 요소
컴포넌트를 여러개 만들고 조합하면 어플리케이션을 만들 수 있습니다.
모든 리액트 애플리케이션은 최소 한 개의 컴포넌트를 가지고 있으며, 이 컴포넌트는 애플리케이션 내부적으로는 근원(root)이 되는 역할을 합니다.
이 최상위 컴포넌트는 근원의 역할을 하므로 다른 자식 컴포넌트를 가질 수 있습니다.
이 계층적 구조(hierarchy)를 트리 구조로 형상화할 수 있습니다.
Create React App
Create React App은 리액트 SPA를 쉽고 빠르게 개발할 수 있도록 만들어진 툴 체인입니다.
npx create-react-app@latest 폴더이름