박재형 / IT 개발 공부

import logo from './logo.svg';import './App.css';import zzang from './assets/zz.jfif' //자식 컴포넌트const Avatar = (props)=>{  console.log(props);   var username = props.username;  var age = props.age;  var children = props.children  // children 안에 h2태그, img 태그 내용이 들어가있음   return (    div className="Avatar">      이름: {username}br>br>      나이: {age}br>br>      {children}br>br>    div>  );};//부모 컴포넌트fu..

속성 이용 props1) 용도   - 화면 레이아웃이 중첩된 형태로 되어있고     이 때 부모 컴포넌트에서 자식 컴포넌트에게 데이터를 전달할 때 사용하는 방법  ( 단방향 ) 2) 특징  - 단방향 ( 부모에서 자식으로만 전달 가능 )  - 전달되는 데이터 종류 제한이 없음  - 모든 데이터는 root (한군데)에서 관리한다 부모에서 자식에게 데이터를 전달1. 부모 컴포넌트에서 변수를 선언하고2. 자식 컴포넌트 이름 안에 변수들을 적어준다3. 자식 컴포넌트 파라미터로 props로 받으면 끝 객체분해할당 방식 propsfunction Avatar2(props) {  //객체분해할당  const { username, xxx, address } = props;  return (    div className..

JSX 1) 개요 - JSX ( Javascript XML ) - 웹브라우저에 랜더링되기전에 html로 변환됨 ( babel 도구 이용 )   즉 JSX는 웹브라우저에서 직접 사용이 불가능한 비표준문법  2) 특징 - 반드시 root 태그가 있어야됨root 태그인 className="App" 안에 말고밑에 태그를 붙이면 오류남 태그 여러개 쓰고 싶으면 root 태그를 로 감싸주고 사용한다div가 있어야하면 div로 감싸주면된다  - JSX에서 JS의 변수값등을 출력할 때는 {변수값} 사용  - { 변수값 }는 산술연산자, 비교연산자, 논리연산자, 3항연산자 사용 가능    ( 논리값, null은 안나옴 )  - 논리값 ( true / false )와 null은 { 변수값 } 사용시 출력이 안됨   - C..

1. 개요 - facebook 제공 - 프론트엔드 프레임워크 ( React, Vue, Angular )    => JS 기반- MVC 패턴에서 View를 담당- 가상 DOM 이용 ( 복사본 ) 해서 빠른 DOM 처리 가능- 개발방법 2가지  가. 함수형    - 현재 개발 방법    - 일반함수 가능       arrow 함수 가능    - 클래스 컴포넌트에서만 사용가능한 문법들이 있었음      버전업되면서 함수에서도 사용가능하도록 문법지원 (hooks 지원)   나. 클래스    - 과거에 주로 사용  2. React.js 종류 3가지 1) CSR ( Client Side Rendering )     - 웹브라우저에서 랜더링하는 방식   2) SSR ( Server Side Rendering )   ..