styled-components npm install styled-components -임포트 import styled from 'styled-components' -생성 let YellowBtn = styled.button` background : yellow; color : black; padding : 10px; ` -사용 노란색버튼 let 컴포넌트명 = styled.태그` 스타일 지정 ` 백틱 안에 스타일을 주고 해당 컴포넌트를 로 사용해주면 됩니다! (해당 파일 안에서만 사용할 수 있음) props로 styled-components 재활용
PUBLIC_URL 사이트 배포할 때 /이미지.png 상대경로로 넣으면 이미지 액박이 뜰 수 있음 이미지를 public폴더에 넣고 이런식으로 경로를 넣어주면 사진이 잘 뜸! 또는 절대경로를 넣어주면 됩니다 경로에 변수를 추가
class 문법으로 컴포넌트 생성 class 컴포넌트명 extends React.Component { constructor(){ super() } rendor(){ return ( ) } } 사용은 class 컴포넌트에서 state 만들기 class 컴포넌트명 extends React.Component { constructor(){ super(); this.state = { name : 'park', age : 25 } } rendor(){ return ( {this.state.name} {this.state.age} ) } } constructor(){ }에 state를 생성하고 사용은 {this.state.이름} state 변경 class 클래스명 extends React.Component { con..
리액트 SpringBoot 연동 1. 스프링, 리액트 프로젝트 생성 spring.io에서 스프링 프로젝트를 만들어서 열어줍니다. 터미널에서 main에 리액트 프로젝트를 생성하는 명령어 입력 cd src/main src/main에서 npx create-react-app 프로젝트명 2. bulid.gradle에 아래 코드 추가 def frontendDir = "$projectDir/src/main/프로젝트명" sourceSets { main { resources { srcDirs = ["$projectDir/src/main/resources"] } } } processResources { dependsOn "copyReactBuildFiles" } task installReact(type: Exec) { w..
