Header를 적용할 컴포넌트들에 로 감싸기 return ( ); Layout.js Layout.js 에서 Outlet 기능을 이용. Outlet 위에 Header를 배치. 만약, Footer가 필요하다면 Footer를 만들고 Outlet 밑에 배치하면 된다. import { Outlet } from 'react-router-dom'; import Header from './Header.js' const Layout = () => { return ( ); }; export default Layout; Header.js import React from 'react'; import { useNavigate } from 'react-router-dom'; function Header() { const navi..
FE/React
react에서 로그인 여부 확인하는 간단한 예제를 만들어 봤다. (react v6 이상) App.js import React from 'react'; import './App.css'; import { BrowserRouter} from 'react-router-dom' import RouterList from './RouterList.js'; function App() { return ( ); } export default App; RouterList.js sessionStorage에서 인증 여부 변수를 가져와서 인증이 안 된 경우에, /login 링크로 redirect 한다.
안녕하세요. 이번 포스팅에서는 React의 Ajax 기술인 axios를 이용하여 API와 통신하는 방법을 알아보겠습니다. 1. axios 간단 설명 method : axios 통신 방식 설정 POST : 데이터를 보낼 때 주로 사용 GET : 데이터를 받아올 때 주로 사용 이 외에 PUT / DELETE 존재(이번 포스팅에서는 다루지 않습니다) url : 통신할 URL 설정 data : axios 통신 시, 함께 보낼 데이터 기입 params : axios 통신 시, url 뒤의 파라미터 설정 headers : 데이터 형식 정의 .then((res)=>{ ... } : 성공 시 작동하는 코드 .catch(error)=>{ ... } : 실패 시 작동하는 코드 // method : POST(데이터를 보낼 ..
- 주석 처리 방법 {/* 주석 내용 */} - 데이터 바인딩 { } 로 감싸서 변수 넣기 var data = '안녕'; {data} - JSX에서 class 선언 class가 아닌 className으로 선언 class = "blue-div" (X) className = "blue-div" (O) - Inline Style 주는 방법 ex) style = { {fontSize : "10px", align:"center"} } - State 사용 방법 변수가 변경될 때 자동으로 HTML을 재렌더링하기 위함. useState() : state를 하나 만들어주는 함수 import React, { useState } from 'react'; let [state_title, state_title_change] =..
이번 포스팅에서는 vscode를 이용하여 리액트 프로젝트 설정하는 방법을 알아볼 것이다. 참고로 React를 설치하기위해 npx를 사용해야 하며, npx는 node.js 설치 시에 같이 딸려오는 기능이다. (별 거 없으니 따라오기만 하면 된다.) 설치 방법은 아래를 참고하자. 1. node.js 설치 https://nodejs.org/ko/ (node.js) 공식 홈페이지에 가서 node.js를 설치한다. 필자는 2021년 12월 12일 기준으로 16.13.1 버전을 설치하였다. 참고로 17버전은 npm start 시, 이슈가 있는 듯하다. (https://ajdahrdl.tistory.com/84) 2. visual studio code 설치 https://code.visualstudio.com/ (v..
