React 썸네일형 리스트형 [CSS] Flexbox 0. - Container와 Item 별로 적용할수 있는 속성값이 있다. - main axis와 cross axis가 있다. .container { display: flex; flex-direction: row; flex-wrap: nowrap; flex-flow: column wrap; justify-content: center; align-items: center; } .item { flex: 0; flex-grow: 0; flex-shrink: 0; } 중심축에 정렬 -> justifycontent 반대축에 정렬 -> align-items div width를 100%로 하면 부모노드의 넓이와 같아진다.! 1. height: 100% vs 100vh 100%는 부모의 높이 전체를 100vh 보이는 v.. 더보기 [ReactHooks] 3. useEffect - what is callback? A callback function is a function which is: passed as an argument to another function, and, is invoked after some kind of event. 간단명료한 답변이다. 즉, 콜백 함수란 1. 다른 함수의 인자로써 이용되는 함수. 2. 어떤 이벤트에 의해 호출되어지는 함수. 출처: https://satisfactoryplace.tistory.com/18 더보기 [ReactHooks] 1. useState - Hook이란 react component, 함수 를 의미한다. - 유용한 Hook들은 npm에서 서로 공유하고 있다. - JSX에서 {...name}과 같이 한번에 넘겨줄 수 있다. 0. npm - 많은 react 유저들이 그들의 hook을 공유하고 있다. npm (npmjs.com) npm Bring the best of open source to you, your team, and your company Relied upon by more than 11 million developers worldwide, npm is committed to making JavaScript development elegant, productive, and safe. The free npm Registry has b.. 더보기 [React] 3. fetch 1. fetch - url으로부터 json object를 받아와서 사용하는것을 fetch라고 한다. - fetch를 통해 받아온 object를 useState를 사용하여 저장하고 사용한다. - .then 문법을 사용하는 방법 useEffect(()=>{ fetch("https://yts.mx/api/v2/list_movies.json?minimum_rating=8.8&sort_by=year") .then((response) => response.json()) .then((json) => { setMovies(json); setLoading(false); }); },[]) - async, await 문법을 사용하는 방법 const getMovies = async () => { const json = awa.. 더보기 [React] 4. Router 1 . Router - 컴포넌트들을 모두 분리하고 App에서는 페이지간 이동을 가능하게 하고 싶다. - 안에서 문을 사용하여 path가 다른 간 이동을 가능하게 한다. import { BrowserRouter as Router, Switch, Route} from "react-router-dom"; import Home from "./routes/Home"; import Detail from "./routes/Detail" function App() { return ( ); } export default App; 2. Movie 컴포넌트 분리 - 컴포넌트를 출력할때 필요한 정보들은 props로 전달받아서 처리한다. - propstype을 사용하여 전달받을 props를 명확히 해준다. import Prop.. 더보기 [React] 1. Create React App 1. node js와 npm 설치 Node.js (nodejs.org) Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org cmd를 열고 node -v npx 실행. 잘 작동한다면 설치 완료 2. my-frist-react-app cmd에서 npx create-react-app 이름 을 해주면 react app이 자동으로 생성된다. 생성이 완료되면 vscode에서 열어준다. 3. start package.json에서 script-start 실행 또는 터미널에서 npm strat 실행 브라우저에서 나의 react app이 열린다. 4. 컴포넌트 만들기 - 컴포넌트 하나마다 새로운 js file로.. 더보기 [리액트] 정리 5 1. props - props는 첫번째이자 유일하게 전달받는 인자이다. - props는 컴포넌트에 붙여준 모든 값을 보관하는 object이다. - 같은 컴포넌트를 UI를 다르게 만들어서 사용할 수 있다. (재사용성) - object이므로 여러개의 prop을 전달해줄 수 있고 각각 받아서 사용할수 있다. - 전달하는 props와 전달받은 props의 이름은 같아야 한다. - string, number, function 까지 props로 모든것을 컴포넌트로 넘겨줄수 있다. : {first, second, last} (ES6) function Btn(props){ // props는 전달받은 것들을 전부 포함하는 object이다. return ( // {text} 와 같이 바로 받은 것을 argument로 받을.. 더보기 [리엑트] 정리 4 1. State - 변수를 여러개 사용할경우 여러개의 state를 가지고 사용한다. - array 문법을 이용해 두개의 변수를 한번에 지정한다. const [amount, setAmount] = React.useState(0); const [flipped, setFlipped] = React.useState(false); const [index, setIndex] = React.useState("xx"); 2. JSX 조건문 - JSX에서 Javascript처럼 조건문을 사용할 수 있다. - { 조건문 ? true이면 반환 : false이면 반환 } 의 형태 {flipped ? "Go to Minutes" : "Go to Hours" } {index === "xx" ? "Please select your.. 더보기 이전 1 2 3 다음
