TIL 15 | state와 Ref + 문법

TIL

...

---

state

컴포넌트에서 관리할 수 있는 데이터, 생성, 업데이트, 삭제가 가능하다.
단 방향으로만 데이터가 흐른다.( 부모가 자식에게 줄 수 있다는 뜻 )

---

state 관리 in 클래스형 컴포넌트

this.setState() 를 활용

this.state = {
	list: [1,2,3},
        count: 5,
}
//-----------------------------------------
this.setState({count: this.state.count + 1});
this.setState({list: [...list, 4});

처럼 활용한다.
state 값을 dictionary 형태로 파라미터로 넘겨준다.

---

state 관리 in 함수형 컴포넌트

원래 함수형 컴포넌트는 state를 갖을 수 없었다. 하지만 이젠 useState 라는 리액트 훅 중에 하나를 사용해 state 를 관리할 수 있게 되었다고 한다.

const [state 로 쓸 변수명, 함수명] = React.useState(초기값);
// --------------------------------------------
// ex
const [count, setCount] = React.useState(3);

의 방식으로 사용한다.

---

각종 문법들

알다가도 모를 문법들,,

---

Array.from()

어떤 숫자의 크기의 길이를 가진 배열로 반환해주는 내장 함수
라고 배우긴 했는데 찾아보니 더 다양한 활용법...

Array.from() 은
유사 배열 객체 ( length 속성과 인덱싱 된 요소를 가진 객체)
순회 가능한 객체 ( Map, Set 등객체의 요소를 얻을 수 있는 객체)
를 가지고 새 Array 를 만들 수 있다고 한다.

길이를 가진 문자열, 혹은 숫자를 가지고 그 길이를 가진 배열을 만들 수 있다.

this.state = {
	count: 3
}
// ---------------------------------------
const nemo_count = Array.from({length: this.state.count}, (v,  i)=>(i));
// [0, 1, 2]

---

스프레드 문법

하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만드는 것. 값을 만드는게 아니기 때무에 변수에 할당할 수 없다.

역시나 배운 것 이외에도 다양한 활용법이 있다.( 참고 )

집고 넘어가고 싶은 부분은 불변성 관리에 관한 부분이다.
불변성이라는 키워드는 리액트에서 굉장히 중요한 부분이라고 한다.

• React state가 불변이어야 하는 이유
• React에서 불변성을 지켜야 하는 이유
  참고하도록 하고

state 값으로 리스트가 들어가 있고, 값을 추가해야 하는 상황일 때, 배열에 변화를 줄때는 push() 로 줄수 있지만, 그럴 경우 불변성이 유지되지 않기 때문에 스프레드 문법을 활용해야 한다.

const array = [1,2,3,4];
const sameArray = array;
sameArray.push(5);

console.log(array !== sameArray); // false

여기서 array 와 sameArray 는 같은 주소 값을 갖기 때문에 불변성이 유지되지 않는다.

const array = [1,2,3,4];
const differentArray = [...array, 5];
console.log(array !== differentArray); // true

스프레드 문법을 활용할 경우, 각각의 배열은 다른 레퍼런스를 가지기 때문에 기존의 array 는 불변성이 유지되며, 둘으 다르다는 결과 값이 나오게 된다.

---

const _bucket_data = {id: "ss", text: "안녕", completed: false};
-
let bucket_data = {..._bucket_data, completed: true};
// 딕셔너리 형식에서의 스프레드 활용법