React State란?
리액트에서 데이터가 변할 때 화면을 다시 렌더링 해주기 위해서는 React State를 사용해야 합니다.
컴포넌트의 렌더링 결과물에 영향을 주는 데이터를 갖고 있는 객체 State가 변경되면 컴포넌트는 리랜더링 됩니다, 또한 State컴포넌트 안에서 관리됩니다.
React State 생성하기
state = {
todoData: [
{
id: "1",
title: "공부하기",
completed: true,
},
{
id: "2",
title: "청소하기",
completed: false,
},
],
value: "",
};State를 이용하는 방법
handleClick = (id) => {
let newDotoData = this.state.todoData.filter((data) => data.id !== id);
this.setState({ todoData: newDotoData });
};
// State를 이용해서 input에 입력한 값 받아오기
handleChange = (e) => {
this.setState({ value: e.target.value });
};
<input
type="text"
name="value"
style={{ flex: "10", padding: "5px" }}
placeholder="할 일 목록을 입력해주세요"
value={this.state.value}
onChange={this.handleChange}
/>
// 입력 버튼 클릭시 목록에 추가하기
handleSubmit = (e) => {
e.preventDefault();
// 새로운 할 일 데이터
let newTodo = {
id: Date.now(),
title: this.state.value,
completed: false,
};
// 할 일 목록에 새로운 할 일 추가해 주기
// todoData에 전개 연산자를 이용해서 추가하기
this.setState({ todoData: [...this.state.todoData, newTodo] });
};전개 연산자란?
전개 연산자는 ECMAscript6(2015)에서 새롭게 추가되었고, 특정 개체 또는 배열의 값을 다른 객체, 배열로 복제하거나 옮길때 사용합니다. 연산자의 모양은 ... <<점 3개...
배열 조합
// 예시 1
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [7, 8, 9];
const arrWrap = arr.concat(arr2, arr3);
console.log(arrWrap); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
// 예시 2
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [7, 8, 9];
const arrWrap = [...arr1, ...arr2, ...arr3]
console.log(arrWrap); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
// 예시 3
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
Array.prototype.push.apply(arr1, arr2);
console.log(arr1) // [1, 2, 3, 4, 5, 6]
// 예시 4
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
arr1.push(...arr2);
console.log(arr1) // [1, 2, 3, 4, 5]객체 조합
const obj1 = {
a: 'A',
b: 'B'
};
const obj2 = {
c: 'C',
d: 'D'
}
const objWrap = {obj1, obj2};
console.log(objWrap)
객체 자체가 들어갑니다.
전개 연산자를 사용
const obj1 = {
a: 'A',
b: 'B'
};
const obj2 = {
c: 'C',
d: 'D'
}
const objWrap = {...obj1, ...obj2};
console.log(objWrap)
객체 자체가 아닌 각각의 값이 할당 됩니다.
전개 연산자는 기존 배열을 보존
const arr1 = [1, 2, 3]
const arr2 = arr1.reverse();
console.log(arr1) // [3, 2, 1]
console.log(arr2) // [3, 2, 1]
// 원본 배열까지 역순으로 변경const arr1 = [1, 2, 3]
const arr2 = [...arr1].reverse();
console.log(arr1); // [1, 2, 3]
console.log(arr2); // [3, 2, 1]
// 전개연산자는 원본 배열을 유지조건부 삼항 연산자
// if문으로 작성
if (a) {
// a면 string a가 되고
a = "a"
} else {
// a가 아니면 string b가 된다
a = "b";
}
// 위의 코드를 조건부 삼항 연산자를 이용해 한 줄로 작성한 코드
a ? a = "a" : a = "b"; // if문을 한 줄의 코드로 작성
FE