React

[ReactTS] TypeScript 기본 문법

cob 2022. 8. 20. 16:23
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>()
반응형