선택n집중

ProductBuy [/goods/:category/:id/buy] 단품 구매를 위한 페이지를 제작하게 되었다.form 에서 구매하기 버튼을 누르면 이컴포넌트가 실행되는데팀원들의 니즈는 단품에 대한 수량변경이 여기서도 가능했으면 좋겠다. 라는 점이였다.form에서 한거 들고오면되지...laction을 통해 state로 가지고 온값을 일치시켜서 먼저 초기값으로 넣어주는 작업을 하였다.  const location = useLocation(); const { category, id } = useParams(); const { options, btnValue, totalPrice } = location.state || {}; options가 옵션에 대한 내용,btnValue가 선택된 값,tot..

ProductDetails-ProductForm 폼에서 필요한 정보는내가 선택한 상품에 대한정보 (구매 금액이나 옵션을 불러와야하니까.)유저에 대한 정보가 필요하다.(유저가 없으면 구매 진행이 되면 안되니까.)프롭스의 형태로 선택된 상품에 대해 받아오고,세션스토리지에서 로그인 후 올려준 유저 정보를 가져온다. 기본으로 구성된 옵션은 두개였다.처음엔 "포장 옵션도 갯수 만들어주세요" 라는 팀원의 요구에충분히 만들 수 있을 거라 생각했는데생각보다 너무 어려웠다.값을 추후 저장하여 보내주기도 해야하고 다시 세션에 저장도 해야하니 제대로된 형태를 준비해야했다.  // select 옵션에 대한 state const [options, setOptions] = useState({ content..

ProductDetails [/goods/:category/:id]  프로젝트 구현이 어느정도 되기 시작하면서 , 로그인을 맡은 친구가 로그인에 성공하면 해당 유저의 데이터를 객체형식으로 세션스토리지로 보내줬다.그 세션스토리지의 여부로 인하여 로그인상태인지 판별할 수 있었고,또는 세션스토리지 정보를 바탕으로 세션스토리지의 값을 변경하기 위한 첫 연습이였다. url의 category와 id 로 해당 상품을 찾아낼 수 있었다.const { category, id } = useParams(); // 아이템을 찾기위한 url 소스 const selectedProduct = GoodsItems.find((item) => item.category === category && item.id === parseInt(i..

ProductList -ProductResult  상위 ProductList 에서 필터링 된 결과 물이 나열되는 컴포넌트이다. 나는 이전에 기본적으로 grid 를 이용하여 grid-template-cloumns 를 repeat(4,1fr)을 지정해 두었다.가로 4의 고정값을 가지고 있으면서,나는 그럼 8개 (가로 4 * 세로 2) 이상이 넘어가면 페이지 네이션을 구현하고싶었다. 페이지네이션에 대한 유투브 자료들을 보면서 내가 해보고싶은 방법을 정리했다.원리는 다음과 같았다.1.페이지 수를 유동적으로 만들것. 페이지 수 =  총갯수에서 현재 표현할 갯수 의 올림 의 계산이 나온다.올림을 이용하는 메서드가 있었고 .그로인해 이런 공식을 만들 수 있었다.//현재 보여질 페이지 아이템 수.const itemsP..

ProductList [/goods/:category] 처음에는 메뉴를 구성하는 객체를 map 을 통해  메뉴바를 구성해준 뒤 ,  {productMenu.map((items, i) => ( {items.description} ))} useParams를 통해 값을 받아온다. const { category } = useParams();  goodsItem 의 복사본을 형성한 후 ,let filteredItems = GoodsItems.slice();.filter((items) => items.category === category);filter을 통해 item을 정리한후 결과 값이 나오는 하위 컴포넌트로 전달하는 간단하다면 간단한 메뉴바의 구성이였다. 하지만 리스트에서 가장 중요한부..

app.js app.js 는 연결하는 용도로 페이징 처리하는데 사용했다. return ( } /> } /> }> } /> } /> );}; * 의 사용으로 각자의 것만 확장하는 마지막 node 페이지는 굳이 명시하지 않고 *사용내부적으로 Routes 와 Route의 사용으로 마지막 페이징 처리를 하였다.사실 현재 프로젝트 내에서는 저것보다 훨씬 많다... 처음에 메인을 맡아준 친구가 급하게 header에서 각자 작업할 수 있도록 link를 연결해주었다.덕분에 나의 index 페이지가 생기면서 거기서 부터 작업할 수 있었다. 그중의 상품관련을 맡게 된 나는  } /> ..

1. Route 와 a href 의 연결.새로고침 현상 ? O 하위 컴포넌트의 importimport { Routes, Route } from 'react-router-dom'; a링크의 주소 연결라우터 적용 , url 적용 Home Topics Contact Route 의 path 가 a의 href의 위치와 같도록 지정.path는 주소 url에 추가되는 요소를 말한다.  }/> }/> }/>  위의 a 링크와 연결된 것이 확인 가능하다. 마치 tab처럼 구현된것 같다.하지만 페이지 새로고침되듯 ..

라우팅에 대해 알아보자. 라우팅이란경로를 지정하는 과정. 페이지 라우팅이란 요청에 따라 적절한 경로를 반환하여 페이지를 이동하는 과정을 말한다. 업무적인 방식의 차이로 나눈다면 ,SSR 방식 (서버가 만들때) 과 CSR 방식 (클라이언트가 만들때)우리는 리액트를 이용하고 고객의 클릭에 의해 화면 조정이 되기때문에 CSR 방식이다.CSR 은 처음 로드시에 모든 페이지에 관련된 코드들이 들어와야해서 느리지만.추후에 가지고 있는 코드들을 그때그때 호출하기 때문에 화면 전환에 훨씬 빠르다는 장점이 있다. 사용자가 요청하는 url에 해당하는 페이지가 이동하는 것처럼 보이지만,전체적인 컴포넌트가 교체가 되는 것이다.웹 애플리케이션에서 사용ㅈ가 다른 웹페이지로 이동하거나 다른 뷰로 전환하는 것을 관리하는 프로세스를 ..

useRef 의 객체로의 사용을 살펴보자.1. import ! useRef !import { useRef } from 'react'; 2.컴포넌트 내의 useRef객체 생성. const inputEle = useRef({ name: null, phoneNum: null, });객체 내부를 미리 정의 해야할 필요는 없지만.우리의 명시성을 위해 null로 지정해주자. name에는 이름입력에 해당하는 input을phoneNum에는 전화번호 입력에 해당하는 input을 지칭할것이다.그이후 각각의 클릭이벤트를 통해 각 해당하는 input 의 속성을 바꿔보려한다. -컴포넌트 내부 return- return ( ..

익명의 배열을 활용한 useRef ref 속성에 함수나 , 함수 객체를 참조하여 전달할 때 지정한 매개변수는우리가 이벤트 핸들러에서 이벤트 객체를 얻고 target 속성을 이용해 해당 요소의 참조를 얻는 것과동일한 효과가 발생된다.target의 속성을 이용할 필요 없이 지정한 매개변수가 그의 효과를 발생시키기 때문에,매개변수 자체가 해당 요소를 직접 참조하게 된다.예제를 보며 설명해보겠다. const inputEle = useRef(new Array(2));익명의 2개의 공간이 있는 useRef 저장 공간을 inputEle가 참조받아 저장공간의 이름이 생겼다. 첫 마운트 시점에는 이 값이 정해지지 않은 상태로 return 의 엘리먼트 들이 랜더링 된다. return ( ..