728x90 반응형 리액트17 리액트 타입스크립트 css, sass, styled-components 리액트 컴포넌트를 스타일링할 때 여러 가지 방법 있다. css : html에서 기본적으로 사용하는 방법 sass : 확장된 css 로 작성하고 컴파일해서 사용 styled-components : 자바스크립트 안에 스타일 작성 개인적으로는 styled-components 이 가장 좋아 보였다. 정의한 스타일을 컴포넌트 처럼 사용 가능하다. props를 넘겨줄 수 있어서 상황에따라 마음데로 조절가능하다. 잘 쓰면 코드를 많이 줄일 수 있을듯 하다. react native 에서도 사용할 수 있다. # 공식사이트 https://styled-components.com/ # 참고 https://github.com/rebassjs/rebass https://github.com/styled-components/awes.. 2022. 3. 21. 리액트 타입스크립트 array map - 셀프 개발자 코딩 부트캠프 function App() { let names:Array = ["사과", "고구마", "오렌지"]; let nameList = names.map(name => ({name})); return ( {nameList} ); } export default App; array 를 render 부분에서 보여줄 수 있다. map 은 c# linq에 있는 select 와 비슷하다. c# 에 있는 extension method같은 기능이 typescript에 있다면 위와 같은 상황에서 편할것 같다. 귀찮아서 조사는 안해봄. https://jinibh.tistory.com/711 리액트 useState - 셀프 개발자 코딩 부트캠프 import React, { useState } from 'react'; functio.. 2022. 3. 15. 리액트 타입스크립트 useRef - 셀프 개발자 코딩 부트캠프 useRef를 이용하면 DOM을 직접 참조할 수 있다. import { createRef } from "react"; function App() { let refInput = createRef(); function handleClick(e:React.MouseEvent) { refInput.current?.focus(); } return ( Click!! ); } export default App; 버튼을 클릭하면 input에 포커스 된다. import { createRef } from "react"; function App() { let refDiv = createRef(); return ( ); } export default App; div 를 참조할수도 있다. https://jinibh.tistor.. 2022. 3. 15. 리액트 타입스크립트 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. 이전 1 2 3 다음 728x90 반응형
