React Native: 상태 업데이트 (전개연산자, 화살표 함수)

💡 예제: 목표를 입력창(TextInput)에서 입력받아 목표 리스트에 추가하기

const [enteredGoalText, setEnteredGoalText] = useState('');
const [courseGoals, setCourseGoals] = useState([]);

function goalInputHandler(entetedText) {
   	setEnteredGoalText(entetedText);
 }

 function addGoalHandler() {
   setCourseGoals((currentCourseGoals) => [...courseGoals, enteredGoalText]);
 }

💡 전개연산자 ([...])

• 배열이나 객체의 요소를 펼쳐서 가져와서 사용할 수 있게 해주는 JavaScript 문법

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const combinedArray = [...array1, ...array2];
console.log(combinedArray);  // [1, 2, 3, 4, 5, 6]

• 전개 연산자를 사용해 새로운 배열을 생성하는 것이 기존 배열을 직접 수정하는 것보다 효율적이고 안전 -> React 컴포넌트에서 상태를 업데이트할 때 권장되는 방식
  
  
  
  

💡 화살표 함수

// 일반적인 함수 선언 방식
function add(a, b) {
  return a + b;
}

// 화살표 함수
const add = (a, b) => a + b;

• 주로 익명 함수나 콜백 함수를 간결하게 작성할 때 사용
• 특히 리액트 및 리액트 네이티브에서 컴포넌트의 메서드나 이벤트 핸들러를 정의할 때 자주 사용
  
  
  
  

💡 setCourseGoals((currentCourseGoals) =>)

• setCourseGoals 함수는 리액트의 useState 훅에서 제공되는 함수로서, 해당 상태값을 업데이트하는 함수 -> setCourseGoals 함수가 호출되는 시점에서의 courseGoals 상태값인 'currentCourseGoals'라는 변수를 통해 상태 업데이트
• '목표 리스트(courseGoals)'은 비동기적으로 업데이트 -> '목표 리스트(courseGoals)'에 바로 '새로운 목표(enteredGoalText)'를 추가하면 충돌이 일어날 수 있음
• 따라서 '현재 목표 리스트(currentCourseGoals)'에다 '새로운 목표(enteredGoalText)'를 더한 새로운 리스트를 만들어 안전한 업데이트 진행