react 기초, jsx, 컴포넌트

TIL 22.06.07

jsx

함수 호출과 객체생성을 위한 문법적 편의를 제공하는 JS의 확장 파일

jsx장점

1.개발자 편의성 향상
2. 협업에 용이, 생산성 향상
3. 문법오류와 코드량 감소

jsx 특징

1. html태그 내에 JS 연산 가능
2. class 를 className로 표현해야함
3. 스타일을 오브젝트{}로 표현해야함
   style={{backgroundColor: green, color: yellow}}
4. 닫는 태그 필수
5. 최상단에 element가 반드시 하나 있어야한다.

component

1. react에서 페이지를 구성하는 최소 단위
2. 컴포넌트의 이름은 대문자로 시작 (HTML의 일반적인 태그와 구별하기 위함)
3. class컴포넌트, function컴포넌트로 나뉜다.
4. controlled 컴포넌트, uncontrolled 컴포넌트

컴포넌트 특징
1. 컴포넌트끼리 데이터를 주고받을 땐 props
2. 컴포넌트 내에서 데이터를 관리할 땐 state
3. 데이터는 부모->자식으로만 전달한다.