react Bootstrap

React-Bootstrap 라이브러리 https://react-bootstrap.github.io/ React-Bootstrap을 사용하면 HTML CSS로 직접 디자인하지 않고, 예제코드를 복사/붙여넣기 하여 레이아웃을 쉽게 생성할 수 있다. 설치 1. npm 명령어 각종 라이브러리들은 해당 라이브러리 공식 홈페이지에서 사용방법을 보고 설치하면 된다. https://react-bootstrap.github.io/getting-started/introduction 위 사이트에서 제공하는 방법대로 터미널을 열고, 경로 확인 후 명령어를 입력한다. 명령어는 바뀔 수 있으니 사용할 때마다 사이트에 들어가서 확인하도록 하자. npm install react-bootstrap bootstrap 설치 2. 추가 ..

2022.11.11

build & GitHub Pages로 배포

build는 왜해? 우리가 만든 react 프로젝트를 웹에 배포하려면 build용 파일을 생성 후 그걸 웹에 올려야 한다. 왜냐면, 브라우저는 HTML, CSS, JS 3개의 언어만 해석할 수 있다. 리액트의 이상한 state, JSX 같은 문법은 해석할 수 없다. 그래서 react 프로젝트 build라는걸 하게 되면 브라우저 친화적인 HTML, CSS, JS파일로 바꿔준다. 이것을 컴파일 또는 build라고 한다. GitHub Pages 배포를 위해 GitHub 계정을 만들도록 하자! 배포하기 전 체크사항 1. npm start 로 미리보기 시 콘솔창, 터미널에 에러가 있으면 안된다. 2. 경로문제 사이트를 배포할 때 http://sitename.com/에 에 배포하는 경우엔 따로 설정이 필요하지 않지..

2022.11.11

Component 만드는 또 다른 문법 class

Component 만드는 또 다른 문법 class 현재는 컴포넌트를 만들 때 function을 사용하지만 예전에는 class문법도 사용했다. 그냥 알아두자 1. class 에 component 이름을 작명한다. 2. constructor, super, render 함수 3개를 채워 넣는다. (기본 템플릿 같은 것) 3. render return () 안에 JSX를 작성한다. class Modal extends React.Component { constructor(){ super() } render(){ return ( Class문법이다 ) } } class가 뭔가요? class는 변수, 함수를 보관하는 장소다. extends는 기존 class안에 있던 변수, 함수를 복사해주는 문법이다. React.Com..

2022.11.11

state를 이용하여 input 입력값 가져오기

state와 onChange 함수를 활용해 사용자가 input에 입력 한 값을 바로 가져올 수 있다. react에서는 HTML을 직접 만질 필요가 없다. state를 변경하면 바로 반영되기 때문! function App (){ let [text, setText] = useState(''); return ( { setText(e.target.value) }} /> {text} ) }

2022.11.11

props

props 부모 component의 state를 자식 component에서도 사용하려면 props로 전송해서 써야한다. props 전송은 부모->자식 만 가능하다. props로 부모>자식 state 전송하는 법 1. 부모 component 에서 2. 자식 component function에 props 파라미터 등록 function App(){ let [title, setTitle] = useState(['남자코트 추천', '강남 우동맛집', '리액트 독학']) return ( ) } function Modal(props){ return ( { props.title[0] } ) } 또는 자식 component에서 아래와 같이도 사용 가능하다. function Modal ({title}){ return ( ..

2022.11.11

JSX 안에서 반복문 : map()

map 함수를 이용한 JSX 내 반복문 JSX 내에서는 for문을 사용할 수 없다. map()함수를 이용하여 반복문을 사용할 수 있다. map() 안에 콜백함수에는 파라미터를 2개까지 사용할 수 있는데, 첫번째 파라미터는 해당 array 의 자료, 두번째 파라미터는 해당 array의 index번호다. import './App.css'; import { useState } from 'react'; function App() { let [title, setTitle] = useState(['남자코트 추천', '강남 우동맛집', '리액트 독학']); let [like, setLike] = useState([0,0,0]); return ( Blog { title.map((item, idx)=>{ return( ..

2022.11.11