# Class

클래스는 기본적으로 이렇게 생겼다.

```javascript
class Member {
  getName() {
    return "이름";
  }
}

let obj = new Member();
console.log(obj.getName());
```

## 특징

### 1. strict 모드에서 실행

딱히 `'use strict';`를 선언하지 않아도, 클래스의 코드는 기본적으로 `strict`모드에서 실행된다. 그렇게 되면, 당연히 `strict`모드의 여러가지 특징을 자동으로 따르게 된다.

### 2. 클래스 내 메서드 작성

```javascript
class Member {
  setName(name) {
    this.name = name;
  }

  getName(name) {
    this.name = name;
  }
}
```

보이는 것처럼, `function`키워드와 `:`가 없이 메서드 이름만 사용한다. 그리고 메서드 사이에 `;`가 불필요하다. 다만 function 을 선언하면 글로벌 오브젝트에 설정되는 것과 다르게, class는 그렇지 않다. 그리고 class의 object property는 for()문 등으로 열거할 수 없다.

### 3. 프로퍼티에 연결

```javascript
class Member {
  setName(name) {
    this.name = name;
  }
}
```

위 코드와

```javascript
Member.prototype.setName = function(namn) {
  this.name = name;
};
```

위 코드는 같다.

## Constructor

`constructor`는 클래스 인스턴스를 생성하고, 생성한 인스턴스를 초기화하는 역할을 한다. `new Member()`를 실행하면, `Member.prototype.constructor`가 먼저 호출된다. 클래스에 이를 작성하지 않으면, `prototype`의 디폴트 `constructor`가 호출된다. 그리고 이 `constructor`가 없으면 인스턴스를 생성할 수 없다. 기존 es5문법에서는 자바스크립트 엔진이 디폴트 `constructor`를 호출해서 이를 활용할 수 없었지만, es6에서 부터는 개발자가 이를 정의할 수 있게 되었다.

```javascript
class Member {
  constructor(name) {
    this.name = name;
  }

  getName() {
    return this.name;
  }
}

let newMember = new Member("라이오넬 멧시");
console.log(newMember.getName());
```

만약 `constructor`에서 이상한 값을 반환하면 어떻게 될까?

```javascript
constructor() {
    return 1;
}
```

`constructor`에서 `number`나 `string`을 반환하면, 이를 무시하고 생성한 인스턴스를 반환하게 된다.

그러나 `object`를 반환하면 어떻게 될까?

```javascript
class Member {
  constructor(name) {
    return { name: "메켓트" };
  }

  getName() {
    return this.name;
  }
}

let newMember = new Member("라이오넬 멧시");
console.log(newMember.name);
console.log(newMember.getName);
```

```
메켓트
undefined
```

name이 메켓트인 object를 반환하면서, newMember 클래스에는 name밖에 남지 않게 되었다. 그리고 getName은 존재하지 않아서 undefined가 출력된다.

## getter, setter

```javascript
class Member {
    set setName(name) {
        this.name = name
    }

    get getName(name) {
        return this.name
    }
}
```


# Class 클래스는 기본적으로 이렇게 생겼다.  ```javascript class Member {   getName() {     return "이름";   } }  let obj = new Member(); console.log(obj.getName()); ```  ## 특징  ### 1. strict 모드에서 실행  딱히 `'use strict'...

javascript class

<h1 id="class">Class</h1>
클래스는 기본적으로 이렇게 생겼다.
<pre class="language-javascript"><code class="language-javascript">class Member {
 getName() {
 return "이름";
 }
}

