[ 과제5 ] 리액트를 이용해서 CRUD 앱 만들기

과제 내용

• 최대한 컴포넌트를 나눠서 구현하기
• 폴더 이름 및 변수 이름을 명확히 작성하기
  

과정

npm vs npx

• npm과 달리 npx는 로컬에 저장하지는 않고 패키지를 설치만 해주는 명령어

함수형 컴포넌트 생성 시 자동화 툴

• ES7 설치 후 새로운 jsx 컴포넌트 생성할 때마다 rafce (React Arrow Function Component Export) 입력하고 엔터
  

빈 <>

• jsx에서 오류가 나는 것을 방지하기 위해 항상 부모요소 하나로 전체 html 코드를 감싸줘야 하는데, 이 때 <div> 로 감싸면 불필요한 <div>를 생성하게 되므로 이를 대신해서 <React.Fragment>를 사용할 수 있으며, 더 간단하게는 빈 태그 <>를 사용한다.

정보를 부모 컴포넌트에서 자식 컴포넌트로 전달할 때, props vs 구조분해할당

// 부모 요소
<ExpenseList initialExpenses={initialExpenses} />

// 자식 요소 : props
const ExpenseList = (props) => {
    console.log(props.initialExpenses)
}

// 자식 요소 : 구조분해 할당
const ExpenseList = ({initialExpenses}) => {
    console.log(initialExpenses)
}