TIL 48일차
- 13:00 | 마켓 상세 페이지 HighChart
Group Project | GoinOne
-
오늘 한 것
- HighCharts 연동
UseEffect 내에서 fetch 사용하기 (async, await)
const [tradingPrice, setTradingPrice] = useState({});
useEffect(() => {
// api는 asyncchronous
const getDatas = async () => {
const response = await fetch(
'https://api.upbit.com/v1/candles/minutes/15?market=KRW-BTC&count=30'
);
const jsonResponse = await response.json();
console.log(jsonResponse);
setTradingPrice(jsonResponse);
};
getDatas();
}, []);Hooks에서 중첩된 object state 값 변경하기
function App() {
const [nestedState, setNestedState] = React.useState({
top_level_prop: [
{
nestedProp1: 'nestVal1',
nestedProp2: 'nestVal2',
nestedProp3: 'nestVal3',
nestedProp4: [
{
deepNestProp1: 'deepNestedVal1',
deepNestProp2: 'deepNestedVal2'
}
]
}
]
});
return (
<React.Fragment>
<div>This is my nestedState:</div>
<div>{JSON.stringify(nestedState)}</div>
<button
onClick={() =>
setNestedState(prevState => {
prevState.top_level_prop[0].nestedProp4[0].deepNestProp1 = 'XXX';
return {
...prevState
};
})
}
>
Click to change nestedProp4[0].deepNestProp1
</button>
</React.Fragment>
);
}
ReactDOM.render(<App />, document.getElementById('root'));styled components box shadow
box-shadow: 0px 2px 3.84px rgba(0, 0, 0, 1);