차근차근 배움터

요소에 전개 연산자를 사용할 수 있다 아래와 같이 완성 Card의 css 파일을 조금 변경해야 했다 .card { padding: 1rem; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); border-radius: 14px; background-color: white; max-width: 45rem; margin: 3% auto; }

기억나는가? Card 와 같이 공통 css를 주기위해서 Wrapper 처럼 사용할 수 있었다. 먼저 Card.js 를 보면 import classes from './Card.module.css'; const Card = (props) => { return {props.children} } export default Card; 위와 같이 props.children 을 괄호 안에 작성해줌으로써 Card를 Wrapper로 사용하는 컴포넌트들의 내용이 들어갈 수 있게 한다. const AvailableMeals = () => { const mealsList = DUMMY_MEALS.map(meal => {meal.name}); return {mealsList} }; 아래처럼 완성이 되었는데 보다시피 하얀 부분의..

아래 화면까지 완성했다 다음은 해당 컴포넌트를 하얀 테두리로 감싸는 작업을 할 것이다

여기까지 완성 Header.js import { Fragment } from 'react'; import mealsImg from '../../assets/meals.jpg'; import classes from './Header.module.css'; import HeaderCartButton from './HeaderCartButton'; const Header = props => { return React Meals } export default Header; HeaderCartButton.js import CartIcon from './CartIcon'; import classes from './HeaderCartButton.module.css'; const HeaderCartButton = pr..

내장 css 모듈 지원을 사용할 예정이기 때문에 Header.module.css 라는 형식으로 css 이름을 작성한다. create-react-app으로 만든 모던 리액트 프로젝트에서는 설정이 제공되지 않습니다 따라서 이 css 파일이 필요합니다 (?) Header.module.css 파일은 그대로 복사 완료 .header { position: fixed; top: 0; left: 0; width: 100%; height: 5rem; background-color: #8a2b06; color: white; display: flex; justify-content: space-between; align-items: center; padding: 0 10%; box-shadow: 0 2px 8px rgba(0..

선생님이 올려 주신 프로젝트 다운로드 받고 npm install로 모든 의존성을 다운로드하고 npm start로 기본 화면 확인하기 그리고 기능 별로 src 폴더 하위에 components 폴더 내에 폴더들을 생성한다

섹션 11: 연습 프로젝트: 음식 주문 앱을 만들어보자(Building a Food Order App) 지난 시간에 배운 많은 개념들을 해당 프로젝트와 함께 적용하며 복습하는 시간을 가질 것이다 음식 주문하는 앱을 만들어 본다

여러분들은 여러분들의 코드를 제 코드와 비교해보고 싶을 수 있습니다 (예: 에러 찾기 + 수정). 그것을 위해, 여러분은 이 모듈의 여러 코드 스냅샷을 이 Github 저장소에서 찾을 수 있습니다 https://github.com/academind/react-complete-guide-code/tree/10-side-effects-reducers-context-api 사용 지침은 이 링크로 연결되는 페이지에서 찾을 수 있습니다. /code 폴더에서 스냅샷을 고르시면 됩니다 - 하위 폴더 이름은 이 코스 섹션의 강의 이름과 쉽게 일치하도록 설정되었습니다. 여러분은 또한 해당 Github 저장소에서 섹션 슬라이드 (사용 가능한 경우) 를 찾을 수 있습니다.

이번에 보여줄 훅은 Input 컴포넌트와 명령형으로 상호 작용할 수 있게 해준다 즉, 예를 들어 어떤 state를 전달해서 그 컴포넌트에서 무언가를 변경하는 방식이 아니라 컴포넌트 내부에서 함수를 호출하는 방식으로 이용한다. 또 자주 할 필요도 없겠지만 자주 해서도 안 된다 이제는 Login 버튼을 활성화해서 유효하지 않은 값을 넣은 input 창에 효과를 주도록 하겠다. useRef에 대해서 기억하는가? 값이 유효하지 않을 때, 이 개념을 사용할 것이다 115. "ref"로 작업하기 ref는 매우 강력한 도구로 가장 기본적인 기능은 다른 DOM 요소에 접근해서 그것들로 작업할 수 있게 해주는 것이다 폼을 제출할 때만 필요한데도 키를 입력할 때마다 state를 업데이트한다는 건 ninetynine-202..

input div를 포함하는 컴포넌트 파일을 하나 생성하겠다 props를 통해 모든 데이터를 받는 컴포넌트다 버튼처럼 재사용 가능하게 만들 것이다 Input.js import React from 'react'; import classes from './input.module.css'; const Input = (props) => { return {props.label} } export default Input; Login.js 이렇게 보다시피 Input과 같은 버튼을 재사용할 때는 react context가 아닌 props를 사용해야 한다. import React, { useState, useEffect, useReducer, useContext } from 'react'; import Card from..