React 02 - state

*React는 return 안에 최초 태그 안에서만 코드 작성가능하다

- 최상위 태그가 2개 이상일 경우 에러 발생

 

*state

- 임시로 사용할 데이터는 useState로 담아준다

- useState의 반환 데이터를 Destructuring 생성해 사용 가능하다

- a는 State에 있는 데이터, b는 함수가 남는다

 

*변수와 state의 차이점

변수는 값이 바뀌면 html에 반영이 안된다

state는 값이 바뀌면 html이 재랜더링 되어 반영이 된다

값이 자주바뀌면 state

바뀌지 않으면 변수를 사용한다

*state 변경 방법

- = 로 변경이 불가하다

- 변경함수를 사용한다

*state 변경함수의 특징

- 기존 state == 신규state의 경우 변경안해준다

*array / object의 특징

- 변수에 담겨진 데이터의 주소 값을 가지고 있다

변경안되는 사례

- 이 경우 postName은 데이터가 저장된 주소값만 가지고 있기 때문에

copy또한 같은 주소값을 가지고 있어서 변경이 이루어 지지 않는다

 

해결방법

- [...] 문법을 사용해 주소값을 가져오는 것이 아니라 array의 값을 복사해 새로운 주소에 담는다