Frontend40 [React] Fetch & Axios Fetch Fetch 는 네트워크를 통해 리소스를 비동기적으로 가져오는 방법이며, 백엔드와 통신할 때 자주 사용한다. 기본적으로 내장되어 있기 때문에 설치할 필요가 없다. Fetch의 기본 형태 fetch(url, [option]) .then((response) => response.json()) .then((data) => console.log(data)); Fetch는 두 개의 인자를 갖는다. url 통신할 url을 지정한다. 이때 같은 포트의 localhost와 통신 할 경우 포트 번호 다음에 오는 url 주소를 입력하면 된다. ex) '/login' 반면 다른 포트의 localhost와 통신 할 경우 url 전체 주소를 입력해야한다. ex) 'http://localhost:8080/login' o.. 2023. 2. 5. [React] login 여부 확인 먼저 간단히 로그인 로직을 설명하자면 login 로직 ① 프론트에서 백으로 login 요청 ② 백에서 회원 정보 확인해서 응답 반환 (로그인 성공 시 1, 실패 시 0) ③ 응답으로 1 받았을 시 로컬 스토리지에 회원 정보 삽입, 홈 화면으로 이동 로그인 시 로컬 스토리지에 회원 정보가 담기는 것을 이용하여 로그인 여부를 확인하는 컴포넌트를 만듭니다. ☞ 경로 ☞ isLogin.jsx 파일 이 컴포넌트를 활용하여 로그아웃이 되어 있을 경우 홈 화면으로 이동시키는 로직을 구현합니다. 2023. 2. 3. [React] 삼항연산자 & map() 삼항연산자 react의 render부분에서는 if문을 쓸 수 없기 때문에 삼항연산자로 대신한다. // 삼항 연산자 function App() { const [loading, setLoading] = useState(false); return ( { loading ? 로딩중 ... : null } ); } //loading 이 true일 경우 '로딩중 ...', false일 경우 null map() for문을 대신하여 array.map() 사용 // map function App() { const arr = [1, 2, 3]; return ( { arr.map((i) => { return i })} ); } 2023. 2. 2. [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. 이전 1 2 3 4 5 6 7 다음
