2024/03/225 [React] 리액트-스프링부트 연동하기 인텔리제이에서 새로운 프로젝트 생성 1. 프록시 서버 끄기 2. main에서 리액트 생성 터미널 열기 여기에 만들 것임 ! 리액트 이름은 소문자로 한다. 여기에 프록시 설정해주어야 함 3. 자바를 실행하고, 리액트를 실행해야 한다. 컨트롤러 패키지 생성 후 컨트롤러 파일 생성 @RestController public class ReactTestController { @GetMapping("/api/reactTest") public String hello() { return "테스트 입니다"; } } testreact의 App.js axios를 사용하기 위해 설치해야 함 import './App.css'; import {useEffect, useState} from "react"; import axios .. 2024. 3. 22. [React] TODOLIST 구성하기 App.js function App() { return ( ); } export default App; Header, Editor, List 컴포넌트로 만들기 Header.js function Header() { return ( TODOLIST 🗓️ {new Date().toDateString()} ) } export default Header; Editor.js const Editor = () => { return ( 추가 ) } export default Editor List.js function List() { return ( Todo List😀 ) } export default List List.js에 들어갈 컴포넌트 TodoItem.js 생성 const TodoItem = () => {.. 2024. 3. 22. [React] 로컬 스토리지 넣을 때 localstorage.setItem 꺼내올 때 localstorage.getItem 삭제 localstorage.removeItem 수정은 따로 없음 → 같은 키에 다른 값을 넣으면 덮어 씌워짐 덮어 씌워지지 않도록 해야 데이터가 유지된다. 객체는 그대로 넣으면 안되고, 반드시 JSON형태로 직렬화를 해주어야 한다. 객체의 키말고 값만 가지고 오고 싶으면, JSON으로 파싱해서 그 중 키가 tel인 것 의 값만 가지고 오도록 한다. localstorage → 브라우저, 서버를 껐다가 켜도 그대로 남아있다. App.js useEffect (()=> { if(localStorage.getItem('watched') == null) localStorage.setItem('watched', JSON... 2024. 3. 22. [React] Context Api와 redux 리액트 : single page Single page Application의 단점 : 컴포넌트 간의 state 공유 어려움. 특히, 형제 간의 컴포넌트의 공유 - Lifecycle(생명주기) class Detail extends React.Component { componentDidMount() { // Detail 컴포넌트가 로드 되고나서 실행할 코드 } componentDidUpdate() { // Detail 컴포넌트가 업데이트 되고나서 실행할 코드 } componentWillUnmount() { // Detail 컴포넌트가 삭제 되기 전에 실행할 코드 } } 컴포넌트는 1) 생성이 될 수도 있고(mount) 2) 재렌더링이 될 수도 있고(update) 3) 삭제가 될 수도 있다(unmout) - .. 2024. 3. 22. [React] axios 리액트에서 AJAX 사용하기 위해 설치를 해준다. 더보기 npm i axios { /* axios.Method('서버url') .then((변수)=>{}) -> 성공했을 때 .catch(()=>{}) -> 실패했을 때 */ axios.get('https://raw.githubusercontent.com/professorjiwon/data/main/data2.json') -> 서버의 주소 .then((result)=>{ console.log(result.data); let copy = [...clothes, ...result.data] setClothes(copy) }) .catch(()=>{console.log('실패');}) /* - 서버로 보낼때 axios.post('서버 url', 보낼 데이터) ... 2024. 3. 22. 이전 1 다음
