⚛️ React/개념

React : 프로젝트생성/bootstrap 연결/이미지경로 연결/public폴더

프로젝트 생성하기 원하는 폴더 shift+우클릭해서 powerShell 터미널 연 후에 아래 프로젝트 생성 명령어를 입력한다. npx create-react-app 폴더명 bootstrap 연결하기 npm install react-bootstrap bootstrap bootstrap css 연결하기 사이트 css 파일을 stylesheet link로 연결하거나 App.js에 import 'bootstrap/dist/css/bootstrap.min.css';한다. import {Button, Navbar, Container, Nav} from 'react-bootstrap' 원하는 컴포넌트들을 상단에 import 해줘야 한다. 이미지경로 연결하기 css파일로 연결 css파일에서 src폴더 안에 있는 사진을..

React : 옛날 class문법

class 문법으로 컴포넌트 만드는 법 class Modal2 extends React.Component { constructor(){ super() } render(){ return ( 컨텐츠.. ) } } class 컴포넌트명 extends React.Component를 만든 후 그 안에 constructor, super, render 세 가지 함수를 넣는다. return 안에 축약할 html을 적는다 class 컴포넌트에서 state 만드는 법 class Modal2 extends React.Component { constructor(){ super(); this.state = { name : 'noran', age : 20 } } render(){ return ( 내 이름은 {this.state...

React : props (state,변수,함수,텍스트 등 전송)

변수는 function scope를 가지므로 React에서도 다른 function 내에 있는 변수를 가져다 쓸 수 없다. function App (){ let [btn, setBtn] = useState(['바로가기', '더보기', '다운로드']); return ( ) } function Button(){ return ( { btn }

React : map 사용해서 div 반복생성하기

map의 기능 var 어레이 = [2,3,4]; var newArray = 어레이.map(function(a){ return a * 10 }); console.log(newArray) map은 array의 자료개수만큼 코드를 반복실행한다. 파라미터를 각 자료로 가진다. return 우측의 코드를 array에 담고 map 쓴 자리에 남겨준다. map 사용해서 div 반복생성하기 array자료인 state도 array.map으로 활용할 수 있다. (array 개수만큼 반복생성된다) function App (){ let [title, sortTitle] = useState(['쌍검사길드에서 닌자시작퀘 받기', '파판14 초보자 가이드 이벤트 진행안내', '귀여운 구부 꼬마친구를 받아보자']); return (..

React : 동적인 UI 만들기 (현재 상태, 조건문 삼항연산자)

현재 상태 작성하기 // 전부 가능 let [Modal, setModal] = useState(0); let [modal, setModal] = useState('닫힘'); let [modal, setModal] = useState(false); state를 만들고 현재 UI의 상태정보를 저장한다. 현재 모달창의 상태만 표현할 수 있으면 어떤 자료든 상관없다. 삼항연산자 JSX 안에서는 if / else / for 등 문법을 사용할 수 없다. 그러나 중괄호 안에 삼항연산자는 사용할 수 있다. // 조건식 ? 조건식 참일 때 실행할 코드 : 조건식 거짓일 때 실행할 코드 3 > 1 ? console.log('맞음') : console.log('아님') function App (){ let [modal, s..

React : 복잡한 html을 한 단어로 치환하는 Component 문법

어떨 때 Component를 쓸까? 반복적인 html 축약할 때 큰 페이지들 자주 변경되는 것들 Component 만들기 function App() { return ( {/* */} ); } function Modal(){ return ( ) } const Modal = () => { return ( ) } 주의점 function을 function App() {} 바깥에 만든다 function명은 첫글자를 대문자로 작성한다. function안에는 div를 병렬기입하면 안된다 중요 주의점 state 가져다 쓸 때 문제가 생긴다. -> A 함수에 있던 변수는 B 함수에서 맘대로 가져다 쓸 수 없다. function 하나 안에 div 병렬기입하기 return ( ) 내부는 하나의 태그로 시작해서 하나의 태그로..