setState 관하여

이번에 [] 에 담긴 state 들의 버튼을 클릭했을때  배열에 있는 값들이 하나도 사라지지않고 카운트 1을 했을때 그 숫자에 맞는 버튼이 +1이되어 카운트를 올리는 걸 작업하게되었다....

 

생각을 했지만 난 너무 배열에 약하다는 생각도 했다 ㅠ 그건 계속 실무를 통해서 배워나가는 수 밖에 없지만...

이따가 setState 에 관해서 정리를 해봐야겠다. 일단 setState 는 비동기함수이다

 

 

 

setState 는 컴포넌트의 state 객체에 대한 업데이트를 실행한다

state 가 변경되면, 컴포넌트는 리렌더링된다.

 

그러면 근본적으로 

state 와 props 의 차이점은 뭘까?

props 와 state 는 일반 javaScript 객체이다.

두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있는데,

여기서 차이점은 props 는 컴포넌트에 전달되는 반면에  state 는 컴포넌트 안에서 관리가 된다.

 

react 에서 this.props 와 this.state 는 모두 렌더링된 값을 나타내는데 쉽게 말해서 현재 화면에 보이는 값들을 얘기한다

 

setState 호출은 비동기적으로 이루어지며, 그래서 setState 호출 직후 바로 새로운 값이 this.state 에 반영될거 라고 

믿어서는 안된다

 

 

그럼 setState 는 언제 비동기적일까?

 

setState 는 이벤트 핸들러 내에서 비동기적이다!

만약에 부모와 자식이 모두 click 이벤트에서 setState 를 호출한다면 자식은 두번 렌더링 되지 않는다.

하지만 react 는 브라우저 이벤트가 끝나는 그 시점에 state 를 일괄적으로 업데이트 시켜준다.

 

근데 그럼 여기서 의문이 더 들수있다.

왜 state 를 동기적으로 업데이트 시키지 않을까?

react 에 모든 컴포넌트가 자신의 이벤트 핸들러에서 setState() 를 호출할때 까지

React 는 리렌더링을 하지 않고 내부적으로 기다리고 있는다.

이것을 통해서 불필요한 렌더링을 방지 하면서 성능을 향상시킨다.

그런데 왜 react 는 리렌더링 대신 즉시 this.state 를 업데이트 하지 않는지가 더 궁금할수도 있는데

그 이유는 2가지!

 

1.props 와 state 사이의 일관성을 해칠수있고 이런 행위는 디버깅을 할때 매우 힘들어 질수있기에!

2.현재 작업중인 새로운 기능들을 구현하기 힘들게 만들수도 있다.

 

 

 

[useState]

 

useState 는 컴포넌트가 렌더링 할때 오직 한번만 생성되기 때문에 Create 라는 이름은 정확하지 않음....

컴포넌트가 다음 렌더링을 하는동안 useState 는 현재 state 를 준다.

 

const [ fruit , setFruit ] = useState('bababa');

 

위 자바스크립트 문법은 "배열 구조 분해" 라고 한다.