[TID] 7일차 - 2020.03.17

Grace·2020년 3월 17일

React TID TIL 공부기록 리엑트

Today I Done

목록 보기

7/120

⌚️ 시간관리

☀️ 기상시간 - 8:00
🌕 마감시간 - 24:00

💻 오늘 배운 것

1. react

1. LifeCycle API(생명주기) : 컴포넌트가 브라우저에 실현될 때

     - 나타날 때
     - 업데이트 될 때
     - 사라질 때

컴포넌트 초기생성
- component생성자 함수
```
	constructor(props) {
	super(props);
	}
```
```
-> 컴포넌트가 원래 가지고있던 생성자함수를 호출하여 작업진행
```
- componentDidMount
  : component가 화면에 나타나게 될 때 호출됨
  - 외부라이브러리연동
  - 컴포넌트에서 필요한 데이터 요청
  - DOM 관련작업 (스크롤 설정, 크기 읽기 등)
컴보넌트 업데이트
- static getDerivedStateFromProps(nextProps, prevState)
  : props로 받아온 값을 state로 동기화하는 작업에 사용
  -> 여기서는 setState가 아닌 props가 바뀔 때 설정하고, 설정하고 싶은 state값을 리턴하는 형태로 사용됨.
```
if(nextprops.value !== prevState.value) {
	return {value: nextProps.value};
}
return null; // null이 나오면 따로 업데이트 할 것은 없다는 의미
```
- shouldComponentUpdate(nextProps, nextState)
  : 특정 조건에 따라 렌더링을 막아주는 함수
  - 현재 컴포넌트의 상태가 업데이트되지 않아도, 부모 컴포넌트가 리렌더링되면, 자식 컴포넌트들도 렌더링 된다.
    ->여기서 "렌더링" 된다는건, render() 함수가 호출된다는 의미
  - 쓸데없이 낭비되고 있는 CPU 처리량을 줄여주기 위해 불필요한 과정을 방지
  - 기본적으로 true를 반환하며 조건에 따라 false를 반환하면 해당 조건에는 render함수가 호출되지 않음
- componentDidUpdate(nextProps, nextState)
  - shouldComponentUpdate 에서 true 를 반환했을때만 호출됨(false에선 호출X)
  - 주로 애니메이션 효과를 초기화하거나, 이벤트 리스너를 없애는 작업을 하며, 이 함수가 호출되고난 다음에는, render() 가 호출됨
컴포넌트 제거
- componentWillUnmount()
  : 컴포넌트가 더이상 필요하지 않게 될 경우 단 하나의 API호출
  -> 주로 등록했던 이벤트를 제거
컴포넌트 에러 발생 시
- render함수에서 놓친 에러가 발생 시 리액트 앱이 크러쉬 되어버림.(웹페이지 상에 아무런 내용이 나타나지 않을 경우)
```
componentDidCatch(error, info) {
this.setState({
error: true
});
}
```
```
를 사용하여 실행시켜서 render함수를 통해 에러 띄워주기
```
- 컴포넌트 자신의 render 함수에서 에러가 발생해버리는것은 잡아낼 수는 없지만, 그 대신에 컴포넌트의 자식 컴포넌트 내부에서 발생하는 에러들을 잡아낼 수 있다.
  -> 자식 컴포넌트에서 발생한 에러사항은 부모 컨포넌트에서 잡을 수 있다.
- 에러가 발생하는 주요 이유
  1. 존재하지 않는 함수를 호출하려고 할 때 (예를들어서 props 로 받았을줄 알았던 함수가 전달되지 않았을때)
  2. 배열이나 객체가 올 줄 알았는데, 해당 객체나 배열이 존재하지 않을때

2. javascript

1. Array

: 여러개의 항목을 하나의 변수에 저장해야 할 떄 사용

내장객체 Array : var 객체변수 = new 객체명[매개변수 ...];
-> 객체명 뒤에 ()를 넣게 되면 배열요소의 개수가 고정되지 않기 때문에 많은 자료를 저장할 수 있다.
length : 배열에 몇개의 요소가 있는지 index의 값을 알려줌 (index는 0부터 시작)
함수종류
1. concat( ) : 기존배열에 또 다른 배열이나 값을 합쳐서 새로운 배열을 만드는 함수
  -> 기존 배열은 건드리지 않고, 값이 추가된 새로운 배열이 생성된다
