내가 보려고 쓰는 기록

useState( )에 담을 데이터가 너무 길고 복잡할 때 다른 파일에 보관했다가 import 해올 수 있음 다른파일에 있던 자료 가져오려면 import / export 문법 써야함 1) data.js 파일 만들어서 데이터 담아두고 export (내보내기) export default 변수명 2) app.js에서 import(가져오기) import 작명 from '파일경로' 3) import 해온 데이터 state에 담기 * data.js에 저장한 변수가 두개일때 변수 이름들을 중괄호에 넣어서 export import 할때도 중괄호 * 저장한 자료가 array 일때 → 인덱싱 * object 일때 → 점찍고 키값 * array 안에 object 일때 맨처음 시작 기호가 대괄호 이므로 array에서 데이터 ..

https://react-bootstrap.github.io/ React-Bootstrap The most popular front-end framework, rebuilt for React. react-bootstrap.github.io 1. 터미널에 리액트 부트스트랩 설치 2. index.html 태그 안에 코드 입력 3. App.js 에 import 💡import 꼭 해야 뜸!!! 4. 부트스트랩 홈페이지에서 코드 복붙

버튼 누르면 유저가 입력한 글을 글목록에 추가 "버튼 누르면 유저가 입력한 글 가져와서 글제목 state에 넣어주세요" 왜냐면 글제목.map() 함수 때문에 글제목 state(array)의 갯수에 맞게 html이 알아서 생성되고 있음 1 2 3 4 5 6 7 8 9 10 11 12 13 14 function App (){ let [글제목, 글제목변경] = useState(['남자코트추천', '강남우동맛집', '파이썬독학']); let [입력값, 입력값변경] = useState(''); return ( { 입력값변경(e.target.value) } } /> { let copy = [...글제목]; copy.unshift(입력값); 글제목변경(copy); }}>글발행 ) } Colored by Color S..

에 입력한 데이터 가져오는 법 1 {console.log(e.target.value)}}/> cs 파라미터 'e' 추가해주고 e.target.value라고 적으면 현재 에 입력된 값을 가져올 수 있음 ◽ e : 이벤트 객체, 지금 발생하는 이벤트에 관련한 여러가지 기능 담겨있음, e뒤에 점찍고 기능들 붙일수있음 ◽ e.target : 이벤트가 발생한 html 태그 == input 태그 ◽ e.target.value : html 태그에 입력한 값 ◽ e.stopPropagation() : 상위html로 퍼지는 이벤트버블링 막고싶을 때, 보통 자식 태그에 씀 사용자가 에 입력한 데이터 state에 저장하기 사용자가 input에 입력한 데이터는 state 아니면 변수에 저장해서 쓰는 것이 일반적 state에 ..

✨ 글 발행기능 : 사용자가 적은 글이 블로그에 올라감 태그 input의 타입은 여러가지 있음 1 2 3 4 5 6 cs 는 이벤트핸들러로 특정 코드 실행 가능 (이벤트핸들러 종류 매우 많으므로 필요시 검색하기) ⚪ onChange / onInput input 값이 바뀔때 실행 ⚪onMouseOver input에 마우스 갖다 댔을 때 ⚪onScroll input의 스크롤바를 조작할 때

App 컴포넌트(부모) 안에 Modal 컴포넌트(자식) 있는 것 * state 만드는곳은 컴포넌트들중 최상위 컴포넌트에 만들어야 됨 (보통 App.js) 부모→자식 state 전송시 props 문법 props 전송은 자식→부모는 불가능 props 전송은 옆집 컴포넌트도 불가능 부모가 자식에게 주는 것만 가능!!! 1. 부모 컴포넌트에 자식컴포넌트 태그 안에 작명={state이름} *작명은 보통 state이름 이랑 똑같이 함 2. 자식 컴포넌트에 props 파라미터 등록 후 props.작명 const 자식컴포넌트 =(props)=>{ return {props.작명} }

★ map( )의 3가지 기능 ★ 1. array의 요소 개수만큼 코드 실행 2. array의 요소 꺼내기 3. array의 요소 갯수만큼 자료 담기 1. array 요소 갯수 만큼 코드 실행 [1,2,3].map(function(){ console.log(1); }) 배열의 요소가 3개 이므로console.log(1)이 3번 실행 2. 함수안에 파라미터 넣어서 array의 요소 꺼내기 [1,2,3].map(function(a){ console.log(a); }) //화살표 함수 [1,2,3].map(a => console.log(a)) array의 요소인 1,2,3 이 출력 3. array에 요소 개수만큼 자료 담기 return 뒤에 작성한 코드는 array 안의 요소 개수만큼 반복 실행됨 [1,2,3..

1. git clone 깃허브에서 가져올 폴더의 url 복붙 (폴더안에 폴더 또 생기므로 확인 후 npm install 해야함) 2. npm install 3. npm start