[TIL/React] 구조 분해 할당, Hook의 도입 이유, state의 필요성, 라이프 사이클의 필요성

구조 분해 할당

구조 분해 할당(Destructuring Assignment): JavaScript의 문법으로, 배열이나 객체의 값을 쉽게 추출하여 할당하는 방법이다. 

const fruits = ['apple', 'banana', 'cherry'];
const [first, second, third] = fruits;

console.log(first); // 'apple'
console.log(second); // 'banana'
console.log(third); // 'cherry'

 

`const[]`는 배열에 대해 구조 분해 할당을 할 때 사용하는 문법이다.

 

---

Hook은 왜 도입되었는가?

1. 함수형 컴포넌트에서도 상태 관리를 하기 위함
2. 사이드 이펙트 (부수효과) 처리를 쉽게 하기 위함
3. 클래스형 컴포넌트에서는 상태 관련 로직을 재사용하기 어려웠음, 고차 컴포넌트(HOC), Render Props를 사용해 해결할 수는 있지만 코드가 복잡해지고 가독성이 떨어지는 문제 발생
4. 클래스 컴포넌트는 `this` 키워드 사용과 같은 복잡성이 있음
5. 클래스형 컴포넌트에서는 `componentDidMount`, `componentDidUpdate`, `componentWillUnmount` 등의 라이프 사이클 메서드를 사용해야 해서 특정 기능이나 책임이 뒤섞여버리는 현상이 발생함. Hook을 사용하면 `useEffect` 훅을 통해 여러 사이드 이펙트를 분리해서 관리 가능

---

상태(state)를 왜 사용해야 하는가?

state의 역할

1. 동적 데이터 관리: 사용자 입력, API 응답, 이벤트 등으로 변경되는 데이터를 상태로 관리해야 함
2. UI 업데이트: 상태가 변경되면 React는 자동으로 해당 상태와 관련된 UI를 업데이트 함. 이를 통해 사용자에게 실시간으로 변화하는 UI 제공 가능

 

state의 필요성

1. 사용자 상호작용 처리: 사용자가 버튼을 클릭하거나 폼에 입력할 때마다 UI가 변해야 하는데, state를 사용하면 손쉽게 처리 가능함
2. 외부 데이터 관리: 서버로부터 데이터를 받아오거나, 타이머와 같은 비동기적 작업을 처리할 때 state를 사용하면 효율적으로 데이터 관리 및 UI 업데이트 가능
3. 컴포넌트 재사용성 증가: state를 통해 각 컴포넌트가 자신만의 데이터 관리 가능, 컴포넌트가 독립적으로 동작하고 쉽게 재사용 될 수 있음

---

라이플 사이클은 왜 추가해야 하는가?

라이프 사이클의 역할

1. 컴포넌트 초기화 및 정리
2. 상태 변화에 따른 작업 처리: state가 변화할 때마다 특정 작업을 실행할 수 있도록 도움

 

라이프 사이클의 필요성

1. 초기 데이터 로딩: 컴포넌트가 처음 렌더링 될 때 서버에서 데이터를 가져오거나, 필요한 리소스를 로드하는 작업을 수행할 수 있음
2. 클린업 필요성: 컴포넌트가 DOM에서 제거될 때, 이벤트 리스너를 제거하거나 타이머를 정리해야 하는 상황에서 라이플 사이클 메서드 활용 가능
3. 상태 변화에 따른 부가 작업: state 또는 props가 변경될 때마다 특정 작업(예: 애니메이션 시작, 로그 기록 등)을 실행할 수 있도록 도움

// 초기 데이터 로딩
import React, { useEffect, useState } from 'react';

function DataFetcher() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []); // 빈 배열은 컴포넌트가 마운트될 때만 실행됨

  return <div>Data: {data ? JSON.stringify(data) : 'Loading...'}</div>;
}

// 클린업

useEffect(() => {
  const handleResize = () => console.log('Window resized');
  window.addEventListener('resize', handleResize);

  return () => {
    window.removeEventListener('resize', handleResize);
  };
}, []);