with with

매개변수의 타입을 지정할 때 리엑트에서 기본으로 제공하는 타입을 정리합니다. 공부하면서 새롭게 보이는 타입은 지속적으로 추가할 예정입니다. 전체 이벤트 타입은 아래의 공식문서에 나와 있습니다. SyntheticEvent – React A JavaScript library for building user interfaces reactjs.org React.FormEvent import React, { useState } from "react"; function App() { const [value, setValue] = useState(""); const onChange = (event: React.FormEvent) => { const { currentTarget: { value }, } = event;..

React에서 제공하는 useEffect() 함수는 특정 데이터가 변화할 때에만 특정 코드를 실행할 수 있게 해준다. React의 특성상 컴포넌트(함수)내의 일부 데이터가 변화해도 컴포넌트(함수) 전체를 재 실행하여 리턴한다. 그래서 만약에 한 번만 불러와도 될 api의 경우, 사용자가 버튼 몇 번 클릭하면 api가 계속해서 호출되어 쓸데없이 리소스를 잡아먹을 수 있는 상황이 발생할 수 있다는 뜻이다. (rum.. 오타있네요.. run!) 실제로 input에 글자를 치기만 하는데도 Line. 9의 console.log가 계속해서 찍히는 것을 확인할 수 있다. 이런경우를 방지하기 위해 React에서 제시하는 방법은 useEffect이다. useEffect는 반환값은 없지만 두 개의 파라미터를 필요로 한다...

html, css를 공부하자마자 바로 연습할 겸 사이트 하나 만들어봤다. 하지만 만들면서 금세 한계점을 느끼게 된다. 단일 html 사이트 내에서는 어떻게든 만들고 싶은대로 만들 수 있었지만, 여러개의 html 사이트를 만들면 그 사이트 간의 이동이 부드럽지 않을 뿐더러 원하는 효과를 주기 어려웠다. 그렇다고 한 html 파일 안에 모든 코드를 다 넣자니 너무 파일이 커져서 보기에 좋지 않을거 같았다. 그래서 React를 이용해 js 코드로 사이트를 만들어 더욱 유지보수하기 편하고, 분할/정복도 깔끔하게 달성할 수 있도록 사이트를 고쳐보기로 작정했다. 그러기 위해서는 일단 React를 공부해야만 했기에, 바로 시작했다. 그 시작은 우선 React를 설치하는 것! 사실 설치하지 않고도 리엑트를 사용할 수 ..