[ReactTS] TypeScript 기본 문법

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>()