19. React.js

19. React.js

215. create-react-app3

create-react-app newreact
npx create-react-app newreact (npm)

216. Quick Note: Class vs Functional App.js

<App.js>
before: class
now: function

class App extends React.component{
 render(){
 	return(
    
    )
 }
}

function App(){
	return(
    )
}

219. Hooks vs Classes

리액트 컴포넌트를 빌드하기 위한 2가지 방법

Hooks: 최신 , 권장 , 리액트 특정
Classes: 자바스크립트와 연계, 지금까지 많이 이걸로 개발됨

220. Your First React Component

import React from 'react'; (모바일/VR/DOM 여러 곳에서 사용가능)
import ReactDOM from 'react-dom';

1. React - 페이스북에서 만든 javascript 라이브러리
   (React Components)->(React js)->(Browser DOM)
   Dom 생성 후 Virtual Dom 활용 변화된 Dom으로 변경
2. React-Nativie - React 방식의 네이티브 앱 개발 오픈소스 프레임워크

import App from './App'; = import App from './App.js';

import  './index.css';

ReactDOM.render(
  <React.StrictMode>
  	<h1>Hello World</h1>
  </React.StrictMode>,
  document.getElementById('root')
);

npm install tachyons

jsx
class X className O

ReactDOM.render(
  <React.StrictMode>
    <Hello greeting={'Hello'+'React Ninja'}/>
  </React.StrictMode>,
  document.getElementById('root')
);

props 쓰는 방법 2가지
1) Class로 2) function으로

class Hello extends Component{
    render(){
        return(
           <div className="f1 tc ">
               <h1>Hello World</h1>
               <p>{this.props.greeting}</p>
           </div>
        )
    }
}

const Hello = (props)=>{

    return(
        <div className="f1 tc ">
               <h1>Hello World</h1>
               <p>{props.greeting}</p>
           </div>

    )
}

221. Building A React App 1

몬스터 사진 바꾸기 : https://robohash.org/

tachyons : https://tachyons.io/docs/

export default 했다면 {} 없이

{https://robohash.org/${props.id}}

{https://robohash.org/${props.id}?size=200x200}

ES6 Destructuring
const {id,name,email} = props;
const id = props.id;
const name = props.name;
const email = props.email;

array.map(callbackFunction(currentValue, index, array), thisArg)
array.map((user,i)=>{
return( )
})

반복할 때는 key 집어넣기 - DOM 변경 시 일을 줄이려고/ 그 부분만 변경 인지 가능

currentValue : 배열 내 현재 값
index : 배열 내 현재 값의 인덱스
array : 현재 배열

226. Building A React App 3

props 는 변하지 않는 것
state the description of you app 변할 수 있음

STATE >> props

227. Styling Your React App

sega logo font
Jasonplaceholder

Mounting

1) constructor()
2) componentWillMount()
3) render()
4) componentDidMount()

Updating

Unmounting

componentDidMount(){
        fetch('https://jsonplaceholder.typicode.com/users')
        .then(response => response.json())
        .then(users => this.setState({robots: users}))
    }

componentDidMount에 리퀘스트한다

229. Buildin A React App 4

<Scroll>
     <CardList robots={filteredRobots}></CardList>
</Scroll>

const Scroll = (props) =>{

return(
<div style={{overflowY:"scroll" , height:"500px", }}>
     {props.children}
</div>
    )
}