create-react-app newreact
npx create-react-app newreact (npm)
<App.js>
before: class
now: function
class App extends React.component{
render(){
return(
)
}
}
function App(){
return(
)
}
리액트 컴포넌트를 빌드하기 위한 2가지 방법
Hooks: 최신 , 권장 , 리액트 특정
Classes: 자바스크립트와 연계, 지금까지 많이 이걸로 개발됨
import React from 'react'; (모바일/VR/DOM 여러 곳에서 사용가능)
import ReactDOM from 'react-dom';
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>
)
}
몬스터 사진 바꾸기 : 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 : 현재 배열
props 는 변하지 않는 것
state the description of you app 변할 수 있음
STATE >> props
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에 리퀘스트한다
<Scroll>
<CardList robots={filteredRobots}></CardList>
</Scroll>
const Scroll = (props) =>{
return(
<div style={{overflowY:"scroll" , height:"500px", }}>
{props.children}
</div>
)
}