리액트
리액트란??
React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리이다. “컴포넌트”라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕는다.
리액트의 특징 세 가지
1. 명시적이다.
명시적이라는 말은 굳이 코드를 분석하지 않아도 목적성을 알기 쉽다는 의미이다.
리액트는 한 페이지를 보여주기 위해서 HTML,CSS,JS로 나누기 보다는 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향한다.
2. 컴포넌트를 기반으로 한다.
리액트는 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발합니다.
컴포넌트로 분리하면 독립성과 재사용성이 올라가고 따라서 기능 작동에 집중하여 개발을 할 수 있고, 유지보수가 쉬워진다.
3. 넓은 범용성을 가진다.
리액트는 JavaScript 라이브러리이기 때문에 JavaScript 프로젝트 어디에든 유연하게 적용될 수 있다.
또한 현재 가장 많이 사용되는 라이브러리이며, 리액트 네이티브로 모바일 개발도 가능하다.
JSX
JSX란??
JavaScript XML의 줄임말로 리액트에서 UI를 구성할 때 사용하는 문법으로 JS를 확장한 문법이다. 이 문법을 이용해 사용자 컴포넌트를 만들 수 있는 것이다.
JSX는 JS가 확장된 문법이지만 브라우저가 바로 실행할 수 있는 JS코드는 아니다. 그렇기 때문에 JS컴파일러인 'Babel'을 이용해서 JSX를 컴파일 해줘야 한다. 이후 브라우저가 JS를 읽고 화면에 렌더링하게 된다.
왜 JSX를 써야하는가?
DOM에서는 시각적인 것을 위한 HTML,CSS와 기능구현을 위한 JS가 필요했지만 리액트에서는 JSX와 CSS만을 가지고 구현이 가능하다.
즉, 컴포넌트 하나를 구현하기 위해 필요한 파일이 줄었고 한눈에 구조와 기능을 확인할 수 있다는 것이다.
📌 JSX 없이도 리액트를 사용할 수 있지만 복잡성은 올라가고 가독성은 떨어지게 된다.
return React.createElement(
"h1",null,`Hello,${formatName(user)}`
)
return <h1>Hello, {formatName(user)}</h1>JSX 규칙
1.하나의 엘리먼트 안에 모든 엘리먼트가 포함되어야 한다.
말 그대로 컴포넌트가 렌더하는 것이 두 개 이상의 엘리먼트로 구성되면 안된다.
무조건 컴포넌트 내부의 최상위 엘리먼트는 한 개일 것!!
2. className을 사용해야 한다.
기존에 DOM의 엘리먼트에서는 class를 사용했다면 JSX에서는 className을 사용한다.
3. JS표현식을 사용한다면 중괄호를 사용한다.
const name = "~"
return (
<p>Hello, {name}</p>
)4. 사용자 정의 컴포넌트는 대문자로 시작한다.
function Sidebar () {
//
return (
//
)
}
<Sidebar></Sidebar>5. 조건부 렌더링에는 삼항연산자를 사용한다.
return(
{ // 여기도 JS표현식이기 때문에 중괄호 사용.
조건 ? (조건이 참일 때 렌더링) : (조건이 거짓일 때 렌더링)
}
)6. 여러개의 엘리먼트를 표시할 때는 map을 사용한다.
맵핑은 컴포넌트의 return문 내부에서도 가능하고 또는 외부에서 생성 후 내부로 가져오는 방식 모두 가능하다.
const navList = [
{id:1,title:"nav1"},
{id:2,title:"nav2"},
{id:3,title:"nav3"},
{id:4,title:"nav4"}
]
function sidebar () {
const navButton = navList.map((nav) =>
<button key={nav.id}>{nav.title}</button>
)
return (
<div>
{navButton}
</div>
)
}컴포넌트
컴포넌트란??
"하나의 기능 구현을 위한 여러 종류의 코드 묶음", "UI를 구성하는 필수 요소" 모두 다 맞는 말이다.
리액트를 이용하면 가장 독립적인 기능을 가지면 UI의 한 부분을 담당하기도 하는 이러한 컴포넌트를 여러개 만들고 조합하여 애플리케이션을 만들 수 있다.
모든 리액트 애플리케이션은 최소 한 개의 컴포넌트를 가지고 있으며 최상단에 위치한 컴포넌트는 내부적으로 root가 되는 역할을 한다.
컴포넌트의 장점
HTML,CSS,JS를 사용해서 구현한 애플리케이션의 구조를 바꾼다면 우선은 HTML의 위치를 변경해야하고, 그에 맞춰 CSS를 수정하고, 변경된 구조와 디자인에 맞게 기능에 맞춰 JS가 DOM을 조작하게끔 해주어야 한다.
하지만 컴포넌트 기반으로 구현이 되었다면, 컴포넌트는 독립적으로 기능을 하고 있으므로 컴포넌트의 위치만을 변경해주면 된다.
Create React App
Create React App란??
Create React App은 리액트 SPA를 쉽고 빠르게 개발할 수 있도록 만들어진 툴 체인이다.
리액트로 프로젝트를 하려고 한다면 여러가지의 개발 툴에 대해서 알고 있어야 한다. 하지만 우리가 이 모든 것을 알기 힘들기 때문에 툴 체인을 사용해서 복잡한 개발 세팅을 해주는 것이다.
사용 방법
터미널에서 프로젝트를 폴더를 열고 npm create-react-app을 실행해준다.
