개발자연습노트

컴포넌트가 많은 경우 스타일링을 하다보면 불편함이 생기는데1. class 만들어놓은걸 까먹고 중복해서 또 만들거나2. 갑자기 다른 이상한 컴포넌트에 원하지않는 스타일이 적용되거나3. CSS 파일이 너무 길어져서 수정이 어렵거나이런 경우가 있습니다. 그래서 스타일을 바로 입혀서 컴포넌트를 만들어버릴 수도 있는데styled-components 라는 인기 라이브러리를 설치하여 이용하시면 됩니다.     일단 설치부터 해봅시다 터미널 열어서 npm install styled-components해주면 됩니다. import styled from 'styled-components'그리고 사용하고 싶은 컴포넌트 맨위에 이런걸 import 해와야합니다.Detail.js 파일 위에 ▲ 위처럼 입력해서 import 해오십시..

상세페이지에 상품명 넣어봅시다 임시 글자들만 들어있으면 밋밋해서 그렇습니다.그래서 shoes 라는 state에 있던 상품정보들을 Detail 컴포넌트에 꽂아넣어봅시다.근데 안타깝게도 shoes는 App 컴포넌트에 있으니 App -> Detail 이렇게 전송하면 쓸 수 있겠군요.   }/> 그래서 App.js 안에 쓰는 곳에서 일단 props 전송하고   (Detail.js) {props.shoes[0].title} {props.shoes[0].content} {props.shoes[0].price}원 주문하기 Detail 컴포넌트는 props 파라미터 등록해서 shoes를 자유롭게 사용했습니다.props.shoes[0]...

오늘은 navigate() 함수와 간단한 프로젝트에선 쓸데없는데 가끔 쓰는 nested routes라는 기능을 배워봅시다./detail 접속시 html 이쁜거 보여달라는 저번시간 숙제는 어떻게 했냐면 고작 컴포넌트 만드는 것인데 알아서하십쇼  src폴더 안에 routes폴더하나 만들고 그 안에 Detail.js를 만들었습니다.파일 어디다 보관할지는 본인 맘입니다. function Detail(){ return ( 저번강의에서 준 html 코드 )}export default Detail그리고 이런 코드를 채워넣었습니다.이제 다른 파일에서 Detail 컴포넌트를 가져다쓸 수 있겠군요.   import Detail from './routes/Detail.js'function App(){ return..