Frontend/ReactJS21 [React] ver. 17 & 18 // ver. 17 // ver. 18 2023. 2. 2. [React]서버로 데이터 보내기 1. axios 사용하여 데이터 전송 회원가입 창을 예시로 회원가입 버튼 클릭 시 데이터 전송하도록 구현. 이때 axios를 사용한다. //joinForm.jsx function postInfo(e) { e.preventDefault(); axios .post("http://localhost:8080/users", { //spring에서도 @Getmapping("/users") 통해 설정 userId: ID, password: PW, name: Name, email: Email, }).then((res) => { //데이터 전송 성공 시 response 받음 alert("회원가입 성공"); }) .catch(function (err) { //데이터 전송 실패 시 error 받음 alert("error는 .. 2023. 1. 2. [React] selected React에서는 selected를 사용할 수 없다. => value 를 사용한다. apple banana carrot 2022. 12. 27. [Nomad coders] React_Effects https://reactjs.org/docs/hooks-effect.html Using the Effect Hook – React A JavaScript library for building user interfaces reactjs.org Effects의 필요성 component가 매번 rerendering 되지 않고(useState 사용) 처음에만 코드가 실행되게 만들고 싶을 때 첫 번째 render에만 코드가 실행되고, 이후 state 변화에는 실행되지 않도록 하기 위함 ex) API를 통해 데이터를 가져올 때 import { useState, useEffect } from "react"; function App() { const [counter, setValue] = useState(0); con.. 2022. 11. 10. [Nomad coders] React_Props Props 컴포넌트의 요소 값 부모 컴포넌트로부터 자식 컴포넌트로 데이터 보내기 //props 사용 전 function SaveBtn(){ return Save Changes; } function ConfirmBtn(){ return Confirm } function App() { return ( ); } SaveBtn 컴포넌트와 ConfirmBtn 컴포넌트는 text만 다름 => 따라서 둘의 부모 컴포넌트인 Btn 컴포넌트 생성 //props 사용 후 function Btn(props){ return {props.text}; } function App() { return ( ); } 여기서 props는 Btn({text: "Save Changes"}) 형태로 Btn 함수 인자로 전달됨 props - {.. 2022. 11. 8. [Nomad coders] React_응용 단위 converter ※ label Minutes label에 있는 text를 클릭하면 label의 for의 값과 일치하는 id값으로 이동한다. 분 -> 시간 html 요소 구성하기 Super Converter Minutes Hours onchange 요소 사용 2. js로 입력값 받은 값으로 minutes을 변경 event.target.value 사용 Minutes의 값과 Hours의 값은 동일 Hours의 값은 수정할 수 없음 => onChange event가 없기 때문 3. Minutes 값 Hours 로 변경하기 4. reset 버튼 생성 후 기능 구현 Reset 시간 -> 분 flip 함수 이용 flip 버튼을 클릭하면 hours와 minutes 입력 여부 toggle Flip 2. 1번 과정.. 2022. 11. 8. 이전 1 2 3 4 다음
