TypeScript는 JavaScript의 상위 집합으로 JavaScript에서 제공하는 대부분을 지원한다.
ES5 모든 문법, ES6의 문법의 대부분을 사용 가능하다.
1. Props
/* props 타입 정의 */
interface DummyProps {
text: string;
// 값 명시 text: "Hi"|"Hello"|"By"
}
/* 오브젝트의 타입이 DummyProps */
const Dummy = ({text}:DummyProps) => {
return <h1>{text}</h1>
}
function App() {
return <Dummy text="hello" />;
}
- interface를 통해 props 타입을 정의해 준다.
- Dummy컴포넌트의 오브젝트에 타입을 지정한다.
- 값을 명시하게 되면 이외 문자 사용 x
2. Optional(선택적) Props
props가 필수가 아닐 경우 처리 방법.
interface DummyProps {
text: string;
active?: boolean;
}
const Dummy = ({text, active}:DummyProps) => {
return <h1>{text}</h1>
}
function App() {
return <Dummy text="hello" />;
}
- ? : null 허용, 값이 없어도 된다.
3. Default Prop Value (prop의 기본값)
props가 필수일 경우 default 값을 준다.
interface DummyProps {
text: string;
active?: boolean;
}
/* active 값을 보내지 않으면 false를 갖는다. */
const Dummy = ({text, active = false}:DummyProps) => {
return <h1>{text}</h1>
}
function App() {
return <Dummy text="hello" />;
}
- 오브젝트 값 안에 직접 값을 넣는다. ex) active = false
4. Event 타입 지정 (ReactJS에서만 사용하는 방식)
function App() {
/* 어떤 Element가 이 이벤트를 발생시킬지 지정 form > button */
const onClick = (event:React.FormEvent<HTMLButtonElement>) => {
const {
currentTarget: { name },
} = event;
};
return (
<form>
<button onClick={onClick}>Click me</button>
<!--
param이 있는 경우
<button name="DONE" onClick={onClick}>Click me</button>
-->
</form>
);
}
- event:React.FormEvent<HTMLButtonElement>
- 만약, 버튼이 form태그 내에 없다면 FormEvent가 아니고 MouseEvent<HTMLButtonElement>가 되어야 한다. - https://reactjs.org/docs/events.html (여러가지 Event사용 방법을 알려주는 링크)
- 파리미터가 있는 경우 익명함수로 작성
5. Hook (useState, useLocation, useParams)
interface InfoData {
id: string;
name: string;
symbol: string;
}
interface RouteProps {
state: string;
}
interface RouteParams {
coinId: string;
}
const [info, setInfo] = useState<InfoData>();
const { coinId } = useParams<keyof RouteParams>() as RouteParams;
const { state } = useLocation() as RouteProps;
- react-router-dom v6 이상
- useLocation() as RouteProps
- useParam<keyof RouteParams>() as RouteParams
- react-router-dom v5 이하
- useLocation< RouteProps>()
- useParam<RouteParams>()
반응형
'React' 카테고리의 다른 글
[React] Nested Router (중첩 라우터) (1) | 2022.08.24 |
---|---|
[React] React CSS 셋업 방법(CSS reset, Font 적용) (0) | 2022.08.21 |
[ReactTS] React TypeScript 프로젝트 생성 방법 (0) | 2022.08.20 |
[ReactTS] TypeScript란? (0) | 2022.08.20 |
[ReactJS] Style Components (0) | 2022.08.18 |