728x90 반응형 Reactjs14 리액트 타입스크립트 onClick, onChange 코드 - 셀프 개발자 코딩 부트캠프 import { useState } from "react"; function App() { let [value, setValue] = useState(""); function handleChange(e:React.ChangeEvent) { setValue(e.target.value); } function handleClick(e:React.MouseEvent) { alert(value); } return ( Click!! ); } export default App; https://jinibh.tistory.com/711 리액트 useState - 셀프 개발자 코딩 부트캠프 import React, { useState } from 'react'; function App() { let [number, set.. 2022. 3. 15. 리액트 타입스크립트 props 값 전달하기 - 셀프 개발자 코딩 부트캠프 부모가 자식 컴포넌트 에게 값을 넘겨줄때 사용한다. App.tsx import MyComp from './MyComp'; function App() { let name = "리액트"; return ( {name} ); } export default App; 위와같이 부모가 자식에게 보내줄 수 있다. type MyCompProps = { title: string, num: number; } // typescript에서는 propTypes를 지정 안해도 될것 같다. const defaultProps = { title : "Default Title", num : 0 }; // props라는 이름은 아무렇게나 지정도해 상관 없는것 같다. 바꿔도 잘 동작한다. const MyComp = (props:MyCompP.. 2022. 3. 15. 리액트 useState - 셀프 개발자 코딩 부트캠프 import React, { useState } from 'react'; function App() { let [number, setNumber] = useState(0); const onIncrease = () => { setNumber(number + 1); } const onDecrease = () => { setNumber(number - 1); } return ( {number} -1 +1 ); } export default App; useState를 사용하면 두 개의 값이 튀어나온다. 내가 설정한 초기값을 갖는 변수(number)와 그 변수를 세팅할 수 있는 함수(setNumber)가 나온다. button을 클릭해서 버튼을 클릭해서 onIncrease, onDecrease 가 실행되면 setN.. 2022. 3. 6. 리액트 JSX 문법 - 셀프 개발자 코딩 부트캠프 # 감싸인 요소 function App() { return ( 하이하이 하이하이2 ); } export default App; 컴포넌트가 여러개 있다면 부모로 한번 감싸야 한다. webpack 5.70.0 compiled with 2 errors in 65 ms ERROR in src/App.tsx:7:5 TS2657: JSX expressions must have one parent element. 5 | function App() { 6 | return ( > 7 | 하이하이 | ^^^^^^^^^^^^^ > 8 | 하이하이2 | ^^^^^^^^^^^^^^^^^^^ 9 | ); 10 | } 11 | 이런 에러가 발생한다 function App() { return ( 하이하이 하이하이2 ); } expo.. 2022. 3. 6. 리액트 타입스크립트 - 셀프 개발자 코딩 부트캠프 리액트를 시작할 때부터 타입 스크립트로 시작하기로 함. 다른 건 몰라도 자바스크립트가 타입을 강제하기 않기 때문에 버그가 많이 발생할 수 있다. 타입 스크립트를 사용하면 이걸 방지할 수 있음(타입이 있는 언어만 주로 사용하다 보니 이 부분이 어려운 것일 수도 있다). 타입 스크립트에는 다른 특징도 많이 있지만 그건 찬찬히 알아 나가기로.. 리액트 타입 스크립트 프로젝트 생성 $yarn create react-app my-app --template typescript tsx확장자로 파일이 생긴다. $yarn start 기존 리액트 프로젝트 처럼 잘 실행된다. 타입스크립트 핸드북 https://www.typescriptlang.org/ko/docs/handbook/intro.html https://jinib.. 2022. 3. 6. 리액트 프로젝트 생성 - 셀프 개발자 코딩 부트캠프 리액트 프로젝트 생성 yarn create react-app $yarn create react-app hello-react 프로젝트에 기본 파일들이 생성된다. $yarn start 를 실행하면 리액트 프로젝트가 실행된다. http://localhost:3000/ 로 접속하면 위와같은 화면이 나온다. 비주얼 스튜디오로 프로젝트를 연다. // 특정 파일 불러오기 import logo from './logo.svg'; import './App.css'; // App 이라는 함수 컴포넌트 새성 function App() { return ( // jsx -> js의 확장 문법으로 번들링 과정에서 js형태로 변함 Edita src/App.js and save to reload. Learn React ); } exp.. 2022. 3. 6. 이전 1 2 3 다음 728x90 반응형
