React18

Typescript

React에 타입스크립트를 적용해서 사용하는 경우에도 기존의 React와 동일한 구조를 가져갈 수 있는데, state, props, function, event 등에 타입을 선언해준다는 점이 기존의 React와의 가장 큰 차이점이다.

설치

npx create-react-app my-app --template=typescript

초기파일

// index.tsx
ReactDom.render(
  <React.StrictMode>
  	<App />
  </React.StrictMode>,
  document.getElementById("root")
  );

// App.tsx
function App() {
  return <div></div>;
}

State

state는 컴포넌트 내부에서 변경되고 사용되는 변수, 즉 “상태 값”을 말하는데, 이 상태 값들은 React 훅으로 관리가 된다.

const [changeSi, setChangeSi] = useState<boolean>(false);