React?

리액트는 사용자 정의 태그를 만드는 기술이다.

"react rule" : 이름은 대문자, return 값은 단일 태그여야한다.

build : 배포판으로 만들어주는 과정(용랑⬇️ 성능⬆️ 해주는 튜닝 과정)
🌱배포방법 : npx serve -s build

Component (컴포넌트)

데이터(props)를 입력받아 View(state)상태에 따라 DOM Node를 출력하는 함수이다.
❗️규칙
항상 대문자로 시작한다.
독립적인 기능이여야 한다.
재사용이 가능해야한다.

컴포넌트예시로는 carrot마켓에 판매자들이 올려놓은 글을 보면 알 수 있다.
한 컴포넌트 내에 같은이미지사이즈, 같은 텍스트 형식들을 한 컴포넌트로 독립적이게 만든다면 재사용성을 높일 수 있어 유지보수하기 편하다.

Stateless Functional Component(함수형 컴포넌트)

• 자바스크립트 함수를 작성하는 방식이다.

import React from 'react';
function MyComponent(props){
	return <>Hello, {props.name}</>
}

Class Component(클래스형 컴포넌트)

컴포넌트 구성 요소, 리액트 생명주기를 모두 포함하고 있다.
함수형 컴포넌트에 비해서 살짝 복잡하기때문에 잘 쓰이지는 않지만 함수형 컴포넌트가 해결하지 못하는 작업을 처리할 때가 있기때문에 둘다 알아야한다.

Props? State? 무슨 차이???😫

한줄표현
=> props(읽기전용)는 컴포넌트안에서 변경이 불가능하다. 내부에서 변경기능이 필요한데 이때 state속성을 이용하면된다. 그게 바로 함수형컴포넌트에서 사용하는 useState 이다.

Props	State
불변의 데이터	가변 데이터
부모로부터 전달이 됨	구성 요소에 의해 유지
변경 불가	변경 가능

State

Component의 데이터 상태이다.
즉, 개발자가 정의한 변경 가능한 데이터를 의미하며 이는 자바스크립트 객체로 존재한다.
데이터변경이 가능하지만 꼭 setState를 이용해서 코드를 작성해줘야한다.

Props

부모가 자식에게 전달이 되는 데이터이다. 즉, 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용한다. (단방향) 수정할 수 없다. 왜냐 자식이기때문에 읽기전용일뿐!