내 공부 일지

프롭스를 전달할 때 스프레드 문법을 쓰면 더 간결하게 전달 할 수 있다. function App () { const giftMoney = [ {name: 'jhon' , money: 200}, {name: 'sam' , money: 300}, {name: 'bell' , money: 500}, ]; return ( ) } function Son ({name , money}) { return ( name:{name} money:{money} ) }

리액트는 컴포넌트가 그려질 때 한 번만 코드를 읽고 그리기 때문에 변수를 바꿔주는 이벤트를 발생시켰을 때 아무런 변화가 없다. 그래서 재평가를 하기위한 트리거가 있어야한다. 그것이 useState라는 리액트 Hook이다. useState는 컴포넌트 함수에 직접 호출해야한다. (컴포넌트 내의 최상위) 함수 밖이나 컴포넌트 함수 안의 함수에는 호줄 할 수 없다. import React, { useState } from 'react'; import ExpenseDate from './ExpenseDate'; import './ExpenseItem.css'; import Card from '../UI/Card'; function ExpenseItem(props) { const [title, setTitle] =..

컴포넌트를 그리다보니 css가 많이 중보 되는 현상이 있었다. 중복되는 것은 컨테이너의 border-radius와 box-shadow였다. 이 중복되는 스타일을 Card.js 컴포넌트 만들어 여기에 적용했다. import React from 'react'; import './Card.css'; function Card(props) { return {props.children}; } export default Card; 하지만 위와 같이 className으로 스타일을 넣어줬던 것이 적용이 되지 않았다. 그렇다면 컴포넌트간 선택자를 어떻게 합칠까? function Card(props) { const classes = ' card ' + props.className; return {props.children}..

css를 적용하는 방법은 여러가지있다. 라이브러리를 사용해도 되지만 이번에는 css파일을 만들어 js파일에 적용시켜보았다. //css파일 .expense-date { display: flex; flex-direction: column; width: 5.5rem; height: 5.5rem; border: 1px solid #ececec; background-color: #2a2a2a; color: white; border-radius: 12px; align-items: center; justify-content: center; } .expense-date__month { font-size: 0.75rem; font-weight: bold; } .expense-date__year { font-size: 0..

props란 부모컴포넌트에서 자식컴포넌트에게 넘겨주기위한 방법이다. //APP.js function APP () { const gift = [ {과자:선칩, 용돈: 50000, 아이스크림: 쌍쌍바}, {과자:콘칩, 용돈: 60000, 아이스크림: 메로나}, {과자:치토스, 용돈: 70000, 아이스크림: 바밤바}, ] return } 부모(상위) 컴포넌트인 APP컴포넌트에서 이런식으로 자식(하위)컴포넌트인 Son컴포넌트에 props를 전달하고 //Son.js function Son (props) { return {props.과자} {props.용돈} {props.아이스크림} } 이렇게 자식컴포넌트에서 받아 쓸 수 있다. 위와 같이 부모에서 자식에게 gift에 있는 값을 각각 설정해서 보내 줄 수있지만, ..

우리가 날짜를 생성할 때 흔히 쓰는 new Date()는 객체이기 때문에 변수에 저장을 했다고 하더라도 return문에서는 단독으로 사용할 수 없다. 따라서 내장된 메서드를 사용해야한다. function Date () { const date = new Date(2021, 2, 21) return {date} } 위와 같이 사용 할 수 없고 {date.toISOString()} 이렇게나 function Date () { const date = new Date(2021, 2, 21).toISOString() return {date} } 이렇게 메서드를 같이 써서 원하는 결과 값을 받아와야한다. 메서드 https://developer.mozilla.org/ko/docs/Web/JavaScript/Referen..

리액트의 컴포넌트 이른은 대문자로 시작해야한다. 소문자로 시작할 경우 컴포넌트를 사용 할 때 HTML에 내장된 요소로 간주하기 때문이다.

써드파티 프로그래밍에서 서드파티란 프로그래밍을 도와주는 플러그인, 라이브러리, 프레임워크 등을 만드는 회사를 뜻한다. 하지만 대개의 사람들이 말할 때는 플러그인, 라이브러리, 프레임워크 등, 회사가 아닌 도구로서 말 한다. 플러그인, 라이브러리, 프레임워크 등등 각각 세부적으로는 다르나 공통적으로는 개발을 도와주는 도구들을 의미한다.

리액트 사용자 인터페이스(컴포넌트)를 구축하기 위한 자바스크립트이다. 라이브러리라고도 하며 프레임워크라고 하는 사람도 있다. 리액트를 사용하면 사용자 인터페이스(컴포넌트)를 간단하게 구축할 수 있다. 컴포넌트 모든 웹 앱의 모든 사용자 인터페이스(컴포넌트)는 컴포넌트 단위로 분해할 수 있다. 페이지에 보이는 버튼, 이미지, 글자 등등 아주 작은 것부터 페이지 자체도 컴포넌트이다. 컴포넌트는 반복코딩을 효율적으로 줄여줄뿐만 아니라 유지보수에도 좋다. 즉, 리액트는 컴포넌트의 덩어리이다.