728x90 반응형 리액트31 폼 데이터와 함께 파일 업로드 사용자 아이디, 이름, 이메일과 첨부파일을 입력받아서 서버로 전달하면, 서버는 지정된 경로에 첨부파일을 저장하고, 전달받은 값과 첨부파일 정보를 이름 : 값 형식으로 반환하는 예제입니다. 프론트엔드 (리액트) 화면 구성 return ( ID: NAME: EMAIL: FILES: 업로드 ); 각각의 정보를 입력하는 입력창에 value 속성의 값으로 상태 변수를 지정하고, onChange 이벤트가 발생했을 때 동작할 이벤트 핸들러 함수를 지정합니다. 파일 선택창에는 여러 개의 파일을 선택할 수 있도록 multiple 속성을 지정하고, 이미지 파일을 선택할 수 있도록 accept="image/*" 속성을 지정합니다. 입력창 데이터를 관리할 상태 변수 및 이벤트 핸들러 함수 정의 const [userId, se.. 2023. 2. 21. 20230203 실습내용 컴포넌트 간 이벤트 및 데이터 처리 자식 컴포넌트에서 발생한 이벤트를 부모 컴포넌트로 전달 practice02/Parent.js paratice02/Child.js 형제 컴포넌트와 부모 컴포넌트에서 발생한 이벤트를 처리 practice03/Parent.js paratice03/Child.js 폼 폼 요소 처리 FormSample.js 여러 개의 입력 다루기 Reservation.js state 내리기 Sample.js 화씨, 섭씨 변환 및 물 끓음 표시 앱 Calculator.js Temperature.js BoillingVerdict.js ref 패스워드 검증 컴포넌트 ValidatePassword.js 스크롤 박스 구현 ScrollBox.js 실행결과 프로젝트 생성 방법은 아래 글 참조 https:/.. 2023. 2. 3. 20230202 실습내용 이벤트 핸들링 예제 EventPractice.js EventPracticeFunction.js 조건부 렌더링 Greeting.js Counter.js MailBox.js Warning.js 리스트 형태의 데이터 처리 IterationSample.js 실행결과 프로젝트 생성 방법은 아래 글 참조 https://myanjini.tistory.com/entry/20230131-%EC%8B%A4%EC%8A%B5%EB%82%B4%EC%9A%A9 2023. 2. 3. 20230201 실습내용 신호등, 댓글 컴포넌트를 함수형 컴포넌트를 클래스형 컴포넌트로 변경 Lamp.js TrafficLight.js Comment.js CommentList.js 부모 컴포넌트의 state 변수를 props 변수로 자식 컴포넌트로 전달 Title.js Todo.js 컴포넌트의 생명주기 함수 사용 Notification.js NotificationList.js 자식 컴포넌트에서 발생한 이벤트로 부모 컴포넌트의 state 변수를 변경 App.js - Parent, Child 프로젝트 생성 방법은 아래 글 참조 https://myanjini.tistory.com/entry/20230131-%EC%8B%A4%EC%8A%B5%EB%82%B4%EC%9A%A9 2023. 2. 2. 이전 1 2 3 4 5 6 7 8 다음 728x90 반응형
