JAEJAE imojeomo

✏️ Lifecycle ✏️ 컴포넌트의 Lifecycle - 컴포넌트는 mount(생성), update(재렌더링), unmount(삭제) 될 수 있고 - 컴포넌트의 Lifecycle에 hook을 이용한 간섭(특정 코드 실행)이 가능하다. ✏️Lifecycle hook import {useState, useEffect} from 'react'; function Detail(){ useEffect(()=>{ //여기적은 코드는 컴포넌트 로드 & 업데이트 마다 실행됨 -> lifecycle hook console.log('안녕') }); return (생략) } 💁‍♀️ 예시 import {useState, useEffect} from 'react'; function Detail(){ useEffect(()=..

✏️ 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 이렇게 경로를 써도 됨) 그리고 리액트 라..