신입개발자_장민기

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..

import "./App.css" /* Avatar */ function Avatar(props){ console.log(props); // {name: "홍길동", age: 20, addr: "서울"}; const {name, age, address = "제주"} = props; //기본값 return ( 이름: {name} 나이: {age} 주소: {address} ) } function Avatar2({name2 = "강감찬", age2, address2}){ /* 객체의 분해 할당 */ return ( 이름: {name2} 나이: {age2} 주소: {address2} ) } function Member({person}){ //JSON: props대신 {person}으로 받음 const {name..

import "./App.css" //import sample from "./assets/sample.png" // //공통으로 사용하는 변수 let title = "Menu"; let names = ["홍길동", "이순신", "강감찬"]; let attr = {href: "http://www.google.com", target: "_blank"}; const App1 = (props) => { console.log("App1", props); return App1입니다. } function App(){ return ( jsx 사용 1 - 기본 숫자는 중괄호로 출력, 계산 : {100 +1} Boolean값(true, false, null)은 직접 출력 안 됨 : {3 > 2} Boolean값(true,..

import "./App.css" function App1(){ //1. 일반 jsx 요소 반환 return Hello } function App2(){ //2. 일반 컴포넌트 요소 반환 return } function App3(){ //3. 일반 문자열 반환 return "Hello World" } function App4(){ //4. 배열 return ["A", "B"] } function App5(){ //5. JSON(사용 불가) -> String //jsx의 기본문법 {} 때문에 문자열 형태의 json 포맷으로 리턴해야 함 return "{a: 100, b: 200}" } function App6(){ //6. 여러 개 반환시 반드시 root 태그 필요 return ( Hello1 Hello2..

import "./App.css"; //일반 함수 function MyButton(){ return 버튼; } //arrow 함수 const MyButton2 = (props) => { return 람다 버튼 } function App(){ //1. function 생성 return ( App ) //2. return 생성 } export default App; //3. export default 함수명 람다 함수의 경우 const Btn2 = (props) => 버튼2 도 가능하다. !!!@@@컴포넌트 첫 글자는 반드시 대문자로 할 것@@@!!! 반면, const는 반드시 소문자로 해야 한다. Export하는 함수에서 입력하지 않았거나, 컴포넌트가 소문자면 함수명이 어두워진다.