본문 바로가기
728x90
반응형

개발23

map 함수를 이용한 객체 배열에 새로운 속성 추가 서버로 부터 받아 온 객체 배열 형식의 데이터에 새로운 속성을 추가해서 사용하는 예시입니다. 데이터 파일 정의 먼저 서버에서 제공하는 데이터를 파일로 만듧니다. 실제 환경에서는 별도의 REST API를 통해서 제공되나 여기에서는 편의를 위해 정적 리소스를 저장하는 public 디렉터리에 JSON 파일을 추가해서 구현합니다. 해당 파일은 http://localhost:3000/images.json 형식으로 요청해 사용할 수 있습니다. [ { "fileSizeBytes": 1479118, "url": "https://random.dog/831a74df-8de4-4150-a70f-12bd984f4bb4.JPG" }, { "fileSizeBytes": 75613, "url": "https://random.dog.. 2023. 2. 27.
useContext Hook 다음 그림과 같이 부모 컴포넌트의 값 변경을 자식 컴포넌트로 전달해서 반영하는 경우, 부모 컴포넌트의 상태 변수를 자식 컴포넌트의 props 변수로 설정해서 전달합니다. import { useState } from "react"; import './App.css'; const GrandParent = () => { const [grandParentSay, setGrandParentSay] = useState(''); return ( GrandParent GrandParent say setGrandParentSay(e.target.value)} /> ); }; const Parent = ({grandParentSay}) => { return ( Parent ); }; const Child = ({grand.. 2023. 2. 22.
폼 데이터와 함께 파일 업로드 사용자 아이디, 이름, 이메일과 첨부파일을 입력받아서 서버로 전달하면, 서버는 지정된 경로에 첨부파일을 저장하고, 전달받은 값과 첨부파일 정보를 이름 : 값 형식으로 반환하는 예제입니다. 프론트엔드 (리액트) 화면 구성 return ( ID: NAME: EMAIL: FILES: 업로드 ); 각각의 정보를 입력하는 입력창에 value 속성의 값으로 상태 변수를 지정하고, onChange 이벤트가 발생했을 때 동작할 이벤트 핸들러 함수를 지정합니다. 파일 선택창에는 여러 개의 파일을 선택할 수 있도록 multiple 속성을 지정하고, 이미지 파일을 선택할 수 있도록 accept="image/*" 속성을 지정합니다. 입력창 데이터를 관리할 상태 변수 및 이벤트 핸들러 함수 정의 const [userId, se.. 2023. 2. 21.
JavaScript 기본 3 배열 여러 개의 자료를 한꺼번에 다룰 수 있는 자료형 대괄호로 묶어서 표현하며, 각 자료는 쉼표로 구분 자바스크립트의 배열은 여러 자료형을 섞어서 사용할 수 있음 > let array = [ 10, 20.33, '문자열', true, [ 1, 2, 3 ], { name: '홍길동', age: 23 } ] undefined > array [ 10, 20.33, '문자열', true, [ 1, 2, 3 ], { name: '홍길동', age: 23 } ] 배열 요소(element) 배열에 들어 있는 각 자료 배열 요소에 접근할 때는 대괄호를 사용 : 배열변수[인덱스] > array[0] 10 > array[4] [ 1, 2, 3 ] > array[4][0] 1 > array[5] { name: '홍길동', .. 2023. 1. 27.
728x90
반응형