목요일

알게된것

CSS - Grid 사용법
- 그리드 정리

CRA 에서의 절대경로 사용법

jsconfig.json에 아래의 코드를 작성해준다.

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": [
    "src"
  ]
}

package.json을 수정해준다.
```
"scripts": {
  "start": "NODE_PATH=src react-scripts start",
  "build": "NODE_PATH=src react-scripts build",
},
```
package.json을 수정하는 것 말고도 .env 파일을 수정해서 하는 방법도 있다.

리액트 클래스 컴포넌트 사용법
- 역시 공식문서 가 최고다. 꼭 읽어보자.
- 이전까지 Hooks 만 사용해서 처음에는 조금 헷갈리는게 많았다.
- 클래스 컴포넌트는 훅과 다르게 클래스로 만들어진다. 그리고 클래스의 인스턴스로 만들어짐에 따라 Hooks 와 다르게 진정한 의미의 생명 주기를 갖는다.
  - 훅 - 함수형 컴포넌트는 클래스의 인스턴스와 다르게 함수 하나가 실행이 된다. 즉, 자신의 생명주기를 갖지 못한다. 이 문제를 해결하기 위해 리액트팀은 훅이라는 개념을 도입했고, 덕분에 함수형 컴포넌트에서도 생명주기를 흉내낼 수 있게 되었다.
  - 클래스로 관리하게 되면서 this 를 사용할 수 있다.
    this 오랜만에 class 에서 this 를 사용해서 조금 헷갈렸다.
    개인적으는 class 안에서 인스턴스 메서드를 arrow-function 으로 만드는걸 좋아하지 않는다. 하지만 이번에는 팀원들이 다들 arrow 을 사용해서 나도 사용해봤다. 그런데 굳이 arrow-function 으로 한줄짜리 함수를 만들거면 handler 함수를 만들바에 컴포넌트에 바로 inline-function 으로 넣는게 더 좋지 않을까?
- class 의 render 함수는 함수형 컴포넌트에서 Hooks 을 제외한 코드와 동일하다.
ref 의 사용
- 이번에 만든 모달은 Deem 을 누르면 모달이 종료가 된다.
- 이 기능을 구현하기 위해서 Ref 를 사용했다. Ref 는 이해하기도 쉽고 사용하기도 정말 간편한거 같다. 앞으로 애용하게 될 거 같다.
  - 그렇다고 함부로 사용하지는 말자.
git
- 로컬에서 관리하는 리모트 브랜치 에 문제 생기는 경우가 있다. 이 때는 간단하게 로컬에서 관리하는 리모트 브랜치를 삭제해주자. 명령어는 git branch -r -D [branch-name]이다.

Previous월요일 Next2주차

Last updated 3 years ago