Frontend/ReactJS21 [React] ReactPortal 이용하여 modal 창 생성 Introduction ReactDOM 에서 제공하는 createPortal 메소드를 사용하여 모달창을 생성하는 법을 알아보려 한다. Portals란? Portal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 방법이다. 즉, cildren 이 부모 컴포넌트의 DOM 계층 구조에 종속되지 않도록 컴포넌트를 렌더링 할 수 있다는 것이다. 이런 특성을 이용하여 독립적인 모달창을 생성할 수 있다. 기본 형태 ReactDOM.createPortal(child, container) 1. 첫 번째 인자 렌더링하려는 children 2. 두 번째 인자 이동시키려는 DOM 구현 방법 ① 모달 창이 구현될 부분에 태그를 작성한다. ② Portal을 생성해주고, 그 안에 해당 컴포넌트를 .. 2023. 2. 19. [React] useNavigate로 데이터 전달 Introduction 아이디 찾기를 구현하던 중, 찾은 아이디를 가지고 로그인 창으로 돌아가는 것을 구현해보고 싶었다. 그래서 이 포스트에서는 useNavigate를 사용할 때, 이동할 페이지로 데이터를 전달할 방법에 대해 알아보려 한다. ① useNavigate, useLocation를 사용하기 위해 react-router-dom을 설치 npm install react-router-dom //react-router-dom 에서 useNavigate 를 import import { useNavigate } from 'react-router-dom'; //useNavigate 사용 const navigate = useNavigate(); ② navigate에 객체 형태로 데이터 전달 // id를 찾은 후.. 2023. 2. 16. [React] 로그인 JWT 토큰 처리 Introduction JWT 에 대해서 알아보고, JWT 토큰 발급 후 토큰 처리 방법에 대해 알아보려 한다. JWT란? JWT는 JSON Web Token의 약자로, 인증에 필요한 정보들을 암호화시킨 JSON 토큰을 의미한다. 서버에서 JWT 토큰의 유효 기간을 설정하고, 클라이언트에서 서버에 데이터 요청할 시 JWT를 HTTP 헤더에 포함하여 서버가 유효 여부를 확인 할 수 있도록 한다. ① 서버에 데이터를 보낸 후 JWT를 response로 받는다. ② JWT 값인 response.data를 로컬 스토리지와 응답 헤더에 넣는다. async function postInfo(e) { try { e.preventDefault(); const response = await axios .post("http.. 2023. 2. 15. [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. 이전 1 2 3 4 다음