let obj = new Member();
console.log(obj.getName());
</code></pre>
<h2 id="특징">특징</h2>
<h3 id="1-strict-모드에서-실행">1. strict 모드에서 실행</h3>
딱히 <code>'use strict';</code>를 선언하지 않아도, 클래스의 코드는 기본적으로 <code>strict</code>모드에서 실행된다. 그렇게 되면, 당연히 <code>strict</code>모드의 여러가지 특징을 자동으로 따르게 된다.
<h3 id="2-클래스-내-메서드-작성">2. 클래스 내 메서드 작성</h3>
<pre class="language-javascript"><code class="language-javascript">class Member {
 setName(name) {
 this.name = name;
 }

 getName(name) {
 this.name = name;
 }
}
</code></pre>
보이는 것처럼, <code>function</code>키워드와 <code>:</code>가 없이 메서드 이름만 사용한다. 그리고 메서드 사이에 <code>;</code>가 불필요하다. 다만 function 을 선언하면 글로벌 오브젝트에 설정되는 것과 다르게, class는 그렇지 않다. 그리고 class의 object property는 for()문 등으로 열거할 수 없다.
<h3 id="3-프로퍼티에-연결">3. 프로퍼티에 연결</h3>
<pre class="language-javascript"><code class="language-javascript">class Member {
 setName(name) {
 this.name = name;
 }
}
</code></pre>
위 코드와
<pre class="language-javascript"><code class="language-javascript">Member.prototype.setName = function(namn) {
 this.name = name;
};
</code></pre>
위 코드는 같다.
<h2 id="constructor">Constructor</h2>
<code>constructor</code>는 클래스 인스턴스를 생성하고, 생성한 인스턴스를 초기화하는 역할을 한다. <code>new Member()</code>를 실행하면, <code>Member.prototype.constructor</code>가 먼저 호출된다. 클래스에 이를 작성하지 않으면, <code>prototype</code>의 디폴트 <code>constructor</code>가 호출된다. 그리고 이 <code>constructor</code>가 없으면 인스턴스를 생성할 수 없다. 기존 es5문법에서는 자바스크립트 엔진이 디폴트 <code>constructor</code>를 호출해서 이를 활용할 수 없었지만, es6에서 부터는 개발자가 이를 정의할 수 있게 되었다.
<pre class="language-javascript"><code class="language-javascript">class Member {
 constructor(name) {
 this.name = name;
 }

 getName() {
 return this.name;
 }
}

let newMember = new Member("라이오넬 멧시");
console.log(newMember.getName());
</code></pre>
만약 <code>constructor</code>에서 이상한 값을 반환하면 어떻게 될까?
<pre class="language-javascript"><code class="language-javascript">constructor() {
 return 1;
}
</code></pre>
<code>constructor</code>에서 <code>number</code>나 <code>string</code>을 반환하면, 이를 무시하고 생성한 인스턴스를 반환하게 된다.
그러나 <code>object</code>를 반환하면 어떻게 될까?
<pre class="language-javascript"><code class="language-javascript">class Member {
 constructor(name) {
 return { name: "메켓트" };
 }

 getName() {
 return this.name;
 }
}

let newMember = new Member("라이오넬 멧시");
console.log(newMember.name);
console.log(newMember.getName);
</code></pre>
<pre><code>메켓트
undefined
</code></pre>
name이 메켓트인 object를 반환하면서, newMember 클래스에는 name밖에 남지 않게 되었다. 그리고 getName은 존재하지 않아서 undefined가 출력된다.
<h2 id="getter-setter">getter, setter</h2>
<pre class="language-javascript"><code class="language-javascript">class Member {
 set setName(name) {
 this.name = name
 }

 get getName(name) {
 return this.name
 }
}
</code></pre>

## Intersection Observer

