React15 [React] 리액트 state, event 처리(섹션4) 1. 이벤트 리스닝, 이벤트 핸들러 수행 현재는 위 모습의 state 하나밖에 존재하지 않는다. ExpenseItem컴포넌트에 이벤트 리스너 실습을 위한 버튼을 달아보았다. import "./ExpenseItem.css"; import ExpenseDate from "./ExpenseDate"; import Card from "../UI/Card"; const ExpenseItem = (props) => { return ( {props.title} ${props.amount} { console.log("clicked!"); }} > Change Title ); }; export default ExpenseItem; 요소에 props로 on이벤트리스너(여기선 onClick으로 클릭이벤트 발생 시 실행)를 .. 2022. 5. 16. [(인프런)따라하며 배우는 노드, 리액트 시리즈] 영화 사이트 만들기 #2 boiler-plate & mongodb 연결 client: react server: node.js #3 The moviedb API 설명 api 사용 시에 동일하게 계속 이용되는 부분은 아예 constant로 값 저장해놓고 사용하자 #4 landing page 만들기(1) 1. 전체적인 template 간단하게 만들기 2. Movie API에서 가져온 모든 데이터를 STATE에 넣기 3. MainImage Component 만들기 4. Grid Card Component 만들기 5. Load More Function 만들기 [1] [HPM] Proxy created: / -> http://localhost:5000 [1] i ｢wds｣: Project is running at http://172... 2022. 5. 3. [(인프런)따라하며 배우는 노드 리액트 시리즈] 기본 강의 #15 리액트란? 컴포넌트 virtual DOM: 아이템 하나만 업데이트 가능. snapshot. (cf. real DOM #17 npm: npx: disk space 낭비X, npm registery에서 다운로드 없이 가져와 실행해 항상 최신버전 사용 가능 #18 webpack: src폴더에 한해서만 이미지 넣을 때는 scr폴더에 넣어 webpack의 기능이 실행되도록 하자. #19 CRA to Out Boilerplate #20 react router dom: 페이지 간의 이동 https://v5.reactrouter.com/web/guides/quick-start Declarative routing for React apps at any scale | React Router Version 6 of .. 2022. 4. 26. [React] 컴포넌트 실습(섹션3-2) 리액트는 컴포넌트 트리 구조를 가진다. root component는 , 브라우저에 직접 렌더링되는 single HTML page이다. 이 외 다른 컴포넌트들은 또 다른 컴포넌트나 루트 컴포넌트에 포함되는 구조. 1. 컴포넌트 기본 사용 로직, 방법 컴포넌트를 생성해서 사용하는 방법은 간단히 3단계이다. 1. 컴포넌트 function으로 html코드 생성 2. export, import 3. import해온 컴포넌트 이용(JSX syntax) // components/ExpenseItem.js function ExpenseItem() { return Expense Item!; } export default ExpenseItem; import ExpenseItem from "./components/Expen.. 2022. 4. 15. [React] 리액트 기초 컴포넌트(섹션3-1) React makes building complex, interactive and reactive user interfaces simpler. 1. 컴포넌트(Component) React is all about "Components". Because all user interfaces in the end are made up of components. : Reusable buildingblocks in user interface. Just Combination of HTML code, CSS code, JS code. Why Components? Reusability: 재사용성 Seperation of Concerns: 우려 분리 -> 작은 단위로 관리 2. 선언형 접근방식(Declarative Appr.. 2022. 4. 14. [React] react-router-dom v6 업데이트 이슈 react-router-dom이 v6 업데이트 되면서 변경된 부분이 2가지가 있다. switch -> routes component -> element import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; function App() { return ( ); } 바뀐 줄 모르고 switch랑 component로 했다가.... swtich 없다는 에러 메시지를 만났고, 이를 routes로 바꿔서 실행해보니 에러메시지는 안 뜨는데 화면에 아예 아무것도 뜨지 않았다. react routes not display 이런 식으로 구글링하다가 버전이 업데이트로 component가 아니라 element로 써야 한다는 것...이건 왜 에러메시.. 2022. 4. 12. 이전 1 2 3 다음
