수끼옹

안녕하세요? 거의 한달만에 싸지르는 글이네요 ㅎㅎ 제가 최근에 공부한 기능들 중 저에게 시련을 줬었던 장바구니 기능에 대해 정리해 보려고 합니다. 어떻게 생각해보면 쉬운 거 같은데.. 많이 생각해 볼수록 절대 풀리지 않더라구요 ㅠㅠ 구글링과 저의 멘토의 도움을 통해 결국은 풀어냈습니다. ● 장바구니 삭제 기능 만들기 항목 삭제하기 버튼을 누르면 항목 리스트가 삭제되는 기능을 만들면 된다. 나는 redux의 reducer로 state 변경함수를 이용하여 만들었다. 1. reducer에 state 변경함수를 생성한다. state 변경함수는 삭제 버튼의 onClick 이벤트로 호출된다. 삭제버튼을 클릭 하면 리스트의 id값을 넘겨줘서, id가 똑같은 리스트는 제외하고 나머지 리스트들을 return 해주는 원리..

오늘은 css를 대신해 styled-componets를 사용해서 스타일을 넣어보겠습니다. styled-components를 사용하면 css 파일에서 스타일을 지정하지 않고도 js 파일 내에서 해결이 가능하다는 점이 장점이죠! 사용법 1. terminal 창에 styled-components를 설치한다. npm install styled-components 2. 라이브러리를 import 한다. import styled from 'styled-components' 3. 원하는 스타일을 작성한다. 예를 들어 버튼에 스타일 컴포넌트로 스타일을 넣는다고 해보자! let YellowBtn = styled.button` background: yellow; color: black; padding: 10px; ` 먼저 ..

안녕하세요? 이번 시간에는 외부 js 파일에 저장한 상품목록 데이터를 import 해서 컴포넌트로 상품목록을 띄워보는 시간을 가져보도록 하겠습니다?? 먼저 실행 결과입니다. 상품 각각마다 사진, 이름, 가격이 인덱스에 맞게 데이터 바인딩 되도록 하는 것이 목표입니다. 1. 부트스트랩으로 세 개의 상품을 띄울 grid 레이아웃 가져와서 구조 생성하기 sm=true sm=true sm=true 2. 외부 js 파일에 데이터 생성하기 // data.js let data = [ { id : 0, title : "White and Black", content : "Born in France", price : 120000 }, { id : 1, title : "Red Knit", content : "Born in ..

# props를 쓰는 이유 한 컴포넌트 안의 state는 원칙적으로 다른 컴포넌트로 공유가 되지 않는다. 이는 props를 통해 state를 공유 할 수 있다. # props 쓰는 방법 1. 가져오고 싶은 state가 있는 부모 컴포넌트에서 쓰인 자식 컴포넌트에 을 써준다. 2. 자식 컴포넌트에서 props 파라미터 등록 후 props.작명으로 불러와 사용한다. props를 쓴 컴포넌트이기 때문에 먼저 파라미터에 props를 써주고, state를 불러오고 싶은 곳에 props.작명 으로 불러와서 쓴다. '글제목'이라는 변수에는 title의 변수들이 담겨 있기 때문에 '남자코트 추천' 이 출력된다.