React 실습하며 배운 내용들

2020-06-29

Javascript의 Date 객체로 어제, 내일 구하기

Javascript의 Date 객체를 이용하면
하루 이전, 이후의 날짜 객체를 간단히 구할 수 있음.

const prevDate = new Date(${오늘 날짜 객체}.setDate(${오늘 날짜 객체}.getDate() - 1));
const nextDate = new Date(${오늘 날짜 객체}.setDate(${오늘 날짜 객체}.getDate() + 1));

componentDidMount()

component가 마운트된 직후, 즉 트리에 삽입된 직후에 호출된다.
화면을 처음 불러올 때 setState로 값을 설정하고 싶을 때 이용하는 듯.

아마, DOM 노드가 필요한 초기화 작업을 얘한테서 해주면 될 듯 하다.

얘는 기본적으로 render() 다음에 호출되는데,
setState를 호출하면 render()가 한 번 더 호출되기 때문에
render()가 두 번 발생하는 문제가 생기긴 함. 그래서 성능 문제가 발생할 수 있음.
그래도 필요한 경우에는 쓰는 게 맞다.

state의 올바른 사용법

setState를 이용해서 고칠 것.
state는 비동기적으로 update 된다.
```
// Wrong
this.setState({
  counter : this.state.counter + this.props.increment
});
```
state와 props는 비동기적으로 수정되기 때문에
위와 같이 사용할 경우 우리가 원하는 state나 props를
올바르게 가져오지 못 할 가능성이 크다.
(아직 update가 안되었다거나, 이미 다른 값으로 바뀌었다거나).
대신, 이전 상태의 state와 props를 인자로 받아올 수가 있다.
그래서, 이렇게 쓰면 된다.
```
// Correct
this.setState((state, props) => ({
  counter : state.counter + props.increment
}));
```
state 수정은 병합적으로 일어난다.
```
this.state = {
  posts : [],
  comments : []
}
```
우리가 만약 위의 state에서 posts 배열을 고칠 경우
comments는 전혀 손대지 않고, posts만 완벽하게 수정된다.
분리해서 원하는 부분만 수정하고, 다시 합치는 것을 상상하면 됨.

Javascript 빈 값 체크

Javascript에서는 간단하게 빈 값을 체크하는 방법이 있다.

var value = null;
if(!value) {
  // 빈 값
} else {
  // 빈 값 아닐 때
}

요렇게 체크해주면 된다.
자바스크립트 자료형에서 "", null, undefined, 0, NaN이
전부 false로 반환된다는 점을 이용한 체크 방법.

추가) 출처
만약 들어올 수 있는 자료형 중에서
빈 배열이나 빈 객체가 들어올 수도 있는 경우에는
다음과 같이 명시적으로 체크를 해줘야 한다.

// [], {} 도 빈값으로 처리 
var isEmpty = function(value){ 
  if( value == "" || value == null || value == undefined || 
  ( value != null && typeof value == "object" && !Object.keys(value).length )) { 
    return true 
  } else { 
    return false 
  } 
};

Github 원격저장소

github에 저장소 새로 만들기
github 저장소 주소 클립보드에 복사해두기
프로젝트 폴더로 간다.
- git init : git을 개시하는 명령어. 맨 처음에 한 번만 해주면 됨.
- git add . : 변경 사항들을 stage에 올려놓는다.
- git commit -m "커밋 메시지" : 변경 사항들을 커밋
- git remote add origin "원격 저장소 주소" : 원격 저장소와 연동하는 명령어. 얘도 처음에 한 번만.
- git push -u origin master or git push : (master branch에다가 혹은 그냥) push

git을 이용한 workflow를 잘 설명해놓은 블로그

git push 오류 발생 시 해결 방법

error: failed to push some refs to 'https://github.com/iborymagic/react-todo.git'
hint: Updates were rejected because the remote contains work that you do
hint: not have locally. This is usually caused by another repository pushing
hint: to the same ref. You may want to first integrate the remote changes
hint: (e.g., 'git pull ...') before pushing again.
hint: See the 'Note about fast-forwards' in 'git push --help' for details.

요런 오류가 뜰 때의 해결 방법.
그냥 간단하게, git pull origin master를 한 후에 다시 git push를 해주면 된다.
저런 에러가 뜨는 이유는, 내가 원격 저장소에다가 파일을 업로드해놓고
거기에서 README.md 파일을 새로 생성했기 때문.

원격 저장소에는 있는 파일이 내 컴퓨터에는 없기 때문에 에러가 발생하는 것.
git pull origin master로 master branch의 파일들을 가져와서 합친 후에
다시 push를 해주면 아무 이상없이 잘 push되는 것을 볼 수 있다.

 React (7) delete Thinking in React 