⇒ jsx를 사용할 거라면, 즉 리액트 컴포넌트를 개발할 거라면 .tsx를, 그냥 TypeScript만 사용하는 로직을 개발할 거라면 .ts를 사용 (리액트 컴포넌트 코드 작성하는데 확장자가 .ts일 경우 에러 발생)
2. JSX
•
JavaScript XML. 자바스크립트의 확장 문법(syntax extension).
•
JavaScript 또는 TypeScript 언어를 사용하는 .jsx나 .tsx 파일에서 HTML과 같은 마크업 코드를 작성할 수 있게 함
•
하나의 화면을 개발하는데 HTML, (CSS,) JavaScript 세 파일을 만들어야 했던 불편함 해소
•
수많은 사용자 인터랙션이 요구되는 현대 웹 페이지들 → 인터랙션 처리를 위한 동적인 코드는 JavaScript에서만 개발 가능한데, 인터랙션에 의해 값이 변경되는 요소가 있을 경우 .innerHTML = ${HTML태그로 이것저것 작성}과 같은 가독성 떨어지는 코드 어느 정도 탈출,,
•
컴포넌트 단위로 ui 재사용 가능 ([3.1. 개념 이해하기] 참고)
3. 리액트 컴포넌트
3.1. 개념 이해하기
•
Flutter에서 위젯을 리턴하는 함수를 만들었던 것과 유사함
•
JSX로 작성된 마크업을 가진 함수임
•
원래라면 HTML 파일로 작성해야 하는 마크업 코드를 .jsx 또는 .tsx 파일에서, HTML과 거의 유사한 형태로 작성 (JSX 덕분)
•
차이는 하나의 마크업 문서를 만드는 대신, 적절한 기능이나 ui별로 쪼개서 하나의 function 형태로 작성한다는 점
JavaScript의 function에서 여러 개의 값을 리턴할 수 없기 때문임. 하나의 JSX 태그만 리턴하게 해야 한다.
•
return 뒤에 작성한 태그(<h1>, <img /> 등)가 한 줄보다 길어질 경우, ()로 감싸줄 것
•
스타일 적용 등을 위해 클래스명을 지정할 때, 일반 HTML에서와 달리 className="" 사용
◦
class가 JavaScript 예약어이기 때문
◦
HTML: <div class="header"></div>
◦
jsx: <div className="header"></div>
•
기본적으로 JavaScript라서, 태그 안에 {}로 감싸면 JavaScript 문법 사용 가능
◦
let, const로 선언한 JavaScript 변수 값 사용도 가능하고
▪
예시가 궁금하세요?
export default function TodoList() {
const name = 'Gregorio Y. Zara';
return (
<h1>{name}'s To Do List</h1>
);
}
const today = new Date();
function formatDate(date) {
return new Intl.DateTimeFormat(
'en-US',
{ weekday: 'long' }
).format(date);
}
export default function TodoList() {
return (
<h1>To Do List for {formatDate(today)}</h1>
);
}
사용할 땐 <img /> 태그처럼 <MyComponent /> 와 같은 셀프 클로징 태그 형태로 사용
4. State
•
Flutter와 같이, 변수 값이 바뀐다 해서 화면이 재렌더링 되지 않음. 재렌더링이 필요함을 알려줘야 함
•
useState 훅 사용
import { useState } from 'react';
import { sculptureList } from './data.js';
export default function Gallery() {
const [index, setIndex] = useState(0);
// index는 변수, setIndex는 함수
function handleClick() {
// setState와 비슷하쥬?
setIndex(index + 1);
}
// 이제 jsx에서 handleClick 함수를 실행하면 재렌더링됨
let sculpture = sculptureList[index];
return (
<>
<button onClick={handleClick}>
Next
</button>
<h2>
<i>{sculpture.name} </i>
by {sculpture.artist}
</h2>
<h3>
({index + 1} of {sculptureList.length})
</h3>
<img
src={sculpture.url}
alt={sculpture.alt}
/>
<p>
{sculpture.description}
</p>
</>
);
}
5. import, export
•
JavaScript 기본 문법 (React에서만 사용하는 것 X)
•
다른 파일에서 정의한 함수/변수 등을 불러와 사용할 수 있음
•
2가지 방식
1.
Default - default 키워드, {} 사용 X
•
default 키워드를 포함하여 export
•
import 할 때(마다) 원하는 네이밍으로 불러와 사용 가능
•
Named 방식처럼 {} 안에 이름 넣어 import 작성 시 에러 발생! Module ‘경로’ has no exported member ‘컴포넌트명’. Did you mean to use ‘import 컴포넌트명 from “경로”' instead? - import 구문 컴포넌트명을 {}로 감쌌는지 확인 및 제거하면 해결
// Button.js (함수를 정의한 파일)
// 이렇게 작성해 내보냄
export default function Button() {};
// 함수를 불러와 사용할 다른 파일
// 원하는 이름을 맘대로 지어 불러옴
import Button from './Button.js';
// 다른 파일에선 다른 이름으로 사용할 수 있겠쥐요
import CustomButton from './Button.js';
// 코드에서 사용할 땐 임포트 한 이름으로 쓰면 됨
2.
Named - default 키워드 X, {} 사용
•
default 키워드 없이 export
•
export한 파일에서 정의한 이름으로 import, {} 사용
// Button.js
export function Button() {};
// 임포트할 파일
import { Button } from './Button.js';
Conclusion
저는 웹 개발을 처음 배울 때 HTML, CSS, JavaScript와 함께 React를 공부했었는데요.
리버스마운틴에 합류한 뒤로는 Flutter로만 개발해서 오랜만에 React를 다시 쓰려니 맞다 이런 게 있었지 하고 새록새록 기억이 나더라고요. 좀 더 깊은 내용들은 이어지는 글들에서 마저 다뤄보도록 하고, 이번 글에서는 이 정도까지만 다뤄볼까 합니다.
Subscribe to my site to be the first to receive notifications and emails about the latest updates, including new posts.
Join Slashpage and subscribe to 'Reversemountain Tech Blog'!
