Age of Discovery

로컬 스토리지를 이용한 최근 본 상품 기능 구현 2탄을 시작하겠다. 전 편에서 선수들의 상세페이지에 접속했을 때 로컬스토리지에 선수들의 이름을 저장하는 것 까지 완료했다. 이젠 메인메뉴로 돌아왔을 때 우측에 최근 본 상품 박스를 띄워보자. import { useEffect, useState } from "react"; 역시나 useEffect와 useState는 필수로 import해주고 function App() { let get_local = JSON.parse(localStorage.getItem("data")); 여기서도 get_local이라는 변수에 기존에 로컬에 저장되어있던 'data'의 키를 가진 값 (즉 선수들의 이름)을 할당해준다. useEffect(() => { get_local === ..

리액트 막 배우기 시작했을 때 투두리스트를 만들어보려고 했었다. 언제나 그랬듯 LocalStorage를 이용하려 했고 결과는 실패였다. useEffect에 대한 개념이 안잡혀있었기 때문 자 물약챙기고 마나채워서 다시 시작해보자! 메인화면 우측에 우측에 간단한 div 박스를 만들어 최근 본 상품 기능을 fix시키겠다. 선수들의 사진을클릭해 상세페이지인 Detail 컴포넌트로 넘어간 후 다시 메인화면으로 돌아왔을 때 최근 본 상품의 이름이 나오게 끔 해보자 우선은 선수들의 상세페이지를 눌렀을 때 선수들의 이름을 LocalStorage에 저장하자 import { useEffect, useState } from "react"; import { useParams } from "react-router-dom"; c..

쇼핑몰 프로젝트 이전 글에서 못 다룬 쇼핑카트 수량 줄이기와 리스트 삭제를 마저 다뤄보자. let players = createSlice({ name: "players", initialState: [], reducers: { addCount(state, action) { let nums = state.findIndex( a => a.id === action.payload); state[nums].count++; }, minusCount(state, action) { let nums = state.findIndex( a => a.id === action.payload); if (state[nums].count > 1) state[nums].count--; }, deleteCount(state, action..

다음은 장바구니에 담겨 있는 선수들의 수량을 추가하거나 감소시키고 삭제하는 기능까지 구현해보자. ( 이번 포스팅은 꽤 길다 ) let players = createSlice({ name: "players", initialState: [ { id: 0, name: "Mohamed Salah", count: 1, }, { id: 1, name: "Sadio Mane", count: 1, }, ], }); 예시로 넣어놨던 Salah와 Mane는 빼주고 시작하자 let players = createSlice({ name : 'players', initialState : [ ], reducers : { } }) reducers: { } 가 생겼는데 이건 기존에 저장되어있는 initialState를 조작하는 함수를..

Redux를 이용한 장바구니 2탄 시작한다. Redux를 사용할 환경세팅이 마무리 됐으면 store.js에서 state를 만들어보자 기본 모양은 이런식이다 변수를 선언해주고 let players = createSlice({ name : 'players', initialState : 0, }) players 변수에 createSlice()를 할당해준다 createSlice안에는 이름인 name: '문자열'과 초기 state인 initialstate를 객체로 할당해줘야한다. let players = createSlice({ name : 'players', initialState : [ { id : 0, name : 'Mohamed Salah', count : 1 }, { id : 1, name : 'Sadi..

산을 오르는 이유가 무엇입니까? 산이 거기 있기에... Redux를 배운 이유가 무엇입니까? 그게 거기 있기에.. 축구선수 쇼핑몰인만큼 장바구니는 당연히 있어야겠지... 리액트의 꽃이라고 할 수 있는 redux 지금 시작~~합니다 사실 배웠다고 제대로 사용할 수 있다고 말할 수 없지만 코딩애플 센세께선 항상 배운걸 어디에 적용할지 고민하라그랬다. 어떻게 사용하는지를 배우는거지 왜 사용하는지는 직접 생각해야한다. 그동안 state를 사용할 때 자식 컴포넌트에서 물려와서 props를 이용했었다. 하지만 리덕스를 설치한 후 여러가지 세팅을 해주면 props를 일일이 가져올 필요가 없어진다. 그래서 프로젝트 크기가 어느정도 되면 redux를 사용하는게 훨씬 편하다고한다. 하지만 나는 아직 중간급 규모의 프로젝트..

서버에서 받아온 데이터를 이용해 상품리스트가 추가로 작성되는 더보기 버튼 기능을 구현해보자 const List = (props) => { return ( {props.player.name} {props.player.age} {props.player.position} ) } 기존에는 이미지를 상대경로로 지정해서 public 폴더안에 있는 png 파일을 가져왔으나 서버에서 데이터를 편하게 받아오기 위해서 직접 이미지와 객체배열로 구성된 JSON 파일을 배포하여 절대경로로 이미지를 받아왔다. .JSON파일을 이용하는 것과 웹을 배포하는 건 처음이었지만 생각보다 간단해서 놀랐다... 더보기 버튼의 소스코드는 다음과 같다. { axios.get('JSON 파일 경로') .then((result) => { let ..

다음은 useEffect에 있는 clean up 기능을 알아보자 useEffect(()=>{ console.log('through the wind') return ()=>{ console.log('walk on') } }) useEffect 함수 내에 return 함수를 생성한 후 코드를 작성하면 외부요인에 의해 컴포넌트가 생성되거나 재렌더링 될 때 'through the wind'라는 문구가 출력이 되기전에 'walk on'이라는 문구가 출력 된다. walk on through the wind 가 차례로 console에 출력이 되는것이다. 이 clean up기능은 useEffect 바로 밑의 함수가 실행되기전에 기존에 있던 실행코드를 정리하는 용도로 쓰인다. 예를들어 useEffect(()=>{ let..

지난 게시글에서 포스팅했던 내용을 직접 실행해보자 function App() { let [sort_fun, setSort] = useState('가나다순'); useEffect(() => { { sort_fun == '가나다순' ? console.log('가나다') : console.log('원래대로') } }) { // 리스트를 '가나다'순과 '원래대로'순으로 기능하는 토글버튼 }}>{sort_fun} } 필요하지 않은부분은 생략했다 버튼을 눌렀을때 state가 '가나다'순으로 변경됐을 땐 '가나다'가 콘솔에 찍히고 '원래대로'일 땐 '원래대로'가 콘솔에 찍히게 useEffect를 작성했다. 우측 콘솔창에 정상적으로 출력된다. 맨 처음 가나다가 찍혀있는 이유는 useEffect 안에작성한 코드가 컴포넌..

컴포넌트는 라이프사이클이 존재한다. 거창한건 아니다 크게 3가지로 나눌 수 있는데 1. 생성된다. (mount) 2. 업데이트된다. (update) 3. 삭제된다. (unmount) 각각의 이벤트가 실행될 때 구현하고 싶은 코드를 작성하는 것을 useEffect라고 한다. 바로 컴포넌트를 살펴보자 import {useState, useEffect} from 'react'; function DetailPage(){ useEffect(()=>{ console.log('Hello World') }); return (생략) } 여기선 DetailPage 라는 컴포넌트가 페이지에서 처음 렌더링이 되거나 혹은 State 조작에 의해서 컴포넌트 내용이 변경될 때 useEffect 함수 안의 코드가 실행된다. 위 컴포..

다음과 같이 선수들의 사진을 클릭했을 때 Route를 이용해 각 선수들의 상세페이지로 이동하게 하고 싶다. 확장성을 위해 URL뒤에 /:id를 입력하면 /detail/'아무거나' 어떻게 입력하든 그 페이지를 보여준다. 정확히는 오류를 띄우지 않는다. detail.js파일을 생성 후 DetailPage 컴포넌트를 만들어보자 import { useParams } from "react-router-dom"; const DetailPage = (props) => { let {id} = useParams(); return( {props.player[id].name} {props.player[id].age} {props.player[id].position} 주문하기 ) } export default DetailPa..

축구선수 사진을 클릭했을 때 해당 축구선수의 상세내용을 보여주는 페이지를 띄워주고 싶다. 배운 내용을 바탕으로 구현해보자. 기존 자바스크립트에선 URL을 입력하면 그 주소에 해당하는 HTML파일을 띄워주기만 하면 됐다. 하지만 리액트는 index.html 파일 단 한개만을 쓰기 때문에 app.js파일 내에서 route를 사용한다. 자세히 살펴보자 route를 사용하기 위해서는 npm install react-router-dom@6 터미널에서 npm install react-route-dom@6 를 입력후 설 치해준다. 다음 index.js 파일 상단에 import { BrowserRouter } from 'react-router-dom'; 이 코드를 import해주고 const root = ReactDO..

{ let player1 = [...player] player1.sort((a, b) => a.name.toLowerCase() '가나다순' 이런식으로 가나다순 정렬기능을 담은 버튼을 생성했다. 하지만 일회성이었고 다시 원래대로 되돌리는 버튼을 만들고 싶었다 한마디로 토글버튼을 원했다 구글링을 동반해 이런저런 시도를 해봤지만 애당초 State변경함수는 데이터의 배열자체를 바꿔주기 때문에 그 전으로 되돌리는 기능은 찾기 어려웠다.. 꽤 오랜시간 고민끝에 삼항연산자를 이용해 각 data의 고유 id를 정렬하는방식이 낫겠다 싶었다. { let player_1 = [...player]; let player_2 ..

축구선수를 쇼핑하는 페이지 구성을 완료했다. 가장 먼저 가나다순으로 정렬하는 버튼을 만들어보자 let [player, setplayer] = useState(data); { let player1 = [...player] player1.sort((a, b) => a.name.toLowerCase() '가나다순' 버튼을 생성한 후 onClick함수를 붙여주고 player 데이터의 스프레드연산자를 player1 변수로 저장해준다 (원본을 해치지 않고 재활용하기 위함) 그리고 player1을 sort 내장함수로 정렬해준다 정렬 기준은 data의 선수들 name이다. data가 가나다순으로 정렬됐다 근데 맘에 안..

축구선수를 장바구니에 담는 쇼핑몰을 만들어보자 우선 서버와 DB는 다룰줄 모르기 때문에 (node.js 후딱 배워야겠네) 데이터는 객체로 구성된 배열을 자바스크립트 파일에 저장 해두었다 이 데이터를 자유자재로 다룰 수 있어야 다음에 서버와 연동했을 때도 수월하게 작업할 수 있을 것이다 그동안 수강했던 코딩애플 센세의 강의를 토대로 내가 재밌게 즐길만한 쇼핑몰을 만들어보자 let data = [ { id : 0, name : 'Mohamed Salah', age : '1992년 6월 15일', position : 'Right-wing' }, { id : 1, name : 'Sadio Mane', age : '1992년 4월 10일', position : 'False-nine' }, { id : 2, nam..