신입개발자_장민기

export default function App(){ function handleEvent(e){ console.log("handleEvent Click"); e.preventDefault(); } function parent(e){ console.log("parent: " + e); } function child(e){ console.log("child: " + e); e.stopPropagation(); //부모의 버블링 방지 } return( submit parent child ) }

App import ChildComponent from "./components/ChildComponent" export default function App(){ return( App ) } ChildComponent import SubChildComponent from "./SubChildComponent" export default function ChildComponent(props){ //props빠짐 function handelEvent(v){ console.log("handelEvent: "+ v) } return( ChildComponent handelEvent(e)}>ChildComponent에서 ) } SubChildComponent export default function SubCh..

App.js import TabButton from "./components/TabButton" export default function App(){ var x = "버튼을 선택하세요"; function handelEvent(selectedButton){ //일반적인 변수는 화면 갱신 X(App이 한번만 실행되기 때문) console.log("Hello Button", selectedButton); //useState hook을 이용해 해결 가능 x = selectedButton; } //App 컴포넌트 실행횟수 체크 => 실행하면 1번만 호출 console.log("App Component"); return( 이벤트 처리 {/* ********************************* onSele..

import F1 from "./components/F1"; let user = { name: "hong", age: 10 } export default function App(){ return( ) } export default function F1(props){ const user = {...props, name: "이순신"} console.log(user.name, user.age) return ( ) }

App import FirstChild from "./components/FirstChild" const person= { //const는 자식에서 바꿀 수 없음 name: "홍길동", age: 20 } export default function App(){ return ( {/* import값을 태그로, 넘기는 JSON명을 넘김*/} {/* */} ) }; FirstChild import SecondChild from "./SecondChild"; export default function FirstChild(props){ const user = {...props, address: "서울"}; return ( ); } SecondChild export default function SecondChild..

App.js import PersonList from "./components/PersonList"; let persons = [ {name: "홍길동", age: 20}, {name: "이순신", age: 30}, {name: "유관순", age: 40}, {name: "강감찬", age: 50}, ] function App(){ return( 학생 정보 ) } export default App; export {persons}; // PersonList에 값 넘겨주기 PersonList.js import {persons} from "../App" export default function PersonList(){ return ( 번호 이름 나이 {/* => 뒤에 {return ~~}을 쓰거나 () */..

Avatar.js function Avatar(props){ const {name, age, address="제주"} = props; return ( 이름: {name} 나이: {age} 주소: {address} ) } export function Avatar2(props){ const {name, age, address="제주"} = props; return ( 이름: {name} 나이: {age} 주소: {address} ) } //default props 값 설정 Avatar.defaultProps = { name: "이름없음", age: 0, address: "주소없음" }; export default Avatar;

import reacting from "./assets/exam.png"; function App(){ return ( {/* assets에서 이미지 파일 가져옴(import 필요) */} {/* public에서 이미지 파일 가져옴(import 불필요) */} ) } export default App;

data.js export const CORE_AVATARS = [ { name: "홍길동", age: 20, address: "서울" }, { name: "이순신", age: 50, address: "전라" }, { name: "강감찬", age: 44, address: "경기" }, ] App.js(외부 데이터 사용 + 스프레드 함수 + Map 함수) import { CORE_AVATARS } from "./data/data" function Avatar(props){ const {name, age, address = "제주"} = props; return ( 이름: {name} 나이: {age} 주소: {address} ) } export default function App(){ console.l..

App.js import Avatar, {Avatar2} from "./components/Avatar" //외부 파일 Avatar import Member from "./components/Member" //외부 파일 Member export default function App(){ const addr = "서울"; const chul = {name: "유관순", age: 10, address: "부산"}; return ( {/* 문자열을 제외한 모든 값을 전달할 때는 반드시 중괄호 사용 */} 외부 파일 Avatar {/* jsx주석: 매개변수에서 직접 분해 가능 */} 회원0: 회원1: 회원2: 회원3: Avatar2: Member: ) }; Avatar.js function Avatar(prop..