내가 보려고 쓰는 기록

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..

동적인 UI 만드는 step 1. 컴포넌트에 html css로 미리 디자인 완성 1 2 지도 열기 cs 2. UI의 현재 상태를 state로 저장 (닫혀있을때 false 열릴때 true로 할 것) 1 2 let [map,setMap] = useState(false); cs 1 2 3 { setMap(!map); }}>지도 열기 cs 3. state에 따라 UI가 어떻게 보일지 작성-삼항연산자 조건문으로 1 2 3 { map==true? : null } cs *null 비어있는 html용으로 자주 사용 map state가 true면 컴포넌트 열어주세요~ false면 숨겨주세요~ 💨 state가 스위치, 삼항연산자가 기계 삼항연산자 조건식 ? 조건식 참일 때 실행할 코드 : 조건식 거짓일 때 실행할 코드 1..

모달창으로 상세페이지 만들기 Q. 어떤걸 컴포넌트로 만들면 좋은가 1. 반복적인 html 축약할때 ( 계속 똑같은 UI 필요할 때) 2. 큰 페이지들 3. 자주 변경되는 것들 컴포넌트의 단점: state 가져다쓸 때 문제생김 (A함수에 있던 변수는 B함수에서 맘대로 가져다 쓸 수 없음)