Components
리액트는 컴포넌트로 이루어져 있고
하나의 컴포넌트는 여러개의 컴포넌트의 조합으로 구성될 수 있다
리액트의 컴포넌트도 함수처럼 입력을 받아서 출력을 밷는다
하지만 입력과 출력이 일반적인 함수와는 조금 다르다
React Components 의 입력과 출력
입력: Props
출력: React element
리액트 컴포넌트의 역할은 어떠한 속성을 입력으로 받아서
그에맞는 리액트 엘리먼트를 생성하는 것
React Component : 붕어빵 '틀'
React Element : '붕어빵'
Props : 붕어빵 '재료'
마치 객체지향 같은 느낌
Props
Component의 속성
- 컴포넌트에 전달할 다양한 정보를 담고 있는 자바스크립트 객체
Props의 특징
read-only : 읽기 전용, 값을 변경할 수 없다
붕어빵 다구워졌는데 속재료 못 바꾸는 것처럼
모든 리액트 컴포넌트는 그들의 Props에 관해서는 Pure 함수 같은 역할을 해야한다.
모든 리액트 컴포넌트는 Props를 직접 바꿀 수 없고,
같은 Props에 대해서는 항상 같은 결과를 보여줘야 한다
Props의 사용법
Props에 값을 넣을떄 문자를 제외한 숫자나 변수, 컴포넌트를 넣을때는 중괄호{}를 넣어 감싸줘야 한다.
Component 만들기
function component vs class component
리액트 초기에는 class component를 많이 사용했지만
나중에는 function component가 발전된 hook이란 것을 사용한다
component의 이름은 항상 대문자로 시작해야 한다
소문자로 시작하면 DOM 태그로 인식한다 - div, span, ...
결국 컴포넌트의 목적은 재사용성이다.
반복되는 태그들을 하나로 묶어서 컴포넌트로 관리하고
반복되는 태그여도 다른 인자들은 Props를 통해 따로따로 주입시켜 주는것
