처음 만난 리액트 문서
5.7 마치며
이번 장에서 배운 내용은 아래와 같습니다.
- 리액트 컴포넌트
- 컴포넌트 기반 구조
- 작은 컴포넌트들이 모여서 하나의 컴포넌트를 구성하고, 또 이러한 컴포넌트들이 모여서 전체 페이지를 구성
- 개념적으로는 자바스크립트의 함수와 비슷
- 속성들을 입력으로 받아서 그에 맞는 리액트 엘리먼트를 생성하여 리턴함
- 컴포넌트 기반 구조
- Props
- Props의 개념
- 리액트 컴포넌트의 속성
- 컴포넌트에 전달할 다양한 정보를 담고 있는 자바스크립트 객체
- Props의 특징
- 읽기 전용(Read-Only)
- 리액트 컴포넌트의 props는 바꿀 수 없고, 같은 props가 들어오면 항상 같은 엘리먼트를 리턴해야 한다
- Props 사용법
- JSX를 사용할 경우 컴포넌트에 키-값 쌍 형태로 넣어주면 됨
- 문자열 이외에 정수, 변수, 그리고 다른 컴포넌트 등이 들어갈 경우에는 중괄호를 사용해서 감싸주어야 함
- JSX를 사용하지 않는 경우에는
createElement()함수의 두 번째 파라미터로 자바스크립트 객체를 넣어주면 됨
- Props의 개념
- 컴포넌트 만들기
- 컴포넌트의 종류
- 클래스 컴포넌트와 함수 컴포넌트로 나뉨
- 함수 컴포넌트
- 함수 형태로 된 컴포넌트
- 클래스 컴포넌트
- ES6의 클래스(class)를 사용하여 만들어진 컴포넌트
- 컴포넌트 이름 짓기
- 컴포넌트의 이름은 항상 대문자로 시작해야 됨
- 소문자로 시작할 경우 컴포넌트를 DOM 태그로 인식하기 때문
- 컴포넌트 렌더링
- 컴포넌트로부터 엘리먼트를 생성하여 이를 리액트 DOM에 전달
- 컴포넌트의 종류
- 컴포넌트 합성
- 여러 개의 컴포넌트를 합쳐서 하나의 컴포넌트를 만드는 것
- 컴포넌트 추출
- 큰 컴포넌트에서 일부를 추출해서 새로운 컴포넌트를 만드는 것
- 기능 단위로 구분하는 것이 좋고, 나중에 곧바로 재사용이 가능한 형태로 추출하는 것이 좋음
컴포넌트와 props 개념은 리액트를 통틀어서 가장 중요한 개념중에 하나이기 때문에 이해가 되지 않는 부분이 있다면 이해가 될 때까지 꼭 반복 학습을 하길 바랍니다.
마지막 업데이트: 2025년 08월 21일 08시 09분
이 문서의 저작권은 이인제(소플)에 있습니다. 무단 전재와 무단 복제를 금합니다.
On this page