06.29 항해99 23일차

 

 

이번주 배운것 및 노트 :

클래스 컴포넌트 - 클래스, 랜더

 

State - 한 컴포넌트에서만 다루는 데이터, 함수형에는 없음.(리액트 훅 필요)

Props - 부모컴포넌트에서 가져오는 데이터

 

두번째 방법

-SASS, SCSS 

SASS는 CSS와 조금 호환이 떨어짐

SCSS는 SASS 3번쨰 버전 추가됨. 호환성이 높음.

 

1)Nesting - 묶어준다. (괄호안 괄호?)

2)상위요소 이어쓰기 - ‘&’

3)문자열 치환 - 변수 사용가능!

ㄴ$변수이름: 선언;

ㄴ#{선언된 변수이름}

 

Styled-components :: 이름짓기 해방!, 직관적!

선언 변수 = styled.이름`백팁내 css 문법 동일 적용`;

백팁 내 자바 문법 > ${입력}

Props 받아오는 방법 -

 

 

축약을 위해 애로우펑션 헷갈려.,.,. 익숙해진다면 나아질까?

*익명함수

변수선언 = 값 => 반환값;

 

노드와 얀 버전 체크 check 기본 <<

 

돔은 트리구조

가상돔- 트리의 불필요한 연산을 줄이기 위해, 메모리에 그리고 부분만 변경.(리액트 탄생비화)

렌더링 - 처음진입시

리렌더링 - 데이터 바꼈을때

라이프사이클 - 생명주기

렌더링을 준비하는 순간부터 사라질 때까지

생성 >수정(업데이트) > 소멸

state와 props 과 변할때 업데이트, 부모가 변했을 때. 강제 업데이트(forceUpdate())

 

 

라이프 사이클 함수 : 생성자 함수, 등등…

클래스형 컴포넌트에서만 사용 가능

 

React.StrictMode << 리액트 요소 면밀히 파악해주는 검사해주는 모드

클래스형 - 클래스() / 랜더()

함수형 - const()

 

Command or control + click - 해당함수로 이동

 

Constructor - 생성자함수

Render - 내부 데이터 취급. 수정불가.

componentDidMount() - 처음 랜더할때만

componentDidUpdate(prevProps, prevState, snapshot) - 업데이트 할때만. 현재 데이터와 과거의 데이터 비교가능.

componentWillUnmount() - 컴포넌트 제거 시. 돔까지 제거.

 

조건부 랜더링.

 

 

Ref -

리액트(돔) 요소 - 가상돔을 생성 후, 돔 업로드되는 요소.

React.createRef(). > Current라는 곳에 넣어줌. Ex) this.value.current

느낀것 :

생패가 망가진게 생각보다 영향이 크다... <ㅇ>

내게 아쉬웠던 것 : 

..머리?

 

내일 할 일 :

공부 및 과제.,.,