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[..
ps. 터미널에 뜨는 warning은 에러는 아님 그냥 eslint라고...함 /* eslint-disable */ 이거하나 넣어주면 오류 안남 -좋아요 버튼을 만들어보자 원래 이벤트 리스너 사용했어야했는데 간단하게 써보자! {/* { 글제목[0] } {console.log(1)}} >🥰좋아요! 0 */} { 글제목[0] } {따봉변경(따봉+1)} } >🥰좋아요! {따봉} 당연히 카멜 케이스 사용해야하고 규칙은 단순하다 onClick, 클릭하면 뒤에 {} 안에 함수형태로 넣어주면되는것! 애로우 펑션말고 함수를 따로만들어서 함수 이름을 넣어줘도됨 function 함수이름() { } 대신 onClick = { 함수이름} 이런식으로 해줘야함 -최종 버튼 하나누르면 서울을 뉴욕으로 바뀌게 만들어보자 /* esl..
데이터는 1.변수에넣거나 2.state에 넣거나 state에 넣으려면 import먼저 해온다. import {useState} from 'react' import logo from './logo.svg'; import './App.css'; import {useState} from 'react' function App() { //let [a,b] = useState('남자 코트 추천') let [글제목, 글제목변경] = useState('남자 코트 추천') // [a,b] 형태의 array가 남는다. a에는 남자 코트 추천이 들어감 // b에는 그 데이터를 수정하기위한 함수를 생성해줌, 그냥 사용법임 // ES6 destructuring 문법임 var [a,b] = [10,100] 하면 각각 a,b에 들..