2025-07-27 06:59
Status:
리액트 컴포넌트
리액트 컴포넌트는 독립적이고 재사용가능한 코드 단위 중복 제거 하고 모듈화 한다는 점에선 함수와 비슷하지만, HTML 반환 반복 사용가능한 커스텀 html 태그를 만든다고 생각할 수도 있음
UI 구성 요소의 빌딩 블록 으로써 자체적으로 **기능적인 부분(로직과 상태)**과 디자인적인 부분 모두 가질 수 있음 다만 컴포넌트가 너무 커져서 복잡해질 경우 기능과 디자인 분리하는게 좋을때가 많음
과거엔 클래스형 컴포넌트로 구현했는데 너무 복잡해서 함수형 컴포넌트로 거의 다 넘어옴
컴포넌트의 핵심 개념
1. Props (속성)
- 부모 컴포넌트가 자식 컴포넌트에게 전달하는 데이터
- 자식은 읽기 전용으로 단방향 전달
2. State (상태)
- 컴포넌트 내부에서 관리되는 동적 데이터
- 상태가 변경되면 컴포넌트 리렌더링
3. JSX (JavaScript XML), TSX
- 자바스크립트 안에서 HTML 과 유사 문법 사용가능하게 해주는 구문 확장
- Babel에 의해 React.createElement() 호출로 변환