2024/07/13 2

깊은 복사와 얕은 복사, 그리고 의존성 목록

대부분의 언어에서는 원시 타입(숫자, 불리언 등)과 읽기 전용 문자열은 값을 새로운 메모리 공간에 복사하여 독립적인 변수를 생성하는 깊은 복사를 수행한다. 반면에 객체와 배열 같은 참조 타입은 주소(참조)를 복사하여 같은 객체나 배열을 공유하게 되는 얕은 복사를 기본적으로 수행한다. 타입스크립트에서는 읽기 전용 문자열도 컴파일 타임에서 크기를 알 수 있어 깊은 복사가 발생할 수 있다. 이 복사 방식은 변수와 객체의 독립성을 유지하고 메모리 관리를 보장하기 위한 중요한 개념이다. 리액트 훅에서 깊은 복사 여부가 중요한 이유는 대다수 훅 함수에 필요한 의존성 목록 때문이다. const onChangeName = useCallback((e: ChangeEvent)=>{ const newForm = for..

Javascript/React 2024.07.13

Form 다루기

서버에서 HTML을 생성해 웹 브라우저 쪽에 전송하는 전통 방식의 웹 개발에서는 사용자에게 데이터를 받을 때 요소를 사용한다. 이때 폼 요소는 method 속성에 HTTP 메서드를 설정하고, action 속성에는 폼 데이터를 전송한 뒤 전환할 화면의 URL을 설정하는 방식으로 사용한다. 만일 method 설정값이 POST 라면 폼 데이터를 암호화하는 다음 3가지 방식 중 하나를 encType 속성에 설정한다.application/x-www-form-urlencoded(기본값)multipart/form-datatext/plan하지만 리액트와 같은 SPA 방식은 백엔드가 API 방식으로 동작하므로 굳이 폼 요소와 속성등을 설정할 필요가 없다. 다만 관습적으로 사용자 입력을 받는 부분을 요소로 구현한다.버튼 ..

Javascript/React 2024.07.13
728x90