봉보로봉봉

커스텀 훅을 쓰는 이유 자주 사용하는 로직을 하나로 묶어 반복을 최대한 줄이고 재사용하기 위해서 사용한다. useTitle 커스텀 훅을 만들 땐 똑같이 use~로 시작하는 함수를 선언한다. 넘겨받을 인자가 있다면 넘겨주면 된다. 커스텀 훅을 만들 때도 useState나 useEffect와 같은 리액트 훅을 사용할 수 있다. 컴포넌트에 전달하는 값이 아닌 커스텀 훅은 바로 실행시켜서 사용할 수 있다. const useTitle = initialTitle => { const [title, setTitle] = useState(initialTitle); const updateTitle = () => { const htmlTitle = document.querySelector("title"); htmlTitle..

npm 설치 npm install --save styled-components import import styled from 'styled-components' vscode 익스텐션 설치 vscode-styled-components (코드 컬러 색상) styled-components-snippets (코드 스니펫) 파일분리 스타일 컴포넌트 코드와 리액트 컴포넌트 코드가 한 파일에 같이 있어서 길어진다면 파일 분리를 할 수도 있다. // Components.styled.js import styled from 'styled-components'; export StyledDiv = styled.div` background-color: red; ` // Components.js import * S from '...

클래스 클래스 선언 private과 public을 사용해서 클래스 프로퍼티를 선언할 수 있다. 두개 다 자바스크립트에서는 보이지않고 문제없이 작동하지만 private은 클래스 밖에서 수정할 수 없고 public은 가능하다. 생략해서 적으면 public이 된다. class Player { constructor( private firstName:string, private lastName:string, public nickname:string ){} } const kim = new Player("code", "kim", 'code kim') kim.lastName // 에러메세지를 띄움 kim.nickname // 문제 없음 추상 클래스 abstract 키워드로 만들 수 있다. 다른 클래스가 상속 받을 수 ..

call signatures || function signatures 함수 위에 마우스를 올렸을 때 보이는 것을 말한다. 함수를 어떻게 호출해야하고 반환 타입이 어떻게 되는지 알려준다. const add = (a:number, b:number) => a + b // call signatures // const add : (a:number, b:number) => number 이렇게 콜시그니처를 만들 수 있다. type Add = (a:number, b:number) => number 이렇게 타입을 설정해두고 함수에 적용할 수 있다. type Add = (a:number, b:number) => number const add:Add = (a, b) => a + b 오버로딩(overloading) - fun..

기본적으로는 ts는 js와 비슷한 문법을 사용한다. 하지만 js에서는 그냥 실행하게 뒀던 코드들도 ts에서는 메세지로 틀렸다고 알려준다. // 자바스크립트 const player = { name: 'bong' } player.hello() // undefined // 타입스크립트 const player = { name: 'bong' } player.hello() // 실행 전에 hello()가 없다고 메세지를 띄워 줌 타입 지정해주기 타입을 지정해줄 때는 : 을 사용하면 된다. const userName : string = "bong"; const userAge : number = 72; const numsArr : number[] = [1, 2, 3]; 하지만 매번 변수를 선언할 때마다 타입을 지정해주..