전체 글45 [React] 리액트 컴포넌트 스타일링(세션 6): styled components, css모듈 Conditional & Danamic Styles Styled Components: third party library, 특정 범위에 대해서만 css 스타일 적용하기 CSS modules 1. 동적 인라인 스타일 설정하기 먼저 기본 프로젝트에서는 input에 아무것도 입력하지 않고 Add Goal 버튼을 눌러도 아이템이 추가된다. 이것을 피하려면 스타일을 동적으로 설정해야 한다. 먼저 기존 input관련 컴포넌트 코드를 살펴보면, 아래와 같다. import React, { useState } from "react"; import Button from "../../UI/Button/Button"; import "./CourseInput.css"; const CourseInput = (props) => {.. 2022. 5. 28. [React] 렌더링 리스트 및 조건부 Content(섹션5) Rendering Lists & Conditional Content : working with really dynamic content Outputting Dynamic Lists Of Content Rendering Content Under Certai Conditions 페이지에 데이터 배열을 출력하는 방법, 다른 조건(상황)에서 다른 컨텐츠를 보여주는 방법 등을 알아보자. 1. 데이터의 렌더링 목록 지금까지 expense 데이터 배열은 app.js에 하드 코딩되어 있었다. 또한 Expenses.js를 살펴보면 JSX코드로 ExpenseItem 컴포넌트를 정적으로 하드코딩되어 있다. 몇 개의 아이템이 추가로 입력되고 필터링될 지 알 수 없으므로 이 부분을 동적으로 변환해주어야 한다. 그럼 이 Expe.. 2022. 5. 21. [React] react 18버전 ReactDOM 관련 warning Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot 실습 하던 콘솔창에 위와 같은 경고가 계속 뜨는 것을 확인하고 찾아보니, react18 버전에서 ReactDOM 렌더링 방식이 바뀌었다고 한다. https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-client-rendering.. 2022. 5. 17. [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. 이전 1 2 3 4 5 ··· 8 다음
