React state와 props 중 state에 대해서

먼저.. 공식 문서를 통해 state와 props가 어떤 개념인지 알아봤다.

https://ko.reactjs.org/docs/faq-state.html#what-is-the-difference-between-state-and-props

prop(properties의 줄임말)와 state는 일반 자바스크립트 객체다. 두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있는데 한 가지 중요한 방식에서 차이가 있다. props는 (함수 매개변수처럼) 컴포넌트에 전달되는 반면 state는 (함수 내 선언된 변수처럼) 컴포넌트 안에서 관리한다. React에서 this.props와 this.state는 모두 렌더링된 값을 나타낸다. 다시 말해 현재 화면에 보이는 걸 말한다

 그냥.. 둘다 자바스크립트의 일반 객체이고, 두 객체 모두 렌더링 결과물에 영향을 주지만 props는 함수의 매개변수처럼 전달되고 state는 컴포넌트의 함수 내에서 변수처럼 저장되는 것 같다. 다만 변수와는 다른 점으로는 변수는 값을 저장만 할 수 있고 state는 useState 문법으로 초기 상태 값을 함수를 통해 다른 상태로 변경할 수 있다.

 

useState 문법

1. 먼저 useState문법을 사용하려면 React로부터 import를 받아야한다.

  - useState를 입력하면 자동으로 위에 import된다.

2. 배열 구조 분해 문법을 사용해 작성한다.

  - let [state, setState] = state(초기값);

  - state라는 변수에 초기값을 저장하고 setState 함수를 통해 원할 때 값을 바꾸는 식으로 사용한다.

  - setState에 set이 붙은 이유는 관습적으로 붙는다.

  - 배열 구조 분해가 이해가 안간다면 이걸 참조하자.

  - let [state, setState] = state(초기값);은 이렇게 풀어 쓸 수 있다.

let arr = [1, 2]
let a = arr[0]
let b = arr[1]

// 이것을 축약처럼 쓴다고 생각하면 편하당

  - 초기값 안에는 불린 값을 넣을 수도 있고 배열도 넣을 수 있고 객체도 넣을 수 있다.

 

useState문법 왜 씀

 useState문법을 사용하면 변경되는 HTML 데이터를 상태 변경 해줄 수 있다. 그렇기 때문에 고정적인 데이터는 변수 선언하고 사용하는 것이 좋고 변경된다 하면 useState문법을 사용하는 것이 좋다 라고 말할 수 있겠다. 그렇기 때문에 아무곳에나 state를 난사하게 되면 큰 책임이 뒤따르게 되는데 스코프 때문에 문제가 생긴다. 아직 더 배워봐야 알 수 있을 것 같다. state 난사해보고 경험해보도록 하자.

 

useState 함수의 특징

1. 기존의 값과 변경되는 값이 같다면 변경을 해주지 않는다.

 - 초기값으로 배열을 설정할 때를 생각하자. 배열로 초기값을 저장하면 해당 state는 참조 값을 가리키고 있는 주소를 나타내고 있다. 그런데 우리가 거기서 이 배열의 특정 인덱스를 수정한다고 했을 때  그 특정 인덱스의 값으로 바꾸길 원한다고 한다면 과연 바뀔까?

 - 정답으로는 변경되지 않는다 이다. 분명 참조값이 수정되긴 할테지만 내가 선언한 변수는 그 참조값을 가리키는 주소를 나타내고 있기 때문에 해당 인덱스의 값을 수정했다 하더라도 주소지가 바뀌지 않았기 때문에 현재 값과 바뀔 값이 같아서 변경되지 않는다.

 - 이 말이 이해가 안갈수도 있기 때문에 해결법으로는 [...배열]이다. '...'은 배열의 []를 제거해주세요 라는 말이고 다시 []를 씌웠기 때문에 다른 주소를 가리키는 변수가 된다.

2. 위의 내용과는 반대로 원본 배열의 값을 바꿔버리는 메소드가 존재하는데, 내가 실습을 통해 밝혀낸건 sort() 메소드가 그렇다. 원본 배열의 값을 바꿔버리기 떄문에 얕은 복사를 해서 가져온다음 state의 상태를 변경했다.