[React] react 주요 개념 #2

Form

여러 input 엘리먼트를 감쌈

<form onSubmit={handleSubmit}>

• input: 사용자로부터 입력값을 받음 <input type="text" value={name} onChange={handleChangeName} />
• label: input 요소를 설명함 <label htmlFor="name">Name:</label>

useEffect

React에서 컴포넌트가 렌더링될 때마다 특정 작업을 수행하고 싶을 때 사용

• useEffect(callback, []): 최초 렌더링 시에 한 번만 실행되며, 두번째 인자로 빈 배열([])을 전달하면 componentDidMount와 같은 효과를 가짐
• useEffect(callback, [deps]): deps 배열에 전달된 값이 바뀔 때마다 콜백 함수 실행

fetch

JavaScript에서 제공하는 네트워크 통신을 위한 메서드

• fetch(url): 주어진 URL에 GET 요청을 보내고, Promise 객체를 반환
• fetch(url, options): HTTP 메서드나 header를 추가적으로 설정
• fetch(url).then(response => response.json()): 서버에서 전달받은 JSON 데이터를 JavaScript 객체로 변환

Clean up function

useEffect 훅에서 반환된 함수로, 컴포넌트가 언마운트 되기 직전에 실행

이 함수를 이용하여 useEffect에서 생성한 리소스를 정리할 수 있음

useEffect(() => {
  const timerId = setTimeout(() => {
    console.log('mounted');
  }, 1000);

  return () => clearTimeout(timerId);
}, []);

async/await

async 함수는 비동기 작업을 수행하고, await 키워드를 사용하여 결과를 기다림

async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return data;
}