TIL 68일차_React : basic

state를 직접 수정하면 안되는 이유.

클래스 컴포넌트에서 state는 setState()를 사용한다.
직접 state를 수정하는 것 즉,
this.state.comment = 'Hello'
위 처럼 직접 변경하면 안된다.

this.state를 지정할 수 있는 유일한 공간은 constructor이다.

그 이유는 React의 life cycle 때문이다.

setState가 호출되면
리액트에서는 "어? 상태가 변했네?" 라고 인식하고
렌더링을 실행한다. (위 그림에서의 업데이트할 때 setState())

그런데 this.state로 직접 변경하게되면
리액트가 state가 변했다는걸 인지하지 못하고, 렌더링하지 않는다.

setState를 사용하는 두가지 방법

setState()는 객체, 함수 두가지 방법으로 사용할 수 있다.

일반적으로 객체를 넣어 사용하지만,
이전 state를 참조해야 할 때는, 함수를 넣어 작성해야한다.
왜냐하면, setState()함수도 비동기적으로 작동하기 때문에, 이전값을 넣을때는 함수안에 넣어줘야한다.

기본구조: this.setState( (state[,props]) => { } )
첫번째 인자: 현재 state
두번째 인자: props

사용 예시:

this.setState((prevState) ⇒ {
return { tweets: [...prevState.tweets, newTweet]}
}

기본 개념

상태를 수정하는 함수는, 상태가 있는 곳에 선언되어야 한다.

따라서 함수를 내려줘서, 쓰이는곳으로 props로 내려준다.
그리고나서 그위치에서 이벤트리스너로 쓸 함수안에서 실행시켜주기만 하면된다.

리액트는 단방향 데이터흐름을 가지고 있다.

one-way data flow!
위에서 아래로 데이터가 흐르기 때문에,
데이터는 공통부모 컴포넌트에 작성해줘야한다.

이러한 단방향 데이터 흐름이라는 리액트의 특성덕분에
리액트는 상태관리하기 매우 용이한 라이브러리다.