3.22 React 넘을 수 있는 산인가! 🤖
오배이안 🪙
React 는 프론트앤드 개발을 위한 Javascript 오픈소스 라이브러리다.
React 를 사용하는 이유?
리액트가 가지는 3가지 특징으로 인해 프론트앤드 개발을 효과적으로 할 수 있기 때문에 사용한다.
React 3가지 특징
1. 선언형(Declarative)
코드를 자세히 분석하지 않고도 코드의 의도를 명확히 이해 할 수 있게 작성하는 방법
JSX 문법을 사용하기 때문에 선언형이라는 특징을 가진다.
2. 컴포넌트 기반 (Component-Based)
컴포넌트란 하나의 기능을 구현하는데 필요한 코드들을 묶어놓은 것을 말함
리액트는 컴포넌트를 기반으로 개발하기 때문에 컴포넌트로 기능들을 분리하면 서로 독립적이고, 오류를 찾기가 쉬워지고, 재사용이 가능하기 때문에 기능 자체에 집중하여 개발할 수 있고 유지보수가 편리하다.
3. 범용성 (Learn Once, Write Anywhere)
리액트는 프레임워크가 아니고 라이브러리 이기 때문에 JavaScript 프로젝트 어디에든 유연하게 적용할 수 있다.
페이스북에서 만들어지고 관리되고 있어 안정적이고, 리액트 네이티브로 모바일 개발도 가능하다.
컴포넌트 (Component)
컴포넌트는 하나의 기능 구현을 위한 여러 종유의 코드 묶음이며, UI를 구성하는 필수 요소다.
- 컴포넌트를 여러 개 만들고 조합하여 애플리케이션을 만들 수 있다.
- 컴포넌트는 독립성이 높아 재사용이 가능하고, 기능단위 개발이 가능해졌다.
- 모든 리액트 애플리케이션은 최소 한 개의 컴포넌트를 가지며, 애플리케이션의 근원(root)이 되는 역할을 한다.
- 하나의 애플리케이션에 여러 개의 컴포넌트가 있다면 이들은 계층적 구조를 가지게 되므로 트리 구조로 형상화 할수도 있다.
JSX (JavaScript XML)
리액트에서 UI를 구성할 때 사용하는 문법으로 자바스크립트를 확장한 문법이다.
하지만 JSX는 브라우저가 바로 실행 할 수 있는 자바스크립트 코드가 아니다.
JSX 코드를 브라우저가 실행할 수 있게 하기 위해선 자바스크립트 코드로 변경해줘야한다. 이때 사용하는 것이 Babel이다.
Babel은 JSX를 브라우저가 이해할 수 있는 자바스크립트로 컴파일하는 역할을 수행한다. 이후 자바스크립트를 브라우저가 읽고 화면에 렌더링하는 과정을 거친다.
JSX 코드 => Babel => JavaScript 코드로 변경된 JSX 코드 => 브라우저가 읽음
리액트는 DOM 과는 다르게 CSS,JSX 문법만 가지고 웹 애플리케이션을 개발 가능하다.
컴포넌트 구현에 필요한 파일이 줄고, 한눈에 컴포넌트를 확인 가능하게 됨.(선언형이라는 특징)
- 주의 점
JSX 문법은 HTML 처럼 생겼지만, HTML 이 아니기 때문에Babel을 이용한 컴파일 과정이 필요했던것
JSX 사용 예시
App() 이라는 하나의 컴포넌트 예시
기존의 HTML/CSS/JavaScript 보다 명시적으로 코드를 작성할 수 있고,
HTML/JavaScript 문법을 동시에 이용해 기능과 구조를 한눈에 확인할 수 있게 됨
JSX 문법 없는 경우
JSX 문법을 사용하지 않고 React 요소를 만들 수 있긴 하지만 코드가 복잡하고 가독성이 떨어지는 단점이 있다.
JSX 규칙
1. 하나의 엘리먼트 안에 모든 엘리먼트가 포함 되어야 함
JSX에서 여러 엘리먼트를 작성하고자 하는 경우, 최상위에서 opening tag와 closing tag로 감싸주어야 합니다.
X
O
2. 엘리먼트 클래스 사용 시 className 으로 표기
class 로 적게 되면 자바스크립트 class 로 인식한다.
3. 자바스크립트를 사용할땐 중괄호 { } 사용하기
중괄호를 사용하지 않고 자바스크립트 코드를 적으면 일반 텍스트로 인식한다.
추가로 중괄호 안에는 표현식인 문만 들어올 수 있다.
표현식인 문인지 확인하는 방법은 변수에 할당해보면 된다. ( 가능하면 표현식임)
- 조건부 렌더링 시에는 삼항연산자 사용하기
if 조건문은 표현식인 문이 아니기 때문에 사용할 수 가 없다. 그래서 조건을 걸어 화면에 렌더링 되게 할려면 삼항연산자를 활용해야 한다!
4. 사용자 정의 컴포넌트는 대문자로 시작한다.
React 엘리먼트가 JSX로 작성되면 "대문자"로 시작해야 합니다. 소문자로 시작하게 되면 일반적인 HTML 엘리먼트로 인식을 하게 된다.
이렇게 대문자로 작성된 JSX 컴포넌트를 따로 사용자 정의 컴포넌트라고 부른다.
5. React에서 여러 개의 HTML element를 표시할 때는 map()함수를 사용한다.
map() 함수를 사용할 때는 반드시 "key" JSX 속성을 넣어야 한다.
"key"JSX 속성을 넣지 않으면 리스트의 각 항목에 key를 넣어야 한다는 경고가 표시된다.
- key 속성은 되도록 map()함수의 상단에 작성해야하고
key의 속성값으로는 가능하면 데이터에서 제공하는 id를 할당해야 한다.
key 속성값은 id와 마찬가지로 변하지 않고, 예상 가능하며, 유일해야 하기 때문이다. 정 고유한 id가 없는 경우에만 배열 인덱스를 넣어서 해결할 수 있다. 배열 인덱스는 최후의 수단(as a last resort)으로만 사용한다.
map() 함수 사용 예제
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>
);
}Create React App
Create React App 은 리액트 SPA(single page application) 를 쉽고 빠르게 개발할 수 있도록 만들어진 툴 체인 이다.
새로운 React 프로젝트 생성하는 법
터미널을 키고 Node.js 와 npm 이 설치 되었는지 확인 하고 아래의 명령어 입력 (둘중 아무거나 입력)
npx create-react-app 폴더이름
npx create-react-app@latest 폴더이름
@latest을 사용하게 되면 항상 최신버전을 설치한다.
설치가 완료 되면
설치한 폴더로 이동 후 아래의 명령어를 터미널에 입력해준다.
npm start
새로운 React 프로젝트가 정상적으로 실행될 경우에는 3000 port가 연결된 브라우저가 자동으로 켜진다.
에디터로 코드를 수정하고 저장하는 즉시 브라우저에서 변경사항을 확인할 수 있다.
리액트 생성 시 상단에 import React from 'react' 는 왜 사용하는 걸까?
import : 필요한 모듈을 불러오는 역할이다!
import React from 'react';새로운 리액트 프로젝트를 생성하게 되면 App.js 파일에는 import React from 'react'; 가 필수로 붙어야 하지만 하위 컴포넌트에서는 생략해도 작동이 된단다.
import React from ‘react’?
브라우저가 리액트 JSX 문법을 읽지 못하기 때문에 JSX 문법으로 작성한 코드를 Babel 을 통해서 변환해주어야 한다.
JSX 문법을 자바스크립트로 변환시킬 때 트랜스파일러(transpiler)라는 과정을 거쳐 브라우저가 이해할 수 있는 순수한 자바스크립트 코드로 변환을 해줘야합니당
트랜스파일러 과정은 Babel 이 수행하는데 이 트랜스파일러 과정에서 자바스크립트 코드로 변환될 리액트 코드들을 불러오기 위해 import React from ‘react’? 를 사용한다고 하네요
Babel : "어이 JSX 너 자바스크립트 코드로 변환 시켜줄테니까 리액트 코드 가져와"
요즘은
React 17버전 부터는 내부적으로 JSX transformer가 JSX를 React 요소로 변환하는 작업을 거치기 때문에 모든 컴포넌트에 import React from ‘react’?를 작성하지 않아도 된다고 하네용
