파일이 점점많아진다, 언제까지 App.js하나에서만 코드를 관리할 수는 없다. 데이터를 외부에서 불러올 수도있고 많은 변수를 선언할 수도있고 수많은 함수가 생길 수 도 있음 여튼 import,export를 활용해서 가독성과 코드쪼개기를 할 수 있다. 1.변수하나 import,export해오기 var name = 'Kimjiwon' export default name 이와같이 내보내구 import name from './data.js' 이와같이 불러온다. `import 작명 from 경로`의 형태 2.변수두개이상 import,export해오기 var name = 'Kimjiwon' var name2 = 'jiwonman' export {name,name2} 이렇게 내보내구 import {name,name2..

-일단 추가 tip src에 넣은 파일은 파일면변경 + 압축됨 public에 넣은 파일은 보존됨 public에 있는 파일은 절대경로/파일명.jpg라고 다써야함 src에넣어서 바로사용하면 편하긴함 `./background.jpg` 이런식으로 https://react-bootstrap.netlify.app/getting-started/introduction 그리고 설치해서도 쓸 수 있지만 CDN불러와서 사용 할 수 도 있다. public/index.html 에다가! import logo from './logo.svg'; import './App.css'; import { Button,Navbar,Container,Nav,NavDropdown,Carousel } from 'react-bootstrap'; 이와..

npx create-react-app shop 명령어처서 새로운 프로젝트 만들어준다. 참고)yarn이라는걸 쓰면 정말좋다. https://classic.yarnpkg.com/lang/en/docs/install/#windows-stable Yarn Fast, reliable, and secure dependency management. classic.yarnpkg.com 터미널을 열어서 설치해 주도록하자 yarn을 설치하고나면 add같은걸 사용해서 npm대신 설치 할 수 도 있다. 여튼 부트스트랩을 사용하러가보자 react를 사용하면 react부트스트랩을 사용하면된다. 같은거긴함 https://react-bootstrap.github.io/ 이와같이 설치완료한다. 프로젝트내에서 vs코드를열어 설치해줘도 ..

리액트에서 input창을 만들고싶다, 그리고 입력하고싶다 간단하게 해보자. 이와같이만 해줘도 인풋창이 생긴다! 지금은 인풋창에다가 글자를 입력해서 맨위에 추가하는 기능을 만들고싶다. 두가지를 해야한다 input창에서 onChange이벤트를주고 button에서 onClick이벤트를 줘야한다. let [글발행,글발행변경] = useState(''); 이와같은형태로 let[a,b] =useState()를 사용해준다. 문자열 형태로 state를 사용해줘서 input 창에서 입력 event가 발생할때마다 a에 저장이된다. 그리고 최종적으로 버튼을 클릭하면 맨위에 변경함수를 다시 사용해 deepcopy를 이용해 배열을 복사후 unshift로 추가해서 새로 추가해주는 형식을 사용한다. {글발행} {글발행변경(e.ta..

- 변경 자주하는 내역들 props로 전달하기 컴포넌트안에 props두개 전달 당연히 가능 { modal === true ? // 작명 = {전송할state} 보통 똑같이 쓴다. : null } - map함수 사용하면 첫번째 매개변수말고 index도 가지고 있다. { 글제목.map(function(글, i){ return( {/* 반복문이 돌때 안에 0,1,2가 반복되게 적기 map의 두번째 파라미터*/} { 누른제목변경(i)}} > {글} {따봉바꾸기(i)}}>🥰좋아요! {따봉[i]} {/* 따봉 함수로만들어서 파라매터 여기있는 i 전달해줘서 바꾸면 되겟다 체크 딥카피로 ㅇㅇ 해보쟈 */} 1월 10일 발행 ) }) } - props한 외부 컴포넌트 문법에서 사용하기 function Modal(prop..

props로 자식에게 state전해주기 1. -> 보통 똑같이한다. 2.자식컴포넌트에서 props 파라미터 입력 후 사용 주요코드 function App() { ... let [글제목, 글제목변경] = useState(['서울','대구','대전','광주']) ... { modal === true ? // 작명 = {전송할state} 보통 똑같이 쓴다. : null } ... } function Modal(props){ //부모에서 전달받은 props는 여기 다 들어있다. return( 제목 {props.글제목[0]} 날짜 상세내용 ) } 전체코드 /* eslint-disable */ import logo from './logo.svg'; import './App.css'; import {useState}..

반복문 쓰는 법 for랑 map2가지가있다. 1.for function으로 만들어주고 아래에서 { 함수명() } 으로 불러와준다. // for반복문을 쓰고싶다면? // 함수안에서 사용하고 어레이에 HTML추가 // array를 마지막에 return으로 뱉어냄 function 반복된UI(){ var 어레이 = []; for (var i=0;i🥰좋아요! {따봉} 2월 17일 발행 ) // return }) } 결론적으로 좀 기괴한 모양이 나왔는데, 좋아요 역시도 같은 갯수만큼 useState로 만들어줘서 별도로 작동하게 만들어줘야한다. 해당부분 추후 구현해보도록하자. let [글제목, 글제목변경] = useState(['서울','대구','대전','광주']) let [따봉,따봉변경] = useState(0) ..

div로 가득한걸 쉽게 볼 수있게 만들어 주는녀석이라고 알아보자 나만의 단어로 '치환'해서 만들 수 있음 -Component 만드는법 1.함수 만들고 이름짓고 2.축양을 원하는곳에html넣고 3.원하는곳에 4.이름은 대괄호 /* eslint-disable */ import logo from './logo.svg'; import './App.css'; import {useState} from 'react' function App() { let [글제목, 글제목변경] = useState(['서울','대구','대전','광주']) let [따봉,따봉변경] = useState(0) let posts = "군자 훠궈 맛집" function 제목바꾸기(){ var newArray = [...글제목] newArray[..