코딩애플3 [React] ajax AJAX : 서버에 GET, POST 요청을 할 때 새로고침 없이 데이터를 주고받을 수 있게 도와주는 브라우저 기능 => 실습에서는 axios 사용 설치 npm install axios 버튼을 눌러서 GET 요청 보내기 import axios from 'axios' { axios.get('url 주소!') .then((res)=>{ // 요청 성공 시 실행되는 함수 }) // 요청 실패 시 실행되는 함수 .catch((err)=>{console.log(err)}) }}>더보기 POST 요청 보내기 axios.post('URL', { 딕셔너리 데이터 }) .then((res)=>{ // 요청 성공 시 실행될 코드 }) .catch(()=>{ // 요청 실패 시 실행될 코드 }) 동시에 AJAX 여러개 Pr.. 2022. 12. 15. [React] 블로그 제작 4 - input 에 입력된 값 가져오기 // 이벤트 핸들러 부착 후, 현재 입력된 값 출력하기 { console.log(e.target.value) }}/> 주로 변수 명은 e로 사용함 e.target : 현재 이벤트가 발생한 곳 알려줌 e.preventDefault() : 이벤트 기본 동작 막아주기 e.stopPropagation() : 이벤트 버블링 막아주기 (이벤트가 상위 div로 퍼지는 현상) 사용자가 input에 입력한 데이터 저장하기 state 하나 생성해주고 이벤트가 발생할 때마다 e.target.value를 state에 갱신 function App (){ let [입력값, 입력값변경] = useState(''); return ( { 입력값변경(e.target.value) console.log(입력값) }}.. 2022. 12. 7. [React] 블로그 제작 2 - 동적인 UI, 삼항연산자 동적인 UI 만들기 - 사용자가 조작 시 형태가 바뀌는 UI 동적인 UI 만드는 3단계! 1. html, css로 미리 UI를 만들기 2. UI의 현재 상태를 state로 저장 3. state에 따라서 UI가 어떻게 보일지 코드 작성 예시) 모달창 띄우기 1. html, css로 미리 UI를 만들기 // App.js function Modal() { return ( 제목 날짜 상세 내용 ) } // App.css .modal { margin-top: 20px; padding : 20px; background : #eee; text-align: left; } 2. 현재 상태 저장 // UI의 현재 상태 let [modal, setModal] = useState(false); 3. state에 따라서 UI가.. 2022. 12. 7. 이전 1 다음
