차근차근 배움터

style과 클래스를 동적으로 지정할 수 있다는 것은 중요하다 우리가 만드는 css 파일들은 사실 전역적으로 적용될 수 있다 이름을 잘 작성하면 문제를 해결할 수도 있지만 대규모 프로젝트의 경우에는 개발자들이 같은 이름을 사용할 수 있다는 것이 문제다 이런 문제를 해결하기 위한 방법을 살펴본다 1. styled components 패키지 사용하기 styled components는 특정 스타일이 첨부된 컴포넌트를 구축할 수 있도록 도와주는 패키지인데, 이 스타일이 첨부되는 컴포넌트에만 영향을 미치고 다른 컴포넌트에는 전혀 영향을 미치지 않는다 먼저 패키지를 설치해야 한다 $ npm install --save styled-components 설치가 안되는 문제 발생해서 먼저 경로를 한 번 밖으로 나간다음 (..

template literal 이라고 하는 백틱 기호를 사용하자 Course Goal 스타일을 더 동적으로 꾸밀 수 있게 되었다

아무것도 입력하지 않았을 때 발생하는 아래와 같은 현상을 막아보자 이를 위해서는 style을 동적으로 설정해야 한다 trim() 이라는 공백제거 메서드를 사용할 건데 inline style props는 값으로 객체를 가진다 Course Goal 이런 방식으로 조건에 맞지 않는 (예: 공백입력) 경우에 스타일을 변화하게 만들었다 하지만 항상 inline style에 최우선을 두기 때문에 css가 일순위가 되기 때문에 다른 style 속성들이 무시될 것이다 아래와 같이 setIsValid 값을 변경하고 return 해줌으로써 조건부 스타일링 완성 const formSubmitHandler = event => { event.preventDefault(); if (enteredValue.trim().length..

선생님이 업로드한 첨부파일을 다운로드하는데 거기에는 node_modules 파일이 없으니 간단하게 npm install 을 통해서 다시 다운로드 받기 우리가 배운 개념들만 사용했기 때문에 꼭 둘러보기

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

작은 버그 수정 데모 애플리케이션에는 현재 작은 버그 가 있다 여러 값을 추가할 때 해당 값은 숫자가 아닌 문자열로 추가된다 고치는 것은 쉽습니다. 단순히 숫자 변환을 실행하면 된다 ExpenseForm.js 에서 const expenseData = { title: enteredTitle, amount: enteredAmount, date: new Date(enteredDate), }; 를 const expenseData = { title: enteredTitle, amount: +enteredAmount, date: new Date(enteredDate), }; submitHandler 함수에서 이렇게 바꿔준다. +만 붙이면 Number 타입으로 변경 가능하다

이제 dataPoint들을 전달할 것이다 왜 차트가 안 나오나 한참 고민했는데.... css 를 import 안 해서 안 나왔다 ㅋㅋ Chart.js import ChartBar from "./ChartBar"; import "./Chart.css"; const Chart = props => { const dataPointValues = props.dataPoints.map((dataPoint) => dataPoint.value); const totalMaxium = Math.max(...dataPointValues); return {props.dataPoints.map(dataPoint => // hello )} } export default Chart; ChartBar.js import React f..

style을 추가하고 싶을 때 dash 가 존재하는 경우에는 따옴표로 감싸서 작성하거나 아니면 카멜케이스로 따옴표 없이 작성하면 된다 .ChartBar.js import React from 'react'; const ChartBar = () => { let barFillHeight = '0%'; if (props.max > 0) { barFillHeight = Math.round((props.value / props.maxValue) * 100) + '%'; } return } export default ChartBar;

모든 차트의 바는 전체 차트의 최댓값을 기준으로 값을 표시한다 그래서 속성으로 maxValue도 전달한다 또 차트에 label을 넣을 건데 label값은 key 값으로 사용할 것이다 Chart.js import ChartBar from "./ChartBar"; import "./Chart.css"; const Chart = props => { return {props.dataPoints.map(dataPoint => )} } export default Chart;