Function Component - 함수 선언 후 그 함수의 반환 값으로 React Component 주기
Class Component - render함수를 호출하고 그 안에서 Component return 👉🏻다른 컴포넌트에서 만들어 놓은 컴포넌트를 사용하고 싶을때는❓
💡Component 만들 때의 규칙
이름은 대문자로 시작!
Component의 return 값은 큰 하나의 Component로 감싸져 있어야 한다.
3. props
컴포넌트를 호출할 때, 상황에 따라 부모 컴포넌트에서 어떠한 값을 넘겨줘야 할 때 사용
💡 Function Component의 경우 함수의 인자로 props , Class Component의 경우 class 내부의 property로 받게 된다.
👉🏻Destructuring
구조화되어 있는 형태(배열, 객체 등)을 하나의 변수로 뽑아내기
const person = {
name : "juyeon",
age : 24
}
const name = person.name;
const age = person.age;
만약 더 많은 키 값을 가지고 있다면❓ : 변수를 많이 만들어야한다.
💡그래서 사용하는 방법이 destructuring!
const { name, age } = person;
console.log(name, age);
👉🏻위의 코드에 적용해보자!
4. state
Component 안에서 변하는 데이터 저장
👉🏻 Component 단위로 파일 분리하기
하나의 파일에서 하나의 객체 내보내기 불러오는 파일 : import 새로_받을_이름 from '내보낸_파일의_위치'; 내보내는 파일 : export default 내보낼_객체_이름;
하나의 파일에서 여러 개의 객체 내보내기 내보내는 파일 : export const 객체1; export const 객체2; 불러오는 파일 import {객체1, 객체2 } from '내보낸_파일의_위치';
