REACT (4) 썸네일형 리스트형 (React) useState를 이용한 input 필드 입력받기, 한 글자만 입력 되는 이유 자바스크립트와 다른 react의 input바닐라 자바스크립트로 요소의 value를 받아오고자 할 때 아래와 같은 순서를 거친다.HTML input 태그로 요소를 생성한다.자바스크립트로 해당 요소 DOM을 받아온다. (querySelector, getElementById 등 사용)받아온 DOM의 value 값을 가져온다. 하지만 리액트를 사용해 위와 같이 접근하려고 하면 문제가 생긴다.JSX로 요소를 생성해도 자바스크립트와 달리 한 글자만 입력되는 난감한 상황이 펼쳐지기 때문이다.이는 리액트 특유의 렌더링 방식 때문에 생기는 현상이다. 요소에 value 속성을 설정하고 onChange 핸들러를 제공하지 않으면입력값이 리액트 상태에 반영되지 않는다. 리액트는 이때 사용자 입력을 감지하고 컴포넌트를.. (React) useState 배열, 객체 업데이트 패턴 정리 useState를 사용해 상태 변수(state)와 상태를 변경하는 함수(setState)를 생성할 때, 원시 타입(primitive type)이 아닌 객체나 배열을 사용해야 할 때가 있다.문제는 객체나 배열은 원시 타입과 다르게 참조에 의해 할당되거나 복사되므로, React가 객체 변경을 감지할 수 없다는 것이다. 객체는 메모리 주소를 가지므로 내용이 변경되어도 참조 값은 변하지 않기 때문이다.따라서 useState로 객체를 업데이트할 때는 스프레드 연산자(...)를 사용해 새로운 객체를 만들어 반환해야 한다. 이번 포스팅에서는 useState로 객체를 업데이트할 때 사용할 수 있는 패턴을 정리하고자 한다. 1. 배열/객체에 새로운 요소를 추가해야 할 때배열/객체를 상태 변수(state)로 만들고,.. (React) useState 기본 사용법 정리, 주의할 점 리액트는 다양한 내장 함수인 훅(hook)을 제공하며, useState도 그중 하나이다.useState는 리액트에게 특정 상태(state)가 변경될 때 컴포넌트를 다시 렌더링 해달라고 요청하기 위해 사용된다.상태가 없다면 리액트는 어떤 변화를 기준으로 렌더링해야 할지 모르기에, 상태를 통해 이러한 변화를 리액트에게 알려주는 것이다. 기본 사용 방법useState는 크게 다음 과정을 거쳐 사용할 수 있다.useState import 하기useState()함수로 state(상태변수)와 setState(상태 변수 변경 함수) 생성하기state(상태변수)가 변경돼야 하는 부분에 setState(상태 변수 변경 함수)를 사용해 상태변수 변경하기import { useState } from 'react'; //u.. (React) vite를 이용한 리액트 세팅 방법 이번 포스팅에서는 리액트로 프로젝트를 세팅하는 방법을 정리하고자 한다. 이번 포스팅에서는 Vite로 리액트 프로젝트를 시작하는 방법을 설명한다. Vite는 설정이 간단하고 확장이 쉽다는 장점이 있다. 1. node js 설치하기npm을 사용하기 위해 먼저 node js를 설치해야 한다. npm은 노드 패키지를 관리하는 툴로 node js를 설치하면 자동으로 설치된다. 2. 프로젝트 폴더 생성 & 터미널 오픈프로젝트를 생성하고 싶은 폴더를 새로 생성하고, visual studio code를 열어 해당 폴더를 오픈한다. 3. 리액트 프로젝트 생성제일 먼저 Vite를 이용해 리액트 프로젝트를 생성해야 한다. 아래 명령어에서 .은 현재 디렉토리를 의미하며, --template react는 .. 이전 1 다음
