개발/react21 Styled components 상속받기를 통해 중복을 줄인다! 이전 컴포넌트의 모든 속성을 그대로 가지고 와서 하나만 추가하고 싶을 때 상속을 받으면 된다! const BoxTwo = styled(BoxOne)` 추가하려는 속성 ` 이렇게 코드를 작성하면, BoxTwo가 BoxOne의 속성을 그대로 가져오면서 추가하려는 속성까지 갖게 된다. 2022. 11. 12. Styled components로 css를 적용하면 더 편리하다! styled components 가 없으면 global style을 styles.css로 넣거나, css 모듈을 만들거나, 태그에 직접 style을 적용해주어야 한다. 그러나 styled components를 사용하면 더 편리하게 style을 적용할 수 있다. 우선 npm i styled-components 를 통해 설치해준다. 다음으로 app.js에서 styled components를 import 해준다. import styled from "styled-components"; 그런 다음에 요소별로 다음과 같이 스타일을 적용한다. styled.태그명 반드시 유효한 태그명이어야 한다. const Box = styled.div` background-color: red; width: 100px; height:.. 2022. 11. 12. react로 api 호출해서 화면에 표시하기!! useEffect와 useState를 이용해서 api 호출해 화면에 표시한다. useState를 통해 loading의 상태를 업데이트하고, movies의 목록 상태를 업데이트한다. async await를 통해 특정 api url의 response를 json을 가져오고 그것을 setMovies에 넣어준다. movies.map을 통해 화면에 가져온 데이터에서 title을 화면에 뿌려준다. import { useEffect, useState } from "react"; function App() { const [loading, setLoading] = useState(true); const [movies, setMovies] = useState([]) const getMovies = async() => { c.. 2022. 10. 3. react의 useEffect는 api call 할 때 많이 사용!! 코인 정보를 가져올 때 우선 useState는 로딩, 로딩후 상태 업데이트에 사용하고 true-> false 또한 코인 상태를 저장하는 것에 사용한다. [] -> [코인 값 json] 그리고 useEffect는 코인 api를 fetch한 다음에 setLoading을 false로 바꿔준다. 그리고 html에는 각 coin의 목록을 li에 넣어준다. import { useEffect, useState } from "react"; function App() { const [loading, setLoading] = useState(true); const [coins, setCoins] = useState([]) useEffect(() => { fetch("https://api.coinpaprika.com/v1/.. 2022. 9. 26. 이전 1 2 3 4 5 6 다음