저녁: 유데미 리액트강의
섹션 3: 리액트 기초 및 실습 컨포넌트
JSX문법 & react강의 정리
- 코드의 최상위 태그가 1개 이상 존재해야 함
- 닫는 태그가 없는 HTML태그는 < /> 이렇게 닫아주기, 컴포넌트 태그 사이에 들어가는 컨텐츠가 없을 경우도 마찬가지.
- import, export default를 사용하여 컴포넌트를 연결한다.
(import할 때는 파일 경로를 써줘야 하며,
js파일일 때는 확장자를 생략하고 import Expense from './Expense';
css파일일 때는 import './Expense.css'; 이런 식으로 사용한다.)
- JSX에 자바스크립트 문법을 사용할 때는 return문 위에 선언한다.
- JSX에서 클래스를 적용할 때는 className을 사용한다.
- 기본적으로 내가 작성한 컴포넌트를 wrapper 컴포넌트로써 사용할 수가 없다. 사용하려면 props.children를 사용해야한다.
- 이전에는 JSX문법을 쓰는 파일에는 전부 import React from 'react'라고 썼었어야 했는데
최신 React버젼에서는 사용하지 않아도 된다.
- 기본적으로 함수형 react는
function Card() = {
return (
);
}
이런 형태로 사용하지만 아래와 같은 화살표함수 형태도 사용이 가능하다.
const Card = () => {
return (
);
}
- Date.toLocaleString()메서드는 new Date에서 받아온 배열을 문자열로 반환한다.
2개의 매개변수를 가진다. 1번째 매개변수: 언어, 2번째 매개변수: 옵션