[React] 리액트의 여러 기능들
Form
React에서 Form을 만들기 위해서는 일반 HTML Form과 유사한 방식으로 작성하면 다. React Form은 state를 사용하여 입력값을 관리하고, 입력값의 유효성을 검사하거나 전송을 처리할 수 있다.
React에서 Form을 만들기 위한 단계
- state에 입력값을 저장하기 위한 변수를 만든다.
- Form 요소를 만든다. 이때, input 요소는 value 속성을 통해 state에 저장된 값을 가져와 출력한다.
- 입력값이 변경될 때마다, onChange 이벤트를 통해 state를 업데이트한다.
- Form 요소의 onSibmit 이벤트를 처리하여 입력값의 유효성 검사나 전송을 처리함
fetch()
React에서 데이터를 가져오기 위해서는 JavaScript의 fetch() 함수를 사용한다. fetch() 함수는 Promise를 반환하며, 네트워크 요청을 비동기적으로 수행함
fetch() 함수를 사용하기 위한 단계
- fetch() 함수를 호출하여 네트워크 요청을 보낸다. 이때, 요청할 URL과 옵션 객체를 전달한다.
- Promise 객체를 반환하다. 이 객체는 서버로부터 응답이 도착하면 결과를 담고 있는 Response 객체를 전달함
- Response 객체의 json() 메서드를 호출하여 JSON 형식의 데이터를 파싱 한다. 이때, 또 다른 Promise 객체를 반환한다.
- Promise 객체의 then() 메서드를 호출하여 데이터를 사용한다. 이 때, 파싱 된 데이터를 전달받는다.
useEffect
useEffect를 사용하면 컴포넌트가 마운트되거나 업데이트되었을 때 원하는 동작을 수행할 수 있다.
useEffect는 두 개의 매개변수를 가지고 있다. 콜백 함수(callback)와 의존성 배열(dependency array)이다.
- 콜백 함수(callback): useEffect가 수행할 동작을 정의한다. 이 함수는 컴포넌트가 마운트 되거나 업데이트될 때마다 호출된다. 일반적으로 비동기 작업, 데이터 가져오기, 이벤트 리스너 등을 설정하는 데 사용된다.
- 의존성 배열(dependency array) : 선택적으로 사용할 수 있다. 의존성 배열은 useEffect가 의존하는 상태나 프로퍼티를 나타내는 배열이다. 의존성 배열에 포함된 값들이 변경될 때만 useEffect의 콜백 함수가 호출된다. 의존성 배열이 빈 배열([ ])인 경우, 콜백 함수는 컴포넌트가 처음 마운트될 때만 호출된다.
useEffect를 사용하여 컴포넌트 생명주기 이벤트를 구현할 수 있다. 일반저긍로 다음과 같은 동작을 수행할 수 있다.
- 데이터 가져오기
- 이벤트 리스너 등록 및 해제
- 외부 라이브러리 초기화
- 타이머 설정 및 해
clean up function
리액트에서 useEffect Hook을 사용할 때, 부작용(effect)을 생성하는 코드를 작성하게 된다. useEffect는 컴포넌트가 렌더링 될 때마다 호출되므로, 해당 코드에서 생성된 부작용은 컴포넌트가 unmount 되거나 업데이트될 때 정리(clean-up)되어야 한다. 그렇지 않으면 메모리 누수(memory leak)나 예상치 못한 동작을 초래할 수 있다. clean-up 함수를 사용하여 부작용이 생성한 자원을 정리하는 것은, useEffect 함수의 또 다른 중요한 기능 중 하나이다.
async / await
async/await은 자바스크립트에서 비동기(asynchronous) 코드를 처리하기 위한 기술 중 하나이다. 이 기술은 Promise와 함께 사용되며, 코드를 보다 직관적으로 작성할 수 있도록 도와준다.
React에서는 API 호출, 파일 업로드 등의 작업을 비동기적으로 처리해야 하는 경우가 많이 있다. 이때,async/await을 사용하면, 비동기적으로 처리해야 하는 작업을 보다 직관적으로 작성할 수 있으며, 코드의 가독성을 향상할 수 있다. 이러한 이유로, React에서도 async/await을 적극적으로 활용하여 비동기 작업을 처리하는 것이 일반 적다.