React - State

State 란 무엇인가

• 자료를 잠깐 저장할 때는 변수를 사용하면 됩니다.

 

• 리액트에는 자료를 잠깐 저장할 때 변수 말고도 State 라는 문법이 존재합니다.

 

State를 선언하는 법

• State 를 사용하고 싶을 때는 이렇게 뽑아내서 사용합니다.

 

• 뽑아내서 사용할 때는 대괄호 안에 왼쪽에 있는 이름( 여기서는  a )은 State 의 실제 자료 즉, ’남자 코드 추천’ 이 됩니다.
• 대괄호 안에 오른쪽에 있는 이름은 State 변경을 도와주는 함수입니다.
• State 를 뽑아내서 사용할 때 사용하는 대괄호 문법은 js 의 Destructuring 문법입니다.
  • Destructuring( 디스트럭처링) 문법이란 배열( array ) 에 있는 값을 따로 변수로 빼서 쓰고 싶을 때 사용하는 문법입니다.

 

변수와 비슷한데 왜 굳이 State 를 써야하는가?

• 변수와의 차이점
  • 일반 변수는 갑자기 값이 변경되면 html 에 자동으로 반영이 안됩니다. 변수가 바뀌면 html 도 변경을 하도록 직접 코드를 짜야합니다.
  • 그러나 State를 사용하면 갑자기 값이 변경이 되어도 html 이 자동으로 랜더링이 됩니다.
  • 지금 같은 간단한 하드코딩 정도에는 변수도 html 에 자동으로 반영이 됩니다만 코드가 조금만 바뀌어도 State 와의 차이점이 느껴지실겁니다.
• 즉, State  는 값이 변동될 때 자동으로 html 에도 반영되게 만들고 싶을 때 사용합니다.

• 그렇다고 모든 코드를 State 로 짜는 것은 비효율적이므로, 자주 변경될 가능성이 있는 것들(className 이나 글자들 등)이나, html 에 자동으로 반영되어야 하는 것들만 State 로 만들어놓고 사용합시다.
• State 에는 배열의 형태로도 저장이 가능합니다.(Object도 가능)

 

Eslint WARNING 메세지 안뜨게 하는법

/* eslint-disable */

// 이렇게 적어주면 이 코드보다 아래에 있는 코드들에서 나오는
// WARNING 메세지들이 뜨지않게됩니다.

 

간단한 좋아요 버튼 구현하기

이벤트 핸들러 onClick 사용

• onClick 은 { } 안에 자바스크립트 코드를 아무렇게나 적는게 아니라 함수 이름만 적어줍니다.

• 대신 함수만드는 문법은 바로 넣어도 됩니다.

• function 은 에로우 함수를 사용하면 생략 가능합니다.

 

 

setState 함수를 이용해서 State 를 바꿔줍니다.

• State 를 생성할 때 [a, b] 이렇게 받는데 여기서 오른쪽의 b 가 setState 함수 즉, State 변경용 함수가 됩니다.
• setState 함수를 사용해서 State 를 변경해야만 자동으로 html 도 재랜더링(같이 변경)이 됩니다.

• setState 함수를 사용하지않고 아래처럼 그냥 State 를 변경하면 안됩니다.

 

array(배열) 형태인 State 변경하기

• 배열 형태인 State 는 변경할 때도 배열 형태를 넣어줘야합니다.

• 그러나 이렇게 해버리면 확장성이 없는 프로그램이 되므로, 확장성있게 구현합니다.

• array 나 object 를 다룰 때는 원본을 보존하는 것이 좋습니다.

• 여기서 array(배열) 또는 object(객체)를 복사할 때 주의점이  ‘let copy = subject’ 이렇게 작성하면 작동이 안됩니다.
  • 첫번째 이유는 array 와 object 의 특징 때문입니다. (참조형 타입: reference type 의 특징)
    • array 와 object 는 실제 값을 저장하는 것이 아니라 어딘가에 저장해두고 그 위치의 주소값만 변수에 담아집니다.
  • 두번째 이유는 setState 함수의 특징 때문입니다.
    • setState 는 값을 변경하기 전에 파라미터 값으로 들어온 값이 기존의 값과 같은지 먼저 비교해서 만약 같다면 State 를 변경하지 않도록 구성되어있습니다.
  • 이 두가지 이유를 합쳐보면 결론이 나옵니다. 즉,  아래처럼 바꾸려고 해도 변수에는 주소값만이 들어있기 때문에 실제로 setState 에서 값이 같은지 검사할 때 같다는 결론이 나와서 값이 바뀌지 않는 것입니다.

• 그래서 [...subject] 이런식으로 복사를 해줘야합니다. 그 이유는 [...] 의 의미가 괄호를 벗기고 다시 괄호를 씌워달라는 의미입니다. 즉, 주소값을 변경해달라는 의미가 되므로 주소값이 다른 복사본이 생성되게 됩니다.