React
웹 게임을 만들며 배우는 React(5)
리액트 조건문
반복문과 조건문은 기본적으로 렌더 안에서 사용하지 못한다. 조건문의 경우에는 삼항연산자 또는 보호연산자를 이용하면 렌더 안에서도 사용이 가능하다.
/* 삼항연산자 */
{this.state.result.length === 0
? null
: <div>평균 시간: {this.state.result.reduce((a, c) => a + c) / this.state.result.length}ms</div>
}
/* 부호연산자 */
{this.state.result.length !== 0
&& <div>평균 시간: {this.state.result.reduce((a, c) => a + c) / this.state.result.length}ms</div>
}jsx에서 false, undefined, null은 태그 없음을 의미한다.
추가 팁
Hooks에서는 클래스에서의 this의 속성들을 ref로 표현한다.
const timeOut = useRef(null);
const startTime = useRef();
const endTime = useRef();useState와 useRef의 차이는 setMessage, setResult 등 객체의 값을 다시 설정할 때 return 내부 또한 다시 실행된다. 반면에 useRef를 사용하는 변수는 값이 바뀌어도 return 내부가 다시 실행되지 않는다. 즉, 렌더링이 다시 실행되지 않고 변하는 값을 임시로 저장해둔다고 생각하면 된다.
return 내부에서 중괄호 안에 즉시 실행 함수를 만들면 for문과 if문 또한 사용이 가능하다.
{(() => {
if (result.length === 0) {
return null;
} else {
return (
<>
<div>평균 시간: {result.reduce((a, c) => a + c) / result.length}ms</div>
<button onClick={onReset}>리셋</button>
</>
)
}
})()}함수를 즉시 실행 형태로 만들어주기 위해서는 전체를 소괄호로 감싼 뒤 뒤에 소괄호를 한 번 더 붙이면 된다. ({(() => {})()}) 그러나 이러한 방법 보다는 따로 함수나 컴포넌트로 분리하는 게 코드가 훨씬 깔끔하므로 위 방법은 잘 사용하지 않는다.
jsx에서는 리턴 값에 배열을 넣어주는 것도 가능한데, 이때에는 꼭 key를 넣어주어야 한다. 이 방법 또한 잘 사용하지는 않지만 알아두자.
return [
<div key="사과">사과</div>
<div key="배">배</div>
<div key="감">감</div>
<div key="귤">귤</div>
<div key="밤">밤</div>
]Typescript
타입스크립트 입문 - 기초부터 실전까지(2)
타입스크립트 프로젝트를 실행하는 법
타입스크립트로 작성한 ts 파일은 브라우저가 바로 인식할 수 없기 때문에 브라우저가 인식할 수 있는 자바스크립트 파일로 컴파일해주어야 한다. ts 파일을 컴파일하기 위해서는 typescript 모듈을 설치해야 한다. NPM module install
npm i typescript -g모듈을 설치한 후 ts 파일을 변환해주기 위해서는 tsc 명령어를 사용하면 된다.
tsc filename.ts위 명령어를 실행하면 ts 파일의 이름과 동일한 js 파일이 생성된다.
타입스크립트의 컴파일 설정을 위한 파일은 json 파일로 작성해주면 된다.
{
"complilerOptions": {
"allowJs": true,
"checkJs": true,
"noImplicitAny": true,
}
}complilerOptions는 컴파일을 할 때의 여러 부가적인 옵션들이다. 해당 프로젝트의 자바스크립트 허용 여부를 결정하는 allowJs, 타입스크립트의 타입 검사 기능을 자바스크립트에 부여하는 checkJs(@ts-check와 유사하다.), 모든 타입에 대해서 기본 타입이 명명되지 않았을 때 오류를 알려주는 noImplicitAny 등이 있다. TSConfig Reference
타입스크립트 기초
변수 타입
기본적으로 타입스크립트의 변수 타입은 크게 12개가 존재한다.
- Boolean
- Number
- String
- Object
- Array
- Tuple
- Enum
- Any
- Void
- Null
- Undefined
- Never
//문자열 선언
let str: string = 'hello';
//숫자 선언
let num: number = 10;
//배열 선언
let arr: Array<number> = [1, 2, 3];
let heroes: Array<string> = ['Capt', 'Thor', 'Hulk'];
let items: number[] = [1, 2, 3];
//튜플 선언
let address: [string, number] = ['gangnam', 100];
//객체 선언
let obj: object = {};
let person: object = {
name: 'Capt',
age: 100,
};
let person2: { name: string, age: number } = {
name: 'Thor',
age: 1000,
};
//진위값 선언
let show: boolean = true;타입스크립트는 ES6 문법 기반이기 때문에 var가 아니라 let이나 const를 사용한다. const와 let의 차이
기본적으로 타입스크립트는 선언을 할 때 타입을 지정해준다. 튜플은 배열의 각 인덱스마다 타입을 정할 수 있다.
함수
타입스크립트에서 함수는 크게 세 가지로 정의될 수 있다.
- 함수의 파라미터(매개변수) 타입
- 함수의 반환 타입
- 함수의 구조 타입
//함수의 파라미터에 타입을 정의하는 방식
function sum(a: number, b: number) {
return a + b;
}
//함수의 반환 값에 타입을 정의하는 방식
function sum(): number {
return 10;
}
//함수에 타입을 정의하는 방식
function sum(a: number, b: number): number {
return a + b;
}자바스크립트에서는 함수에 매개변수를 전달할 때 함수 정의의 매개변수 개수와 달라도 오류를 내지 않고 유연하게 넘기지만, 타입스크립트에서는 정의한 함수 매개변수 개수와 전달 인자 개수가 다르면 엄격하게 판단해 오류로 취급한다.
// JS
function sum(a, b) {
return a + b;
}
sum(10, 20, 30, 40, 50) //오류 없음
//TS
function sum(a:number, b:number) {
return a + b;
}
sum(10, 20, 30, 40, 50) //오류 발생타입스크립트에서 인자를 유연하게 받으려면 옵셔널 파라미터를 사용하면 된다. 옵셔널 파라미터로 지정하고자 하는 인자의 변수 뒤에 ?를 붙여준다.
function log(a: string, b?: string) { //b는 옵셔널 파라미터
…
}
log('hello world'); //오류 없음
log('hello ts', 'abc'); //오류 없음