들어가기
코드스테이츠 부트캠프 탑승 5주차 드디어 리액트에 대해 배운다! 이제 진짜 프론트엔드 개발자가 된 기분이다. 아직 배운건 많이 없지만.... 아무튼 시작해보자!
리액트란?
우선 리액트는 프론트에는 개발을 위한 자바스크립트 오픈소스 라이브러리다. 리액트는 크게 3가지의 특징이 있다.
- 선언형
- 컴포넌트 기반
- 범용성
리액트는 한 페이지를 보여주기 위해 HTML/CSS/JS로 나눠적기 보단 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향한다.
리액트는 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발한다. 컴포넌트로 분리하면 서로 독립적이고 재사용이 가능한 코드가 된다. 따라서, 기능 자체에 집중하여 개발하기 용의하다. 반대 개념으로는 명령형 프로그래밍이 있다.
리액트는 자바스크립트 프로젝트 어디에든 유연하게 적용될 수 있다. 라이브러리와 비슷하지만 다른 프레임워크와 비교해보면, 프레임워크의 경우 프레임워크 생태계에 종속되어 코드를 작성해야한다. 하지만, 라이브러리의 경우 기존의 자바스크립트 코드를 재활용하여 사용이 가능하다.
추가로, 리액트는 facebook에서 개발 및 관리를 하는 라이브러리이며, 리액트 네이티브를 사용하여 모바일 어플리케이션을 개발할 수 있다.
JSX.
JSX는 Javascript XML의 줄임말이다. 또한, 문자열도 아니고 HTML도 아니다. 리액트 내부에서 UI를 구성할 때 사용하는 문법으로 자바스크립트를 확장한 문법이다. 따라서, 리액트 엘리먼트를 작성할 때는 JSX문법을 사용하면 된다.
JSX는 자바스크립의 확장 문법이지만, 브라우저가 바로 실행할 수 있는 자바스크립트 코드는 아니다. 브라우저가 이해할 수 있는 코드로 변경해주기 위해 Babel을 사용한다.
Babel의 컴파일 결과가 궁금하다면 👉 Babel
물론 Babel과 JSX를 사용하지 않고도 컴포넌트를 작성할 수 있다. 다만, 가독성이 떨어지고 복잡성이 올라간다.
// JSX를 사용하지 않은 코드
return React.createElement(
"h1", null, `Hello, ${formatName(user)}!`
)
// JSX를 사용한 코드
return <h1>Hello, {formatName(user)}!</h1>JSX를 사용하여 코드를 작성할 때 주의해야 하는 사항이 있다.
- 컴포넌트 하나는 하나의 태그로 시작하고 끝나야한다.
return(<div></div>) - JSX에서 JS코드는 {} 안에 작성한다.
{user.name} - return 내부 {}에 작성될 값은 표현식이어야 한다.
{함수()},user.name,(1 + 1) === 2 ? true : false - 여러개의 데이터를 처리할 때는
map메소드를 사용한다.
const Datas = () => {
const data = datas.map((data) => (
<div key={data.id}> // map 메소드를 사용할때는 key값을 명시해 줘야한다.
<h4>{data.name}</h4>
<p>{data.content}</p>
</div>
))
return <div>{data}</div>
}바닐라 자바스크립트에서의 map사용시 다른점은 중괄호가 아닌 소괄호를 사용한다는 점이다.
arr.map((data) => {}) X
arr.map((data) => ()) O
물론, 중괄호도 사용할 수 있다.arr.map((data) => {return data}) 다음과 같이 중괄호 안에 return을 사용하면 된다.
컴포넌트.
컴포넌트는 "하나의 기능 구현을 위한 여러 종류의 코드 묶음이다."
리액트를 이용하면, 각자 독립적인 기능을 가지며 UI의 한 부분을 담당하기도 하는 이러한 컴포넌트를 여러 개 만들고 조합하여 애플리케이션을 만들 수 있다. 모든 리액트 애플리케이션은 최소 한 개의 컴포넌트를 가지고 있으며, 이 컴포넌트는 애플리케이션 내부적으로는 근원(root)이 되는 역할을 한다. 이 근원에 해당하는 컴포넌트는 여러개의 자식 컴포넌트를 가질 수 있다. 이 계층적 구조를 트리 구조라 한다.
리액트는 이 컴포넌트가 중심이 되어 개발을 진행한다. 즉, 전체적인 틀인 레이아웃보단 작은 단위단위 기능인 컴포넌트에 집중하여 개발을 할 수 있다는 뜻이다. 이를 Bottom-up 방식이라고 한다.
앞서 말했듯 컴포넌트는 하나의 기능이며 UI를 담고있다. 만약 레이아웃에 수정사항이 생겨 수정을 진행한다면 컴포넌트의 위치를 변경하여 쉽게 수정할 수 있다. 컴포넌트 기반 개발의 장점이라고 할 수 있다.
