return하려는 JSX코드는 하나의 root요소만 들어가 있어야 한다
위 코드는 2개의 root요소가 들어 있어서 에러가 뜬다.
그래서 모든 요소를 div로 한번더 감싸줘서 return해준다.
컴포넌트에 css 넣기
- import 해준다.
- class는 JSX는 className으로 명명해준다.
JSX코드에 JS코드 넣기
- jsx코드 안에 { }에 js문법 넣으면 js로 실행
- 위에 변수 선언해 주고 { }안에 넣기
props
자바스크립트에서 함수 생각해보자.
함수를 선언하고 호출할 때 인자를 넣으면 여러가지 값을 넣을수 있으므로 함수를 재사용할 수 있다.
컴포넌트도 마찬가지이다.
이때 컴포넌트에서 매개변수를 props라고 한다.
모든 변수를 객체로 받는다. 그래서 매개변수는 props만 넣어주면 된다.
위에서는 ExpenseItem 컴포넌트 안에 변수를 선언해 줐다,
그러면 재사용성이 매우 떨어지게 된다
외부에서 변수를 받아오고 싶다.
App.js에서 배열을 객체를 묶어주고 객체안에 필요한 값을 입력
위 데이터를 컴포넌트로 넘겨주기 위해 컴포넌트 선언해준 곳에 다음과 같이 입력한다.
매개변수는 props이고 모든 인자를 객체로 받는다.
JSX코드는 깔끔하게 유지 하고 긴 코드는 따로 빼서 변수에 넣어주면 좋다
🌞