발전하는 개발자

function SignUp(props) { // name:현재 상태 값, setName:상태 변경 함수, useState()안의값: 초기값 const [name, setName] = useState(''); // 사용자가 input에 타이핑할 때마다 실행 const handleChangeName = (event) => { // event.target.value: 사용자가 키보드로 입력한 값 setName(event.target.value); }; // 폼 제출시 실행 const handleSubmit = (event) => { // 입력된 값 알림창으로 표시 alert(`이름: ${name}`); // 브라우저 기본동작(페이지 새로고침..

1. App.css에서 이미지 넣기 background-image: url('이미지경로/이미지이름'); [이미지 경로] src폴더에 이미지를 넣었을 때 : ./ src하위폴더에 이미지를 넣었을 때 : ./하위폴더 2. App.js에서 이미지 넣기 1) 상단에 import시키기 import 불러올이름 from '이미지경로/이미지이름' 2) return( 하단에 코드 쓰기 에서 이미지 쓸 경우 : 에서 이미지 쓸 경우 : 3. public 폴더 활용하기 배포 전 build 작업(전 코드 압축)할 때 public 폴더에 있는 것은 그대로 보존됨. 사용할 이미지가 많을 경우 import를 여러번 할 필요가 없어서 이미지를 여기에 보관하는 것이 편리. 으로 써야 사이트 하위 카테고리에 사용된 이미지를 불러올 수 ..

1. React-Bootstrap 사이트 접속 https://react-bootstrap.github.io/ React-Bootstrap The most popular front-end framework, rebuilt for React. react-bootstrap.github.io 2. Get Started 클릭 3. 'npm install react-bootstrap bootstrap' 복사 4. VS Code 터미널에 붙여넣고 엔터 5. 사이트 스크롤 내려서 import 'bootstrap/dist/css/bootstrap.min.css'; 복사 6. VS Code 열고 App.js 상단에 붙여넣기 7. 필요한 UI들은 왼쪽 상단에 검색해서 코드 복붙하기

Component만들기 class : 변수/함수 보관하는 덩어리 extends : 오른쪽에 있는 놈의 성질을 물려받겠습니다. constructor : class의 변수/초기값 저장할 때 쓴다. state는 constructor 안에 작성 state 꺼내쓰려면 this.state.state변수명 class Profile extends React.Component { constructor(){ super(); this.state = { name : 'kim', age : 30 } } changeName(){ this.setState( {name : 'Park'} ) } render(){ return ( 저는 {this.state.name} 입니다. { this.changeName.bind(this) }>버튼..

date, checkbox, {???}}/> 입력할때마다 작용 에 입력한 값 가져오는 법 파라미터 안에 e를 넣는다. e.target 이벤트 발생한 html태그 눌러도 모달창 뜸 span, h4, div 3번누른게됨 이벤트가 상위요소로 퍼짐 이벤트 버블링 let [입력값, 입력값변경] = useState(''); { 입력값변경(e.target.value); console.log(입력값) }}/> 글제목 추가 새로고침 없어짐 이유 html, js파일 다시 읽어서 그럼 서버나 데이터베이스에 저장 글마다 삭제버튼 추가, 원하는글만삭제능

부모 state -> 자식 state props 문법 1. 자식컴포넌트 작명= { modal === true? : null } function Modal(props){ return ( props.글제목 날짜 상세내용 ) } import { useState } from 'react'; import "./App.css"; function App() { let [글제목] = useState(["남자코트 추천", "강남 우동맛집", "파이썬독학"]); let [따봉, 따봉변경] = useState(0); let [modal, setModal] = useState(false); let [title, setTitle] = useState(0); return ( ReactBlog { 글제목.map(function(a..

1. map 사용 이유 반복되는 html 축약 JSX는 중괄호 안에 for문 쓸 수 없음 2.map 사용법 모든 array자료 뒤에 함수에 붙여쓸 수 있다. 콜백함수를 집어넣는다. [array].map(function(parameter){ code }) 1. function안의 코드를 앞의 array자료개수만큼 반복실행 2. 함수의 파라미터는 array안에 있던 자료 3. return에 뭐 적으면 array로 담아줌 중괄호 {}안에서는 map함수를 쓴다. for문 쓸 수 없다. { [1, 2, 3].map(function(){ return (안녕) }) } 리엑트는 array안에 html 괄호 벗겨줌 실제 블로그 글 갯수만큼 html생성 { 글제목.map(function(a, i){ return ( { ..

[동적인 UI만드는 3step] 1.html css로 미리 디자인하기 function Modal(){ return ( 제목 날짜 상세내용 ) } 2. UI의 현재 상태를 state로 저장 let [state이름, state변경함수(주로 set~으로 시작)] = useState(UI상태,false는 닫힘); let [modal, setModal] = useState(false); 3. state에 따라 UI가 어떻게 보일지 작성 중괄호{} 안에 if문을 쓸 수 없다. 삼항연산자를 사용하면 됨. { modal == true? : null } [제목 클릭시 모달창 띄우기] 클릭시 state만 조절하면 됨 { setModal(true) }}>{글제목[2]} [제목 한번 더 클릭시 모달창 닫기] { setModa..

1. component란? html 덩어리를 한단어로 축약 2. component 사용이유 1. 반복적인 html 축약 2. 큰 페이지들 3. 자주 변경되는 것들 3.component단점 state 가져다쓸 때 문제 생김 다른 함수에 있던 변수는 다른 함수에서 마음대로 갖다쓸 수 없다. 변수의 범위가 함수라서 그럼. 4. component 만들기 1. fuction 만들기 function App(){}바깥에 코드쓰기 function명은 대문자로 시작 2. return() 안에 html담기 하나의 태그로 시작해서 하나의 태그로 끝나야한다. 두개의 div를 병렬적으로 집어넣으면 안된다. div2개를 병렬로 넣으려면 div를 하나 만들어서 전체를 감싼다. 의미없는 div는 대신 로 써도 된다. function..

[수정 버튼 클릭하면 글 제목 '남자 코트 추천' -> '여자 코트 추천'으로 바꾸기] 1. 덮어 씌우기 function App() { let [글제목, 글제목변경] = useState(['남자 코트 추천', '강남 우동맛집', '파이썬독학']); return ( { 글제목변경(['여자 코트 추천', '강남 우동맛집', '파이썬독학']) }}>수정버튼 2. 원하는 요소만 바꾸기 데이터가 많을 때는 원하는 요소만 변경하는 것이 코드가 깔끔함. function App() { let [글제목, 글제목변경] = useState(['남자 코트 추천', '강남 우동맛집', '파이썬독학']); return ( { 글제목[0] = '여자코트 추천'; 글제목변경(글제목) }}>수정버튼 3. 복사본 만들어서 변경 원본 데..