React js - Life cycle부터 functional component까지

React Life-Cycle

 

Component :

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

 

 

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

 

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

x
this.setState({
    ...this.state.xxx,
    {
        title: '제목',
        subtitle: '부제목'
    }
})

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

 

 

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

xxxxxxxxxx
this.setState({
    {
        title: '제목',
        subtitle: '부제목'
    },
    ...this.state.xxx
})

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

 

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

 

 

xxxxxxxxxx
{this.state.movies ? this._renderMovies() : 'Loading'}

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

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

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

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

 

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

 

functional component

같이 쓰면 된다

xxxxxxxxxx
function MoviePoster({poster}){
    return (
        <img src={poster} alt="Movie Poster" />
    )
}

 

smart component, dumb component

smart component는 state가 있고

dumb component는 state가 없다.

functional component가 바로 dumb component

 

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

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

 

 

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

 

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

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