⚛️ React

React : 다른 파일의 데이터 바인딩하기 (import, export)

코드가 길어지면 state나 데이터를 다른 파일로 분리해서 export/import 해오면 된다. export할 파일 let a = 10; export default a; import할 파일 import a from './data.js'; function App() { return ( {a} // 10 ) } export 여러개 하고 싶은 경우 let a = 10; let b = 100; export {a, b}; import {a, b} from './data.js'; function App() { return ( {a} // 10 {b} // 100 ) }

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 : input에 글 쓰면 게시글 추가하기 (onChange, 매개변수, trim, splice)

input에 글 쓰면 게시글 추가하기 조건 input에 텍스트를 넣고 발행버튼을 클릭하면 게시글 목록 상단에 추가된다. 아무 텍스트도 입력하지 않았다면 발행을 막는다. 풀이 let [input, setInput] = useState(''); let handleSubmit = (e) => { e.preventDefault(); if (input.trim() !== ""){ let copyTitle = [...title]; copyTitle.unshift(input); setTitle(copyTitle); } else {alert(`글제목을 입력하세요.`)} } return ( { title.map(function(a,i){ return ( { title[i] } handlesetLike(i)}>👍 { li..

React : 클릭한 글의 제목이 모달에 뜨게 만들기 (props, 삼항연산자)

조건 클릭한 글의 제목이 모달에 뜨게 만들기 풀이 function App() { let [title, setTitle] = useState(['쌍검사길드에서 닌자시작퀘 받기', '파판14 초보자 가이드 이벤트 진행안내', '귀여운 구부 꼬마친구를 받아보자']); let [modal, setModal] = useState(false); let [titleindex, setTitleindex] = useState(0); return ( { title.map(function(a,i){ return ( { title[i] } { modal ? setModal(false) : (setModal(true), setTitleindex(i)) } }>🗨 2월 18일 발행 ); }) } {modal && } ); } f..

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

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