2. join( ) : 배열의 요소를 연결하는 함수, 연결하는 기호를 직접 지정이 가능하다.
  -> 구분기호를 지정하지 않을 경우 기본값은 , 로 요소를 구분
3. push( ) : 기존 배열의 맨끝에 요소를 추가 - 기존배열이 수정됨
4. unshift( ) : 기존 배열의 맨앞에 요소를 추가 - 기존배열이 수정됨
  ->push와 같이 반환값은 배열 요소의 개수
5. pop( ) : 배열의 맨끝에 있는 요소를 추출 - 기존배열이 수정됨
6. shift( ) : 배열의 맨앞에 있는 요소를 추출 - 기존배열이 수정됨
7. splice( ) : 원하는 위치의 요소를 삭제/추가
  -> 일정구간의 요소를 삭제하거나 새로운 요소를 추가
  - 괄호 안 요소1개 : 배열의 인덱스값을 가리키며 인덱스요소부터 배열 끝 요소까지 삭제됨
  - 괄호 안 요소2개 : 첫번째는 인덱스값, 두번째는 삭제할 개수
  - 괄호 안 요소3개 이상 : 첫번째는 인덱스값, 두번째는 삭제할 개수, 세번째는 삭제한 위치에 새로 추가할 요소
    -> 여러개의 요소 추가 : 세번째 인수부터 차례대로 추가할 요소 나열
    ----> 배열에서 일부요소를 삭제할 때 많이 사용됨
8. slice( ) : 원하는 위치의 요소들을 추출 - 기존의 배열은 변경되지 않음
  - 괄호 안 요소1개 : 해당하는 인덱스값에서 부터 끝의 요소까지 추출
  - 괄호 안 요소2개 : 첫번째요소 ~ 두번째요소 직전까지를 추출
    ----> 배열에서 추출한 요소를 가지고 새로운 배열을 만들어 사용할 때

2. DOM(Document Object Model) 문서객체모델

: 웹문서의 모든 요소를 js를 이용하여 조작할 수 있도록 객체를 사용해 문서를 해석하는 방법

DOM의 구조
: DOM tree - body를 h1,p등의 부모요소
h1,p등은 body의 자식요소

❓오늘의 나는

금요일 저녁에 약속이 생겼기 때문에, 엄마와 시간을 조금이라도 보내고자 오전부터 빡쎄게 집중을 했다(?) 더 열심히 공부해야 하지 않나- 싶은 생각도 들었지만, 그래도 먹고살고자 하는 공부인데... 이런시간에라도 엄마와 시간을 보낼 수 있음에 감사하는 하루였다 😅
리엑트강의를 듣는데 첫 강의에 없던 내용들이 참 많다. API의 종류에 대해 이해하고 익히느라 시간을 많이 썼다..
ethen의 계속된 진도에 대한 질문에는 답하기가 너무 어렵다. 예민한 반응일수도 있지만... 사실 지금의 내가 이 언어들의 구조를 이해를 하고 있는건지 모르겠다. 내용들 이해는 하고 있지만 제대로 된 배움인지 모르겠다ㅠㅠ
js를 책으로 다시 한번 훑는건 여전히 잘하고 있는 것 같다. 오늘은 강의에서 계속 듣던 DOM에 대해서 알게 되었다.
힘들었지만 운동까지 잘 마쳤다. 하루의 계획 안에 운동은 꼭 있어야 할 것 같다. 힘들게 감량했던 몸무게가 다시 정점을 찍으려하기에 긴장해야겠다..!

❗️내일의 나는

react강의를 부지런히 들어야겠다. 이어폰을 꼽고 강의를 듣는게 더 집중이 잘 되는 것 같다. 내일은 마지막 강의까지 다 듣도록 노력해야겠다.
js책에서 DOM까지 내용을 훑어서 정리해야겠다.
내일이면 운동한지 3일째가 되는 날이다. 작심3일까지는 될 수 있게 노력해야겠다.
커밋을 위한 코드가 아닌, 배운내용을 적용하여 내가 직접 작성한 코드를 커밋해야겠다. 강의자료를 올릴 순 없다..!