Intersection Observer는 엘리먼트가 viewport에 노출되고 있는지 여부를 확인해주는 API다. 간단히 말해 브라우저의 어떤 요소가 화면에 노출되고 있는지 안되고 있는지를 확인해주는 라이브러리라고 생각하면 될 것 같다. 이 라이브러리가 없이 엘리먼트가 노출중인지 확인하려면 어떻게 해야할까? 이전까지 주로 사용되던 API는 [getBoundingClientRect](https://developer.mozilla.org/ko/docs/Web/API/Element/getBoundingClientRect)다. 이 메서드는 해당 엘리먼트의 크기와 viewport에서의 상대적인 위치를 알려준다.

```javascript
function isInViewport(element) {
 // viewport의 height, width
 const viewportHeight = document.documentElement.clientHeight
 const viewportWidth = document.documentElement.clientWidth
 // 엘리먼트의 rect
 const rect = element.getBoundingClientRect()

 if (!rect.width || !rect.height) {
 return false
 }

 var top = rect.top >= 0 && rect.top < viewportHeight
 var bottom = rect.bottom >= 0 && rect.bottom < viewportHeight
 var left = rect.left >= 0 && rect.left < viewportWidth
 var right = rect.right >= 0 && rect.right < viewportWidth

 return (top || bottom) && (left || right)
}
```

물론 이 함수로도 충분히 확인이 가능하다. 그러나 문제는 이 함수를 시도 때도 없이 불러야 할것이다. 문서가 처음로딩 되었을때, 스크롤 이벤트가 발생했을때, 브라우저 크키가 변경되었을때, (모바일의 경우) 화면이 회전 됐을 때 등 고려해야할 사황이 너무나도 많다. 그리고 결정적으로 `getBoudingClientRect()`는 호출이 될 때 마다 레이아웃을 다시 그리기 때문에 성능에 매우 부담이 간다. [참고](https://gist.github.com/paulirish/5d52fb081b3570c81e3a)

## 사용법

```javascript
var options = {
 root: document.querySelector("#scrollArea"),
 rootMargin: "0px",
 threshold: 1.0,
}

var observer = new IntersectionObserver(callback, options)
```

`root`: 엘리먼트 노출을 감시할 viewport 영역이다. null이 기본값이고, null이라면 브라우저 전체를 감시하게 된다.

`rootMargin`: css의 margin property와 사용법이 같다. root에 margin 값을 주는 것이다.

`threshold`: number, 또는 array of number가 가능하다. 여기서 숫자는 viewport의 n%가 되었을 때 이벤트를 호출할 것인지 결정하는 것이다. array라면 해당 숫자만큼 노출될때 마다 이벤트가 발생하게 된다. 기본값은 0 으로, 단 1픽셀이라도 노출될 경우 이벤트가 발생된다.

`callback`: 타겟이 노출될때 실행되는 콜백함수다. 여기서는 두개의 값을 반환한다.

`entries`: [IntersectionObserverEntry](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry)의 array이며, 각각 얼마나 노출되었는지 값이 나온다.

`observer`: callback을 호출한 `IntersectionObserver`

```javascript
var target = document.querySelector("#listItem")
observer.observe(target)
```

https://codepen.io/yceffort/pen/RzVyML

콘솔창을 보면, 50% 이상 나온 엘리먼트가 찍히는 것을 볼 수 있다.

## 활용해보기

### 무한스크롤

https://codepen.io/yceffort/pen/VJbxNM

문서의 맨 마지막에 height가 10px인 `#watch_end_of_document`를 넣어서, 이 엘리먼트가 브라우저에 노출되게 되면 스크롤의 마지막에 온것으로 간주하고 그 때마다 새로운 아이템들을 로딩하도록 명령을 내렸다.

### 이미지 레이지 로딩

https://codepen.io/yceffort/pen/YoVvya

콘솔 - 네트워크 창으로 가보면 이미지가 동적으로 로딩되는 것을 알 수 있다. 각각의 엘리먼트들에 observer를 걸어두고, viewport에 걸칠때 마다 backgroundImage를 줘서 이미지가 로딩되도록 하였다.

## Intersection Observer Intersection Observer는 엘리먼트가 viewport에 노출되고 있는지 여부를 확인해주는 API다. 간단히 말해 브라우저의 어떤 요소가 화면에 노출되고 있는지 안되고 있는지를 확인해주는 라이브러리라고 생각하면 될 것 같다. 이 라이브러리가 없이 엘리먼트가 노출중인지 확인하려면 어떻게 해야할까? 이...

Intersection Observer

이 문서는 더 이상 업데이트 하지 않을 생각이다. 대신 https://github.com/yceffort/koa-nextjs-react-typescript-boilerplate 여기에서 계속 해서 만들어 가고 있다.

## 사용한 오픈소스

### React

자세한 설명은 생략 한다

### Nextjs

[NextJs](https://nextjs.org/) 리액트에서 서버사이드 렌더링을 할 수 있도록 해주는 프레임워크다. angular나 react 등은 SPA라서 불편한 점이 더러 있는데, React에서 NextJS를 활용하면 react를 ssr(server side rendering)이 되도록 바꿔줄 수 있다. 그리고 자동으로 code splitting이 되고, 파일 시스템을 기준으로 라우팅이 되며, .. 뭐 이런저런 장점이 있다.

### koa

express를 만든 개발자들이 따로 떨어져 나와서 만든 web framework가 바로 koa다. express와 비교했을 때는 koa가 비교적 가볍고, node.js v7의 async/await 를 자유자재로 쓸 수 있다는 데 있다. 그리고 es6를 도입해서 `generator`도 사용할 수 있다. IBM이 express를 인수해버린 관계로, 많은 개발자들이? koa로 넘어가는 추세라고 하는데, 아직은 잘 모르겠다.

### Styled Component

[Styled Component](https://www.styled-components.com/)

## 시작

### package.json

```json
{
 "name": "hello-world",
 "version": "0.0.1",
 "description": "hello-world",
 "main": "main.js",
 "scripts": {
 "build": "tsc --outDir dist server/index.ts && next build",
 "start": "NODE_ENV=production node dist",
 "dev": "concurrently 'tsc -w --outDir dist server/index.ts' 'npm run watch-server -- --delay 2'",
 "watch-server": "nodemon --exec 'node dist' --watch dist -e '*'"
 },
 "author": "",
 "license": "UNLICENSED",
 "dependencies": {
 "@zeit/next-typescript": "^1.1.1",
 "@zeit/next-css": "^1.0.1",
 "@zeit/next-stylus": "^1.0.1",
 "formik": "^1.5.7",
 "isomorphic-fetch": "^2.2.1",
 "koa": "^2.7.0",
 "koa-body": "^4.1.0",
 "koa-bodyparser": "^4.2.1",
 "koa-morgan": "^1.0.1",
 "koa-mount": "^4.0.0",
 "koa-proxies": "^0.8.1",
 "koa-router": "^7.4.0",
 "next": "^8.1.0",
 "react": "^16.8.6",
 "react-dom": "^16.8.6",
 "styled-components": "^3.4.10"
 },
 "devDependencies": {
 "@types/isomorphic-fetch": "0.0.35",
 "@types/koa": "^2.0.48",
 "@types/koa-bodyparser": "^4.3.0",
 "@types/koa-morgan": "^1.0.4",
 "@types/koa-mount": "^3.0.1",
 "@types/koa-router": "^7.0.40",
 "@types/next": "^8.0.5",
 "@types/node": "^12.0.4",
 "@types/react": "^16.8.22",
 "babel-eslint": "^10.0.1",
 "babel-plugin-styled-components": "^1.10.0",
 "concurrently": "^4.1.0",
 "nodemon": "^1.19.1",
 "npm": "^6.9.0",
 "typescript": "^3.5.1"
 }
}
```

### ./typings/koa-proxies/index.d.ts

애석하게도 `koa-proxies`의 typing이 존재하지 않는다. `./typings/koa-proxies`에 아래와 같이 추가하자.

```typescript
declare module "koa-proxies" {
 import { Middleware } from "koa"
 namespace koaProxies {}
 function koaProxies(name: string, options?: any): Middleware
 export = koaProxies
}
```

타입스크립트로 `nextjs`를 사용하기 위하여 `@zeit/next-typescript`를 사용하였다.

### ./next.config.js

별도의 설정은 넣지 않았다.

```javascript
const withCSS = require("@zeit/next-css")
const withStylus = require("@zeit/next-stylus")
const withTypescript = require("@zeit/next-typescript")

module.exports = withTypescript(
 withStylus(
 withCSS({
 webpack: config => ({
 ...config,
 plugins: [...(config.plugins || [])],
 node: {
 fs: "empty",
 },
 }),
 })
 )
)
```

### ./.babelrc

```json
{
 "presets": ["next/babel", "@zeit/next-typescript/babel"]
}
```

### ./pages/index.tsx

nextjs의 유일한 제약은 pages 폴더다. pages에 렌더링 할 페이지를 만들어 둬야 한다.

```typescript
import * as React from "react"
import styled from "styled-components"

const MainHeading = styled.div`
 font-size: 50px;
 color: red;
`

export default class IndexPage extends React.PureComponent {
 render() {
 return <MainHeading>hello?</MainHeading>
 }
}
```

### ./server/index.ts

가장 중요한 서버 부분이다. koa를 사용한 이유는 `*/api/*`로 요청이 오는 호출에 대해서는 외부에 있을지도 모르는 api서버를 활용하기 위함이다. 이를 별도로 처리 하지 않는다면 CORS이슈가 있을수 있기 때문이다. 그래서 `koa`를 통해서 `nextjs`를 호출하는 방식으로 바꾸었다.

```typescript
import * as next from "next"
import * as Koa from "koa"
import * as morgan from "koa-morgan"
import * as Router from "koa-router"
import * as proxy from "koa-proxies"
import * as bodyparser from "koa-bodyparser"
import * as mount from "koa-mount"

const isDev = process.env.NODE_ENV !== "production"

function renderNext(nextApp: next.Server, route: string) {
 return (ctx: Koa.Context) => {
 ctx.res.statusCode = 200
 ctx.respond = false

 nextApp.render(ctx.req, ctx.res, route, {
 ...((ctx.request && ctx.request.body) || {}),
 ...ctx.params,
 ...ctx.query,
 })
 }
}

async function main() {
 const nextApp = next({ isDev })
 const app = new Koa()
 const router = new Router()

 await nextApp.prepare()
 const handle = nextApp.getRequestHandler()

 router.get("/", renderNext(nextApp, "/index"))

 app
 .use(morgan("combined"))
 .use(bodyparser())
 .use(
 proxy("/api", {
 target: "https://jayg-api-request.test.com",
 rewrite: (path: string) => path.replace(/^\/api/, ""),
 changeOrigin: true,
 })
 )
 .use(
 mount("/health", (ctx: Koa.Context) => {
 handle(ctx.req, ctx.res)
 ctx.status = 200
 })
 )
 .use(router.routes())
 .use(
 mount("/", (ctx: Koa.Context) => {
 handle(ctx.req, ctx.res)
 ctx.respond = false
 })
 )
 .listen(3000)
}

main()
```

이 문서는 더 이상 업데이트 하지 않을 생각이다. 대신 https://github.com/yceffort/koa-nextjs-react-typescript-boilerplate 여기에서 계속 해서 만들어 가고 있다. ## 사용한 오픈소스  ### React  자세한 설명은 생략 한다  ### Nextjs  [NextJs](https://nextjs.org...

Typescript, React, NextJs, Koa, Styled Component 로 프론트엔드 환경 만들기

## 고민지점

- Global 로 관리하는 Colorset Red, Blue, Green, Black이 있다.
- 이 색들은 각각 지정된 칼라코드가 있다
- 그러나 때로는 그 컬러코드에 맞게 안쓰는 경우도 있다
- 그러나 때로는 저 네개를 다 안쓰고 1~3개만 쓰는 경우가 있다.

## Union types

[Union Type](https://www.typescriptlang.org/docs/handbook/advanced-types.html#union-types)

어떤 라이브러리에서 받는 파라미터의 값을 number와 string으로 제한한다고 하자. 그렇다면 코드는 아래와 같을 것이다.

```typescript
function numberOrString(parameter: any) {
 if (typeof parameter === "number") {
 return console.log("this is number")
 } 
 if (typeof parameter === "string") {
 return console.log("this is string")
 } 

 throw new Error(`Expecting number of string, but got ${typeof parameter}`)
}
```

물론 이런식으로 처리할수도 있다. 그러나 문제는 컴파일 상에서만 괜찮다는 것이다. any는 typescript에서 어떤 값이든 들어갈 수 있으므로, 이 에러는 런타임상에서만 발생하게 된다.

일반적인 객체지향 코드에서는, 두 타입으로 하나 hierarchy 를 만들어서 처리할 수도 있지만, 약간 그건 과한 느낌이 있기도 하다. 이 코드를 이렇게 처리할 수도 있다.

```typescript
function numberOrString(parameter: string|number) {
 // do something...
}
```

이런 방식을 `Union Type` 이라고 한다. `Union Type`는 하나의 값에 여러가지 타입을 표현할 수 있게 해준다. 사용할 값을 `|`로 구별해서 넣어주면 된다.

처음 문제로 돌아와서, Global한 컬러로 지정하려는 값이 네개 있다고 했다. 이제 이것은 이렇게 처리하면 된다.

```typescript
export type GlobalColors = 'Red' | 'Blue' | 'Green' | 'Black'
```

자 그럼 이것이 어떻게 동작하는지 보자.

```typescript
function getColor(parameter: GlobalColors) {
 console.log(parameter)
}
```

`getColor()`에 `GlobalColors`가 아닌 다른 값을 넣으면 

![ts1](../images/ts1.png)

vscode에서 (물론 plugin덕분이지만) 네개의 값만 강제하는 것을 볼 수 있다. 만약 다른 값을 넣는다면 컴파일상에서 에러가 난다.

![ts2](../images/ts2.png)

한 가지 신기 (당연) 한점은, 이 코드는 자바스크립트로 컴파일 되지 않는다는 것이다. 이점은 `enum`이랑 다른데, 암튼 지간에 저건 자바스크립트에서 처리할 수 없는 일이다. 이러한 타입체크는 나중에 컴파일 하게 된다면, `*.d.ts`에서 처리해준다는 것이다.


## enum

`enum`은 열거형이다. 그렇다.

```typescript
enum GlobalColorSet {
 Red,
 Blue,
 Green,
 Black
}
```

를 컴파일하면

```javascript
var GlobalColorSet;
(function (GlobalColorSet) {
 GlobalColorSet[GlobalColorSet["Red"] = 0] = "Red";
 GlobalColorSet[GlobalColorSet["Blue"] = 1] = "Blue";
 GlobalColorSet[GlobalColorSet["Green"] = 2] = "Green";
 GlobalColorSet[GlobalColorSet["Black"] = 3] = "Black";
})(GlobalColorSet || (GlobalColorSet = {}));
```
로 나온다. 복잡한데, 결과적으로는 아래와 같다.

```javascript
var GlobalColorSet = {0: "Red", 1: "Blue", 2: "Green", 3: "Black", Red: 0, Blue: 1, Green: 2, Black: 3}
```

일반적인 map과 다르게 key로 값을 얻을 수 있고, 값으로도 key를 얻을 수 있다.

그러나 `enum`은 const로 선언될 경우 컴파일 결과가 조금다르다.

```typescript
const enum ConstGlobalColorSet {
 Red,
 Blue,
 Green,
 Black
}
```

다른게 아니고, 사실 아무것도 컴파일 되지 않는다. 이는 읽기 전용으로 생성된 객체이기 때문에 (const) 수정할 객체 자체가 생성되지 않는 것이다. 또한 앞서 보았던 값으로 키를 얻는 행위 또한 불가능해진다. 

아무튼, 글로벌하게 쓸 색상을 enum으로 선언했다.

```typescript
const enum ConstGlobalColorSet {
 Red = '11, 11, 11',
 Blue = '22, 22, 22',
 Green = '33, 33, 33',
 Black = '44, 44, 44',
}
```


## Record

`Record<K, V>`로 쓰인다. 여기서 K는 key이고, V는 Value다. `keyof Record<K, T>`는 `k`로, `Record<K, T>[K]`는 `T`다. (느낌이 그렇다는 것) 밑에 예시를 보자.

이거는 

```typescript
//이거는
type ColorProperties = Record<GlobalColors, string>
//이거와 같다
type ColorProperties = { red: string, blue: string, green: string, black: string }
```

(말보다 코드가 쉽다) 위에 경우와 마찬가지로, js로 컴파일 됐을 때는 위 두 코드는 아무런 js로 변환되지 않는다. 

```typescript
colorProp1['purple'] = 1;
colorProp1['orange']
```

위의 코드는 당연히 타입스크립트 컴파일에서 에러가 난다.

## Partial

Partial은 key를 옵셔널하게 해준다. 

```typescript
// 이거는
let PartialColorProperties = Partial<ColorProperties>
// 이거와 같다.
let PartialColorProperties = { red?: string, blue?: string, green?: string, black?: string }
```

## 정리

```typescript
// 글로벌 색으로 4가지를 선언한다.
export type GlobalColors = 'Red' | 'Blue' | 'Green' | 'Black'

// 기본값으로 색상을 선언한다.
const enum ConstGlobalColorSet {
 Red = '11, 11, 11',
 Blue = '22, 22, 22',
 Green = '33, 33, 33',
 Black = '44, 44, 44',
}

// 기본 색상값외에 다른 색상을 사용하고 싶다면 
const CUSTOM_COLORS: Partial<Record<GlobalColors, string>> = {
 gray: '55, 55, 55',
}
```

## 고민지점 - Global 로 관리하는 Colorset Red, Blue, Green, Black이 있다. - 이 색들은 각각 지정된 칼라코드가 있다 - 그러나 때로는 그 컬러코드에 맞게 안쓰는 경우도 있다 - 그러나 때로는 저 네개를 다 안쓰고 1~3개만 쓰는 경우가 있다.  ## Union types  [Union Type](https://www....

Typescript Type, Enum, Partial, Record로 글로벌 변수 관리하기

### 함수형 컴포넌트

```javascript
import React from 'react';

function Hello(props) {
 return (
 <div>hello {props.name}</div>
 )
}
```

함수형 컴포넌트는 컴포넌트에서 라이프사이클, state 등의 기능을 제거한 상태이므로 메모리 사용량이 다른 컴포넌트에 비해 적다. 따라서 성능을 최적화 하기 위해서는 위와 같이 함수형 컴포넌트를 많이 쓰는 것이 좋다.

### 함수형 컴포넌트 ```javascript import React from 'react'; function Hello(props) { return ( <div>hello {props.name}</div> ) } ``` 함수형 컴포넌트는 컴포넌트에서 라이프사이클, state 등의 기능을 제거한 상태이므로 메모리 사용량이...

yceffort

javascript class

Intersection Observer

Typescript, React, NextJs, Koa, Styled Component 로 프론트엔드 환경 만들기

Typescript Type, Enum, Partial, Record로 글로벌 변수 관리하기

React 공부하기 8 - 함수형 컴포넌트