728x90 반응형 타입스크립트11 리액트 타입스크립트 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. 셀프 코딩 부트캠프 - 리액트 최근 1인 개발을 해보려고 리액트 공부를 시작했습니다. 앱이나 서비스를 만들려면 리액트를 공부하는 게 가장 적합해 보였습니다. 아직 뭘 만들지는 좀 고민 중이지만 개발하는 중간과정들을 블로그에 공유할 예정입니다. 아마 아주 간단한 것부터 연습겸 제작해볼 예정입니다. 진정한 앱테크의 길로… 리액트 react js, react native, node.js 가 자바스크립트를 사용하기 때문에 한번 익숙해지면 풀 스택도 가능할 것 같았습니다. 코드도 공유해서 사용할 수 있고요. 자바스크립트가 타입을 명시하지 않아도 되기 때문에 편한 점들도 있겠지만 저는 불편했습니다. 개인적으로 버그 찾기가 힘든 듯.. 그 문제는 타입 스크립트를 공부하면 해결될 것 같았습니다. react js, react native는 개발 방법.. 2022. 2. 27. 이전 1 2 다음 728x90 반응형
