공부 자료/리액트[React] (32) 썸네일형 리스트형 [React] Axios를 이용한 Spring boot 연결 리액트와 스프링 사이에 데이터를 주고 받을 수 있는 Axios 이전에 JSP를 이용한 프로젝트를 진행 할 때에는 Ajax를 이용해서 서버와 데이터를 주고받았는데, 이번에는 Axios를 이용할 예정이다. AXIOS에 대한 설명은 아래 블로깅을 참고하면 되며, 오늘의 블로깅은 AXIOS에 대한 예시를 보여준다고 생각하면 된다. 즉, Spring과의 연결이 크게 설정할 것이 있는 것이 아닌 AXIOS에서 설정하는 url과 Spring에서 설정하는 Controller의 url이 맞도록 매핑을 시켜주면 되는 것이다. 물론 이 전에 설정해야 할 것이 있는데 그것은 바로 CORS이다. 서버에서 리액트와 연결하기 위해서 주소와 메서드에 대한 설정을 해줘야 하는데, 이는 아래 블로깅을 참고하길 바란다. - AXIOS -.. [React] Node JS를 위한 비동기 통신 AXIOS Node JS를 위한 비동기 통신 라이브러리 AXIOS Axios란? : Promise 기반 HTTP 클라이언트 라이브러리(비동기 통신 라이브러리) : Javascript, Node JS 환경에서 요청 응답 처리에 사용 : 내장 클래스가 존재하지 않아 XML Request 객체를 이용하거나 다른 HTTP Client를 사용 * 백엔드/프론트엔드 통신을 쉽게 하기 위해 Ajax를 더불어 사용하기도 함 https://kcode-recording.tistory.com/334 [JavaScript] JS의 라이브러리 AJAX 비동기식 자바스크립트 라이브러리인 AJAX(Asysnchronous Javascript And XML) JSP Servlet에서는 form을 이용해 action, method를 설정해 서버.. [React] state 업데이트 로직을 따로 분리하는 Redux state 업데이트를 Component와 분리하여 관리하는 Redux 이전 블로깅에서 useReducer에 대해 블로깅을 진행했는데 useReducer는 리액트 자체에서 제공하는 state를 관리하는 것으로 redux와 유사하다 reducer는 애플리케이션에서 상태를 관리하기 위해 Redux의 대안을 제공하는 내장 hooks이며, Redux와 동일한 원칙을 따르고 있지만 비동기 작업 및 복잡한 상태 구조를 처리할 때 제한 사항이 존재한다 따라서 어떤것을 사용할지는 사용자의 몫! 둘의 차이점을 알고 싶다면 아래 블로그를 참고하면 좋을 것 같다 https://www.frontendmag.com/tutorials/usereducer-vs-redux/ useReducer vs Redux: A Detailed C.. [React] useState를 대체할 수 있는 함수 / useReducer useState를 대체하는 useReducer hook을 이용한 데이터 공유 useReducer란? 1) useState, context를 대체할 수 있는 함수 2) React 내부에 있는 것으로 좀 더 복잡한 상태 관리가 필요한 경우 사용 3) 현재 상태, 업데이트를 위한 필요한 정보를 담은 액션 값을 전달받아 새로운 state를 반환하는 함수 위의 설명을 이해하기 위해 useReducer에서 사용하기 위한 구성요소들에 대해 살펴보고자 한다 useReducer 구성요소 import React, { useReducer } from "react"; const [state, dispatch] = useReducer(reducer, initialState); 1. state : 컴포넌트에서 사용할 상태 2. .. [React] context를 사용한 데이터 전달 / useContext 여러 component를 지나더라도 사용 가능한 데이터 전달 context 이전에 자식 컴포넌트에서 부모 컴포넌트의 데이터에 접근 및 변경이 가능하며, 이는 props, state를 이용한 데이터 변경임에 대한 블로깅을 진행했었다. https://kcode-recording.tistory.com/289 [React] 자식 컴포넌트에서 부모 컴포넌트로 데이터 전달 state를 활용한 컴포넌트 사이의 데이터 전달 기존에는 부모 컴포넌트에서 props를 통해 자식 컴포넌트는 데이터를 읽어올 수 있고, 자식 컴포넌트에서 해당 변수를 변경하더라도 부모 컴포넌트에 kcode-recording.tistory.com 간단히 정리해서 이야기를 하자면 Component1에 있는 user(데이터), setUser(데이터 변.. [React] 리액트 라우터 사용하기(React-Router-Dom) 리액트에서의 페이지 이동을 위한 라우터(Router) 기존에는 SPA(Single Page Application) 방식을 이용해서 새로운 페이지를 로드하는 방식이 아닌, 하나의 페이지 안에서 필요한 데이터만 가져오는 형태를 가져오는데 라우트를 활용해 신규 페이지를 불러오지 않은 상황에서 각각의 url에 따라 선택된 데이터를 하나의 페이지에서 렌더링을 해줄 수 있다. 라우팅이란? : 사용자가 요청한 URL에 따라서 해당 URL에 맞는 페이지를 보여주는 것으로 하나의 페이지 내에서 url에 따라 렌더링 진행 리액트 라우터(React Router)란? : 사용자가 입력한 주소를 감지하는 역할 : 여러 환경에서 동작할 수 있도록 동작할 수 있도록 라우터 컴포넌트 제공 : BrowserRouter / HashRo.. [React] 테이블 / TableStrap reactstrap에서 table을 만드는 Table 기존 html의 table과 css 적인 부분을 제외하고는 크게 다르지 않은데, 밖을 감싸고 있는 을 제외하고는 html의 태그를 그대로 가지고 와서 사용한다 [TableStrap.js] import {Table} from 'reactstrap'; function TableStrap(){ return( EXAMPLE # Frist Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter ) } export default TableStrap; - 테이블에 어떠한 설정을 할 때에는 에서 기본적으로 설정하며, 그 외에는 html/css 와 동일하게 처리 s.. [React] 버튼을 눌러 다른 내용 보여주는 TabsStrap 탭 메뉴를 만들 수 있는 TabsStrap [TabsStrap.js] import {useState} from 'react'; import {TabContent, TabPane, Nav, NavItem, NavLink, Card, Button, CardTitle, CardText, Row, Col} from 'reactstrap'; import classnames from 'classnames'; function TabsStrap(){ const [activeTab, setActiveTab] = useState('1'); return( // (1) setActiveTab('1')}>Tab1 setActiveTab('2')}>Tab2 // (2) Tab 1 Contents "국내 통신망 제일 많이 쓰는 구.. 이전 1 2 3 4 다음 목록 더보기
