JSX의 제한 사항[요구 사항] React는 JSX로 작업한다. JSX는 component에서 반환되는 코드로 React는 이 코드를 실제 DOM으로 렌더링한다. 하지만 JSX에는 제한 사항이 존재한다. return ( Hi there! This does not work :~( ) ; 만약 위의 코드처럼 component의 return 값에 복수의 JSX 요소들이 있다면 오류가 발생한다. 즉, root-level에서는 두 개의 JSX 요소가 인접해 있다면 다른 JSX 요소에 의해서 반환되거나 변수에 저장되지 않는다. React에서는 일반적으로 root JSX 요소가 하나여야만 한다. 저장하거나 반환하는 가장 위의 요소는 반드시 하나여야 한다. 그 이유는 명확한데, JavaScript에서는 둘 이상의 값을..
스타일의 범위 국한시키기 React에서 CSS를 활용하여 스타일을 적용시키고 동적으로 할당하기도 했었다. 기본적인 React의 CSS 적용 방식은 import "./CSSFileName.css";와 같이 사용한다. 해당 방식에는 한 페이지에서 여러 component들의 CSS 파일을 공유하여 모든 스타일들이 전역으로 사용하게 된다. 이는 DOM 어딘가에 명명한 class와 같은 이름을 가진 class가 존재한다면 해당 스타일이 그 대상에게까지 영향을 미친다는 것을 의미한다. 이는 기본적으로 스타일의 범위가 정해져 있지 않기 때문이다. 물론, CSS를 명명할 때 조금 신경만 쓴다면 꼭 문제가 되지는 않는다. 그것들은 결국 일반적인 CSS고 어떤 이름이라도 사용할 수 있기 때문이다. 그리고 선택하는 여러 요..
앞에서 component에 대해서 다루면서 component에 CSS를 입히는 방법에 대해서 같이 이야기했다. 이번에는 동적 할당에 대해서 알아보자. Component란 무엇일까? 앞서 React란 무엇인지 다뤘다. React란 무엇일까? React의 정의 React 공식 홈페이지에 따르면, 사용자의 인터페이스를 짓는 JavaScript library라고 설명한다. 문자 그대로 해석은 가능하지만 무언가 직접 coding-leaf.tistory.com How to set style Dynamically React로 만들어진 웹 앱들은 대체로 화려하다. 이는 사용자의 상호작용에 맞춰 페이지도 반응하기 때문인데, 이렇게 반응하기 위해서는 정적(static)으로 style을 입혀서는 안된다. 동적으로 style..
이전 시간 지금까지 표준 JS의 map method를 활용하여 동적으로 데이터를 출력하고, filter method로 선택된 연도에 맞는 item만 출력되도록 하는 코드를 작성했다. 그 코드는 아래와 같으며, 정상적으로도 작동한다. 더보기 import React, { useState } from "react"; import ExpensesFilter from "./ExpensesFilter"; import ExpenseItem from "./ExpenseItem"; import Card from "./../UI/Card"; import "./Expenses.css"; const Expenses = (props) => { const [filterYear, setFilterYear] = useState("2..
문제 발생 udemy의 강의에 따라 진행을 하다보면 위와 같이 console 창에 key 경고 메세지가 출력되었다. Warning: Each child in a list should have a unique "key" prop. Check the render method of `Expenses`. See https://reactjs.org/link/warning-keys for more information. 새로운 값을 입력하여 동적으로 데이터를 추가할 수 있고 그 과정에서 아무런 문제가 없어보이는데 말이다. 이것은 React가 데이터의 목록을 렌더링하는 데 있어서 특별한 개념을 갖기 때문이다. 이 개념은 React가 발생할 수 있는 어떠한 성능 저하나 버그 없이 효과적으로 이러한 목록들을 업데이트하고..
component는 useState를 사용하여 state를 가질 수 있다고 앞서 설명했다. 그러한 component들의 상태를 의미하는 용어들이 존재하는데 그것을 알아보자 state less, presentational, dumb component 위의 여러 명칭들은 아무런 state를 가지지 않고 단지 데이터를 출력하기 존재하는 component을 의미한다. 이와 반대로 state를 가진 component를 아래의 명칭으로 읽컫는다. smart, stateful components 아무래도 React에서 component를 다루다보면 응용프로그램을 작고 재사용 가능한 조각으로 나누기 때문에 대부분의 조각들, component들은 실제로 무언가를 출력하는 데에 초점을 맞추고 있다. 때문에 project에..
