JAEJAE imojeomo

✏️ styled-components ✏️ 설치 - 터미널 열어서 npm install styled-components - 그리고 사용하고 싶은 컴포넌트 맨위에 아래처럼 import import styled from 'styled-components' ✏️ styled-components 기본적인 사용법 - 이 라이브러리를 이용하면 컴포넌트를 만들 때 스타일을 미리 주입해서 만들 수 있다. // padding : 20px인 div박스 import styled from 'styled-components'; let Box = styled.div` padding : 20px; color : grey `; let YellowBtn = styled.button` background : yellow; color :..

// data.js 파일 let data = [ { id : 0, title : "White and Black", content : "Born in France", price : 120000 }, { id : 1, title : "Red Knit", content : "Born in Seoul", price : 110000 }, { id : 2, title : "Grey Yordan", content : "Born in the States", price : 130000 } ] ; export default data // App.js 파일 import data from './data.js'; function App(){ let [shoes] = useState(data); return ( (생략) { sh..

✏️ 시작 전에 새로운 리액트 프로젝트 생성! 아래 참고. 2023.10.11 - [React/[완강] [코딩애플] React 리액트 기초부터 쇼핑몰 프로젝트까지!] - [ 코딩애플 ] React 리액트 기초 Part1 [ 코딩애플 ] React 리액트 기초 Part1 ✏️ 개발환경 설치 및 세팅 1. 구글에 Nodejs를 검색해서 LTS라고 써있는 버전을 설치 2. Visual Studoi Code 에디터 설치 ✏️ 리액트 프로젝트 생성 1. 작업용 폴더 만들기(찾기 쉽게 바탕화면에 만들기 jaejae-sosp.tistory.com ✏️ React-Bootstrap 라이브러리 설치 및 사용 - react bootstrap 사용하면 버튼, 메뉴에 적용되는 html, css 직접 디자인하지 않아도 된다....

✏️ 만든 React 사이트 build & Github Pages로 배포 0. 배포하기 전 체크할 사항 (1) 일단 미리보기 띄워볼 때 콘솔창, 터미널에 에러가 나면 안된다 (2) 혹시 사이트를 배포할 때 http://codingapple.com/ 여기에 배포하는 경우엔 따로 설정이 필요없이 대충 해도 되지만 http://codingapple.com/blog/ 이런 하위 경로로 배포하고 싶으면 프로젝트에 설정이 따로 필요하다. 프로젝트 파일 중 package.json 이라는 파일을 오픈해 "homepage": "http://codingapple.com/blog", homepage라는 항목을 추가한 후, 배포할 사이트 경로를 뒤에 추가하면 된다. (혹은 /blog 이렇게 경로를 써도 됨) 그리고 리액트 라..

✏️ Props - 부모 컴포넌트의 state를 props 문법을 이용해 자식 컴포넌트로 전송하면 자식도 사용 가능. ✏️ props로 부모 → 자식 state 전송하는 법 1. 자식 컴포넌트 사용하는 곳에 가서 2. 자식 컴포넌트 만드는 function으로 가서 props라는 파라미터 등록 후 props. 작명 이용 💁‍♀️ 예시 function App (){ let [글제목, 글제목변경] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']); return ( ) } // props 등록 function Modal(props){ return ( { props.글제목[0] } 날짜 상세내용 ) } ✏️ props는 함수 파라미터 문법과 똑같다! function Modal(prop..