본문 바로가기

개발/React4

[React] 웹 접속 시 특정 경로 고정 연결 - 로컬 스토리지 웹 페이지에 접속하면 보통 첫 번째 메뉴가 자동으로 선택되어 있는 웹 사이트를 많이 볼 수 있습니다. 이런 식으로 가장 첫 번째 메뉴가 선택(실행)되어 있는 상태로 페이지가 오픈되는 경우가 있습니다. 해당 웹 사이트의 메뉴는 사용자가 직접 뉴스 클리핑 그룹을 추가 및 삭제하여 구성된 메뉴입니다. 그룹별로 id가 있어서 첫 번째 메뉴의 id는 사용자마다 다를 수 있습니다. 이때 메뉴 가장 첫번째가 웹 사이트가 열리면 고정적으로 선택되어 있는 상태가 되도록 코드를 짜보겠습니다. 1. DB에서 사용자의 그룹 키워드를 가져오는 함수에서 가장 첫 번째 id를 따로 추출 2. 첫 번째 그룹 ID를 로컬 스토리지에 저장합니다. 3. 페이지가 다시 로드될 때, 로컬 스토리지에서 저장된 그룹 ID를 가져와 초기 경로를 .. 2024. 1. 15.
[React] 리액트로 만든 웹, 숲으로 바라보기(part1 App.js란?) 앞으로 "리액트로 만든 웹, 숲으로 바라보기"는 구체적으로 개념을 하나하나 따져보는 것이 아닌 React로 제작한 웹 사이트가 대략 어떠한 구성으로 이루어졌는지 보여드리게 위해 작성하였습니다. React로 간단한 커뮤니티 사이트를 제작해보면 기본적인 틀은 다음과 같습니다. 1. Src 폴더 1. App.js 2. Component 폴더 1. Detail.js 2. Edit.js 3. Heading.js 4. List.js 5. Upload.js --------------- 6. Login.js 7. Register.js 3. Server 폴더 1. index.js 4. Style 폴더 1. ListCSS.js 2. PostDetailCSS.js 3. UploadCSS.js 4.UserCSS.js 하나하나.. 2023. 1. 22.
[React] Hooks란? Hook를 이용하여 기존의 Class 바탕의 코드를 작성할 필요 없이 상태값과 여러 React의 기능을 사용할 수 있습니다.'' Hook를 사용하면 컴포넌트로부터 상태 관련 로직을 추상화할 수 있습니다. 이를 이용해 독립적인 테스트와 재사용이 가능합니다. 1. useState useState는 가장 기본적인 Hook이며, 함수 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해줍니다. import React, {useState} from 'react'; const Counter = () => { const [value, setValue] = useState(0); return ( 현재 카운터 값은 {value}입니다. setValue(value + 1)}>+1 setValue(value - 1)}>+1 );.. 2022. 12. 25.
JSON 이란? 데이터를 교환 & 저장을 쉽게 할 수 있도록 텍스트 기반의 데이터 교환 표준입니다. 1) Javascript에서 객체를 만들 때 사용하는 표현식입니다. 2) 사람과 기계 모두 이해하기 쉬우며 용량이 작아서, 최근에는 XML을 대체해서 데이터 전송에 사용합니다. 3) 데이터 포맷일 뿐이며 어떠한 통신 방법도, 프로그래밍 문법도 아닌 단순히 데이터를 표시하는 표현 방법입니다. JSON 특징 1) 서버와 클라이언트 간의 교류에서 일반적으로 많이 사용됩니다. 2) javascript 를 이용하여 JSON 형식의 문서를 쉽게 javascript 객체로 변환할 수 있는 이점이 있습니다. 3) JSON 문서 형식은 javascript 객체의 형식을 기반으로 만들어졌습니다. 4) JSON은 텍스트 기반이기 때문에 다른.. 2022. 12. 21.

티스토리툴바