react (11) 썸네일형 리스트형 [react] bootstrap 사용 (navbar) 1. react-bootstrap.netlify.app/components/navbar/#navbars React-Bootstrap The most popular front-end framework, rebuilt for React. react-bootstrap.github.io 2. 네비바 복사 React-Bootstrap Home Link Action Another action Something Separated link Search 3. import 해주기 import { Navbar, Nav, NavDropdown, Form, Button, FormControl } from 'react-bootstrap'; 4. navbar 왼쪽에 있는부분을 오른쪽으로 옮기고싶으면 의 className의 mr-a.. [react] bootstrap 설치 사용 1. react-bootstrap.github.io/getting-started/introduction React-Bootstrap The most popular front-end framework, rebuilt for React. react-bootstrap.github.io 2. VSC 터미널에 입력 npm install react-bootstrap bootstrap 또는 yarn add react-bootstrap bootstrap 3. 사이트에 있는 것 복사 더보기 4. index.html 에 붙혀넣기 5. getbootstrap.com/docs/5.0/components/buttons/ 사이트에서 예시를 가져온다 Success 6. App.js 에서 div 사이에 부트스트랩 을 넣는다 impo.. [react] npm start, yarn start npm start 와 yarn 설치 후, yarn start 는 같다. [react] yarn 설치 mac os yarn : npm 대신에 사용 가능하는 소프트웨어 A complete log of this run can be found in 와 같은 에러가 떠서 서치 결과.. 1) package-lock.json삭제 rm -rf node_modules 2) 설치 npm install 하고 yarn 설치 npm install --global yarn 하여도 같은 증상이 일어난다.. 내일 다시 해볼 생각이다.. 일어나면 출근..ㅠㅠ [react] input 태그 (onChange, onInput) react에서는 onChange() 와 onInput() 같다 function App() { return ( { console.log('Hi') } } /> ); } 이렇게 작성하면 input창에 글자를 입력할 때마다 Hi 가 콘솔창에 출력된다. input에 입력한 값을 state로 저장하여 출력하려면 function App() { let [inputVal, inputChangeVal] = useState(''); return ( {inputVal} {inputChangeVal(e.target.value)} } /> ); } 표시된다. [react] 부모에서 자식 Component 값 전달 function App() { var num = 1; return( ); } function Modal(props) { return( {props.num} ); } 화면에 1 표시 props라는 문법으로 state를 전송한 뒤에 { props.state이름 } 이렇게 써야한다. [react] return 안에 html 그리기 위한 함수 function App() { return( ); } function Modal() { return( ); } [react] map 함수 (+자바스크립트) / 반복문에 key값 map() : array 내의 모든 데이터에 똑같은 작업을 시켜 주고 싶을 때 1) 모든 array 에 2를 모두 곱하고 싶을 때 var array = [2, 3, 4]; var newArray = array.map(function(a) { return a * 2; }); //4, 6, 8 2) div안에서 map 사용 function App (){ return ( { Items.map(function(){ return (안녕) }) } ) } => 안녕 안녕 안녕 3) map 사용 function App (){ var Items = [바나나, 배, 사과]; return ( { Items.map(function(val){ return ({val}) }) } ) } => 바나나 배 사과 4) 반복문으로 d.. [react] onClick {click(true)}}> onClick 안에 ()=>{} 써준다 [react] warning 없애기 /* eslint-disable */ js 코드 젤 위에다가 주석포함하여 그대로 복붙하면 없어진다. 주석포함하여 적용 후 사라짐! 이전 1 2 다음
