새소식

인기 검색어

TL

20/09/06 TL. react - state, lifecycle

  • -

오늘 할 일

NLP 실습 강의, 코드 분석 -> Day 4, 5

리액트 클론 코딩 - 영화 앱 만들기

 

내일 할 일

NLP 실습 강의, 코드 분석 -> Day 5

강의 수강 -> 컴퓨터 프로그래밍2, 진로설계2

 

매일 할 일

매일 데이터 수집

매일 태깅

태깅 피드백

매일 독서 - 더블린 사람들

매일 영단어

 

시간 날 때 해야하는 일

코드 최적화 정리


state : dynamic data 동적 데이터를 다룰 때 사용. 쉽게 변하는 값들.2

react component는 React.Component에서 extends 한다.
class App extends React.Component {} 이런 구조

 

react component에는 function이 아니기 때문에 return은 가지지 않음. 그러나, render method를 가짐.

function component는 function이고 뭔가를 return한다. 그리고 screen에 표시한다.
class component 는 class다. react component로부터 확장되고 screen에 표시된다. 그 표시되는걸 render method 안에 넣어야 한다. -> react는 자동적으로 모든 class component의 render method를 실행하고자 하기 때문.

 

state는 object이고, component의 data를 넣을 공간이 있다.

react는 state가 바뀔 때마다 rendering해준다.
->state를 직접 변경하지 말고, setState를 통해 변경해 주자.

 

current를 이용하면 this.state에서 발생하는 성능 문제를 해결할 수 있다.

 

react life cycle
Mounting : 태어나는 것
constructor가 우선 실행됨. -> js에서 class를 만들 때 실행되는 것.
Updating : 일반적인 update
Unmounting : component가 죽는 것

componentDidMount : 컴포넌트가 render됐을 때 실행
componentDidUpdate : 컴포넌트가 update됐을 때 실행 (렌더링 다시 됐을 때)
componentWillUnmount : 컴포넌트가 죽을 때 실행

'TL' 카테고리의 다른 글

20/09/08 TL.  (0) 2020.09.08
20/09/07 TL. JAVA - 객체, 제네릭  (0) 2020.09.07
20/09/05 TL. 선형대수학 입문  (2) 2020.09.05
20/09/03 TL. 컴퓨터 그래픽스 기초  (0) 2020.09.03
20/09/02 TL. 컴파일러 Front End - Back End 구성 요소  (1) 2020.09.02
Contents

포스팅 주소를 복사했습니다

이 글이 도움이 되었다면 공감 부탁드립니다.