rhanziy

flexbox를 사용하면 특히 그리드의 마지막 행에서 항상 예상되는 정렬이 생성되는 것은 아닙니다. justify-content: space- between 을 사용하면 항목 수가 정사각형이 아닌 한 마지막 행에 큰 간격이 생깁니다. 항목 모음이 있다고 가정해 보겠습니다. One Two Three Four Five 각 항목에는 고정된 높이와 너비가 있습니다. .item { width: 100px; height: 100px; border: solid; } 그리드에 정렬하려면 flexbox를 사용할 수 있습니다. .container { width: 450px; display: flex; flex-wrap: wrap; gap: 20px; } 이것은 실제로 우리가 달성하려는 효과를 제공합니다. 그러나 각 행이 ..

import { BrowserRouter as Router, Routes, Route, } from "react-router-dom"; import Detail from "./routes/Detail"; import Home from "./routes/Home"; function App() { return ( ); } export default App; import { ... } from "react-router-dom"; 을 해줌으로써 지정한 url로 이동하면 원하는 컴포넌트들을 화면에 띄울 수 있다. {title} ({year}) Movie 컴포넌트로 가서 title부분에 a태그로 링크를 걸어주면 간단하게 이동! 여기서 새로고침 없이도 다른페이지로 이동하려면 import { Link } from "r..

다양한 api 사이트에서 배열에 담긴 정보를 가져오는 법! useEffect(()=> { fetch("https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year") .then((response) => response.json()) .then((json) => { setMovies(json) }); }, []); useEffect( )를 사용해서 fetch( ).then( ).then( ); 이런 식으로 가져와도 되지만 가독성을 위해 아래와 같이 async/await을 사용해 json으로 변환해서 가져온다. function App(){ const [movies, setMovies] = useState([]); const getMovies = ..

HTML 삽입 미리보기할 수 없는 소스 리액트를 사용해 Todo리스트를 구현했다. 입력폼에 입력할 toDo state와 리스트를 구현할 toDos state를 생성해서, toDo를 입력하고 onSubmit버튼을 누르면 setToDos(currentArray => [toDo, ...currentArray]); 입력폼에 입력한 toDo + 누적된 toDo들로 새로운 배열을 만든다. 여기서, ...currentArray는 배열을 풀고 문자열을 나열함! 이제 이 값을 li로 뿌려준다. 리액트는 기본적으로 list에 있는 모든 item을 인식하기 때문에 key를 넣어 고유하게 만들어줘야 한다. map의 첫 번째 argument는 배열의 data, 두번째는 index 즉, 숫자를 의미한다. 다른 array func..

node.js에서 npm을 설치하고 create-react-app을 하게되면 지금까지 작성했던 것들이 간편하게 제공된다. 더 좋아진 점은 쉬운 모듈화! js에서 state와 props를 생성하다가 문득 css는 어떻게 적용하지 싶었는데 따로 module.css 파일을 만들어서 컴포넌트 파일에 import해주면 된다. CSS Module CSS Module 은 CSS 클래스를 불러와서 사용 할 때 [파일이름]_[클래스이름]__[해쉬값] 형태로 클래스네임을 자동으로 고유한 값으로 만들어주어서 컴포넌트 스타일 중첩현상을 방지해주는 기술이다. 이를 사용하기 위해선, [파일이름].module.css 이런식으로 파일을 저장해야함! 그리고 js파일에서 import styles(이름) from "./App.module..

App 컴포넌트 내에 html들에 속성으로 props를 부여할 수 있다. App컴포넌트 내에서 지정한 props들은 단독으로는 실행이안되고 Btn 컴포넌트에 파라미터로 전달해줘야한다!! -> 그냥 이름일 뿐 속성에 대한 값은 실행되는 컴포넌트에서 정의한다. function Btn(props){ return(

HTML 삽입 미리보기할 수 없는 소스 분을 시간으로 바꿔주는 MinutesToHours() 컴포넌트와 km를 m로 바꿔주는 KmToMiles() 를 App에 조립했다. 이번엔 삼항연산자를 많이 사용했는데 조건에 맞으면 1, 아니면 2번 코드가 실행되는 if문의 축약형. 리액트에서 html구조안에 자바스크립트는 { } 코드블럭 안에 작성하면된다. 복잡해보이지만 엄청 간단하게 구현한 예제같다. 안보고도 척척 짤 수 있어야 할텐데! 다시 한번 복습하자면 modifier함수에 값을 할당하면 data가 그 값으로 바뀌고 리렌더링, 리프레쉬 되는 것 명심!!

HTML 삽입 미리보기할 수 없는 소스 useState( ); 는 배열로 되어있으며 const [이름1, 이름2] 로 변수설정해서 간단하게 값에 접근할 수 있다. 첫번째 인자는 data고, 두번째 인자는 modifier인데 data값이 바뀌면 modifier가 render를 다시 불러오고, UI를 새로고침해준다. 버튼클릭 시 Total Clicks를 보여주는 setCounter에서 counter +1 말고 (current) => current + 1로 한 이유는 다른 실행 결과로 인해 counter 값이 변했을 때 그 값을 반영하기위해 더 안전하게 코드를 짠 것. 현재 값 + 1로 이해하면 된다.