섹션 5. Components and Props (★☆굉장히 중요☆★)
1강 : Components와 Props의 정의
1. Component
- React Component는 개념적으로는 자바스크립트의 함수와 비슷
입력(Parameter) → JavaScript Function → 출력
입력(Props) → React Component → 출력
- 실제로는 : Props → React Component → React element(리액트 앱을 구성하는 가장 작은 블록)
- 어떠한 속성들을 입력으로 받아서 그에 맞는 리액트 엘리먼트를 생성하여 리턴
붕어빵 틀을 갖고 있다면 계속해서 붕어빵을 만들 수 있는 것처럼, 컴포넌트가 있다면 엘리먼트를 계속해서 만들어낼 수 있다.
2. Props(Prop이 여러 개)
Prop : Property(속성)
- React Component의 속성을 말함.
붕어빵에서 Props는 붕어빵의 재료라고 볼 수 있음.
같은 React 컴포넌트에서 눈에 보이는 글자나 색깔 등의 속성을 바꾸고 싶을 때 사용하는 컴포넌트의 속재료
Props는 컴포넌트에 전달할 다양한 정보를 담고 있는 자바스크립트 객체이다.
2강. Props의 특징
- Read-only : 읽을 수만 있다. 값을 변경할 수 없다.
붕어빵이 다 구워진 이후에 속재료를 바꿀 수 없는 것과 마찬가지
변경하고 싶다면 새로운 값을 컴포넌트에 전달하여 새로 Element를 생성해야 한다.
JavaScript 함수의 속성
- Pure 하다 : 입력값(input)을 변경하지 않으며, 같은 입력값에 대해서는 항상 같은 출력값(output)을 리턴한다.
- Impure : 입력값(input)을 변경
Component의 특징
: 모든 리액트 컴포넌트는 그들의 Props에 관해서는 Pure 함수 같은 역할을 해야 한다.
- = 모든 리액트 컴포넌트는 Props를 직접 바꿀 수 없고, 같은 Props에 대해서는 항상 같은 결과(엘리먼트)를 보여줘야 한다!
정리) React 컴포넌트의 Props는 바꿀 수 없고, 같은 Props가 들어오면 항상 같은 엘리먼트를 리턴
Props 사용법
중괄호{}를 사용하면 무조건 JavaScript 코드가 들어가는 것이다.
Props에 값을 넣을 때에도 문자열 이외에 정수, 변수 그리고 다른 컴포넌트 등이 들어갈 경우에는 중괄호를 사용해서 감싸주어야 한다.
Props의 중괄호를 사용해서 Props의 값으로 컴포넌트도 넣을 수 있다.
JSX를 사용하는 형태로 쓰는 것이 가장 좋다.
3강. Component 만들기 및 렌더링
Component는 Function Component와 Class Component로 나뉜다.
1. Function Component
하나의 Props 객체를 받아서 React 엘리먼트를 리턴 = React 컴포넌트
2. Class Component
JavaScript ES6의 Class라는 것을 사용해서 만들어진 형태의 컴포넌트
상속 : 객체지향 프로그래밍에서 한 클래스의 변수들과 함수들을 상속받아서 새로운 자식 클래스를 만드는 방법
Component의 이름은 항상 대문자로 시작해야 한다!
- 소문자로 시작하는 컴포넌트는 DOM 태그로 인식한다.
밑에 걸 소문자로 썼으면 HTML의 DOM 태그로 인식했을 것
Component 렌더링
- 컴포넌트라는 붕어빵 틀을 통해 찍어져서 나온 엘리먼트라는 붕어빵이 실제로 화면에 보이게 되는 것
4강. Component 합성과 추출
1. Component 합성
여러 개의 컴포넌트를 합쳐서 하나의 컴포넌트를 만드는 것
리액트에서는 컴포넌트 안에 또 다른 컴포넌트를 쓸 수 있다.
2. Component 추출
컴포넌트 합성과 반대로 복잡한 컴포넌트를 쪼개서 여러 개의 컴포넌트로 나누는 것
잘 활용하면 컴포넌트의 재사용성이 올라간다.
- 컴포넌트가 작아질수록 해당 컴포넌트의 기능과 목적이 명확해지고 props도 단순해져서 다른 곳에서 사용할 수 있는 가능성이 올라감.
- 재사용성이 올라가면 개발 속도가 올라감
1) Avatar 추출하기
보편적인 단어 사용 : 재사용성 측면을 고려하는 것(다른 곳에 들어가도 문제없이 적용되도록)
2) UserInfo 추출하기
컴포넌트 추출 수준의 기준은 없다. 하지만, 기능 단위로 구분하는 것이 좋고 나중에 곧바로 재사용이 가능한 형태로 추출하는 것이 좋다.
재사용이 가능한 Component를 많이 갖고 있을수록 개발 속도가 빨라진다!
5강. (실습) 댓글 컴포넌트 만들기
1. Comment Component 만들기
개발자들이 '왜 에러가 없지'라고 말하는 게 무슨 느낌인지 알겠다.
2. Comment Component에 스타일 입히기
작성자 이름과 댓글 내용 달기
3. Comment Component에 Props 추가하기
코멘트 컴포넌트에 표시되는 작성자 이름과 댓글 내용을 동적으로 변경할 수 있게 하기 위해 props 추가
4. Comment 데이터를 별도의 객체로 분리하기
댓글 데이터를 별도의 객체로 분리해서 동적으로 받아온 데이터를 표시할 수 있는 구조로 만들기
느낀 점
에러가 있을까 없을까 두근두근하는 것도 재밌었다. 그리고 필자가 쓰고 싶어 하는 댓글을 그냥 만들어보니까 뭔가 재밌었다. 이번에는 챗GPT의 도움 없이 에러를 잡았다.
나 설마 개발에 재능 있는지도..?!
이러다가 나중에 개발한테 두들겨 맞고 울며 코딩하는 내 모습이 그려졌다.
그래도 지금은 재밌다!
