본문 바로가기
Front-end

React js - Life cycle부터 functional component까지

by 노아론 2019. 3. 1.
react life-cycle

React Life-Cycle

 

Component :

componentWillMount() -> render() -> componentDidMount()

 

 

state를 변경하면 render()가 작동한다

 

기존 state를 그대로 두고, setState로 새로운 내용 추가할때 이런 형식으로 추가한다

그러면 기존의 것들+ 새로운 내용 으로 데이터 구성이 된다.

 

 

만약 ...this.state.xxx가 뒤에 나오면 어떻게 될까

새로운 내용 + 기존의 것들 로 구성이 된다.

 

페이스북, 인스타그램의 infinite scroll이 이와 같은 방식으로 작동한다고 보면 된다.

 

 

위 코드와 같이 삼항연산자를 {}에서 사용가능하다.

state에 movies데이터가 당장 없을때 위 방식처럼 사용할 수 있다.

내가 찾고있는 데이터가 있는가

이런 방식을 쓰지않으면 내가 찾는 데이터가 없기때문에 컴파일 에러가 뜬다

 

언더스코어는 react함수와 분류하기 위해서 써둠

 

functional component

같이 쓰면 된다

 

smart component, dumb component

smart component는 state가 있고

dumb component는 state가 없다.

functional component가 바로 dumb component

 

dumb component는 업데이트 같은 생명주기가 다 사라짐.

위의 MoviePoster 같은 컴포넌트에선 사용해도 무방

 

 

-- nomad coders #5까지 학습 끝 --

 

주로 글로 된 튜토리얼을 선호하는데

노마드코더는 무언가 예외다. 사수가 앞에서 알려주는 느낌

댓글0