isEdit,isActive ==>boolean값으로 받을 경우에는 앞에 is를 붙이고,
변수가 독립적인 값을 가지고 있을때는 앞에 has를 붙인다.
타입스크립트, 다른개념의 자바스크립트라고 생각하고 또 다른방식인건가 싶었다. 수업을 들어보니 완전히 다른 개념은 아닌듯 하였으나, 약간 어렵고 이렇게써도 되는 건가 에 대한 의문이 들었다.
그래도 일단 타입스크립트를 알아보자.
자바스크립트.
난 처음 한달정도는 자바를 접해본적이 있었다.
그러다가 자바스크립트를 접했을때 쉬운것 같다고 느낀것이 바로 타입선언을 일일이 안해줘도 된다는 것이었다. 처음엔 어색했지만 지금은 언제 선언을 했었는지조차 가물가물할 정도로 자바스크립트의 타입선언하지 않는것에 익숙해져있다.
그러나 브라우저는 다르다고 하셨다.
작은서비스를 빠르게(타입선언없이) 만들어 준다는 점에서는 확실히 장점이기는 하나, 규모가 커질수록 지뢰밭처럼 오류가 발생할 수도 있다.
따라서 타입스크립트라는것을 사용하는 것이다.
이 타입스크립트는 또다른 언어나 이런것은 아니다.
자바스크립트 안에서 좀더 업격하게? 각각의 타입을 자동으로 명시해주기도하고, 타입이 없거나 에러인경우를 보여주어 효율성으로볼때 버그도 덜 일어나게되고 그만큼 에러를 찾는 시간이 줄게되어 개발속도를 줄어들게된다고 한다.
string,number,boolean은 타입이 제공된다.
다만, 객체나 배열은 타입이 제조되지 않아 직접 만들어 주어야한다.
객체의 타입은 다음과같이 만든다.
` //배열타입
let fff: number[] = [1 , 2 , 3 , 4 , 5, "안녕"]
//===>이경우는 배열의 타입을 숫자로 지정했으나 문자가 들어가 에러발생
let ggg: string[] = ["철수","형희","훈이",1]
//===>이 경우는 배열이 문자열 형태인데 숫자가 들어가 에러
let hhh: (string | number)[] = ["철수","영희","훈이",10] // 이 경우는 배열타입이 숫자 또는 문자라는 말!
//객체타입
interface IProfile {
name: string
age: number | string
school: string
}
//=> 일반적으로 배열로 선언해줄 이름과 interface의 각각 첫글자를 따서 타입을 선언한다.
const profile:IProfile = {
name: "철수",
age:7,
school: "다람쥐초등학교"
}
profile.age = "8살"
age타입을 문자열 또는 숫자로 선언했으니 문자열로 바꿔줘도 에러가 발생하지 않는다.
`
함수의 경우: 함수는 선언된 후 여기저기에서 호출될 수 있기에 무조건 타입을 정해주어야한다. 자동으로 타입변환되지 않는다.
타입스크립트는 사용시 설치와 설정이 필요한데, 설치는 타입스크립트 홈페이지에서 다운로드명령어를 복사해 붙여넣기를 하고, 설정은 yarn dev하면 리엑트에서 자동으로 잡아주어 채워지게되니 파일만 만들어주면된다. 중간에 버전 충돌도 일어나 버전도 리엑트와 동일하게 설정한다.
JSX ==>JavaScript XML
타입스크립트의 경우 JSX를 리턴하고 있다면 즉, 리턴부분에 html저럼 생긴 태그들이 들어간다면 tsx로 확장자 변경이 필요하다.
js의 경우는 jsx로 바꾸지 않아도 읽어올 수 있으나 타입스크립트는 읽어올 수 없기에 변경 필요.
XML? ==>eXtensible Markup Language
의 약자로 확장 가능한 마크업언어 즉, 태그가 있는 것을 이야기한다.태그를 닫게되면 '마크업했다'라고 한다.
확장가능? 이 말은 태그 안에 나만의 변수? 를 만들 수 있다는 말인다.
즉, return 부분에 있는 태그들은 html로 되어있는 것이 아니라, 개발자들이 임의로 만들어놓은 이름들로 만든 태그들 즉, JSX라고 한다는 것이다.즉, 자바스크립트라는 것.
