Components and Props(매우 중요함니다^^7)
Component - 리액트는 컴포넌트 기반이다.
레고블록조립하듯 컴포넌트들을 모아서 개발한다!
위의 경우 A와 B 컴포넌트를 구성하였는데
같은 컴포넌트를 반복적으로 구성함으로써 전체적인 코드의 양을 줄일수있다~!
-> 개발시간과 유지보수 비용도 줄어드는 효과를 볼 수 있다.
개념적으로는 JavaScript의 함수와 비슷하다고 볼 수 있다.
근데 조금 다름 ㅇㅇ
입출력은 다음과 같다!
리액트 컴포넌트가 해주는 일은
속성들을 받아서 리액트 엘리먼트로 바꿔주는 일이다..
붕어빵 재료를 받아서 붕어빵을 만들어주는 붕어빵 틀과 매우 유사하다!!라고 볼 수 있다~
이는 객체지향 프로그래밍에서 나오는 class와 Instance와 유사하다
Component => Class, Element => Instance
+)객체지향에 대한 공부를 해보고 싶달까?
그럼 Props는 뭘까?
-> Property : 속성
=> Component의 속성이다!
Prop에 따라 민트초코맛, 초코맛, 슈크림이 될수이씀이야 ㅇㅇ
그러니까 즉 Prop은 말이지
'컴포넌트에 전달할 다양한 정보를 담고 있는 자바스크립트 객체'
라고 할 수 있다!!!!!!
Props의 중요한 특징은 - Read-Only이다. -> 값을 변경 할 수 없다.
엘리먼트를 생성하는 중에 변경되어버리면 안된다.
붕어빵이 다 구워졌는데 속 재료를 바꿀 수 없다.
즉 변경이 필요할 땐 컴포넌트에 새로운 속성을 부여하여 새로운 엘리먼트를 만들어내야한다.
먼저 JS함수의 속성에 대해 짚고 넘어가보자 하면,,
'pure한 경우'
'Impure한 경우'
그렇다면 리액트 컴포넌트에 들어오는 props는 이래야한다...
헷갈릴 땐 불변성!
컴포넌트는 Props는 바꿀 수 없다!
같은 Props에 대해서는 같은 Element가 나와야한다!
정도로 이해하자
Props사용법
jsx
보면 view count함수에 들어간 값은 중괄호 처리됨(JS코드)
위와 같이 Props에 문자, 정수 변수 들어갈때 중괄호로 넣어주면
Profile에 JScode형태의 Props로 전달된다.
요런 JS객체가 된다
Props에 컴포넌트도 다음과 같이 넣을 수 있다.
Layout컴포넌트에 Props를 넣은 것을
Props에 넣을 수 있다는것
그럼 JSX가 아닌경우?
그냥... 참고만하고 JSX쓰자,,
리액트 컴포넌트는 다음과 같이 구성댐
위 함수 컴포넌트를 개선하는 과정에서 생긴게 훅(Hook)이라는 것인데
그렇다고 위 컴포넌트를 무시하라는 것은 아님,
대부분 훅 쓰긴함
Function Component
React의 컴포넌트를 일종의 함수로 생각한다는 것입니다.
프롭스 받아와서 인사해주는 함수
간단한 코드가 함수컴포넌트의 장점이다.
Class Component
가장 큰 차이는
리액트의 모든 클래스 컴포넌트는 React.Component를 상속받아 만듦
한 클래스의 변수와 함수를 상속받아서 새로운 자식클래스를 만드는 방법임
여기서는 React.Component를 상속받아서 Welcome이라는 클래스를 만들었다
이는 React.Component를 상속받았기 때문에 결과적으로 리액트 Component가 된다는 것임
이상 Component의 종류에 대해 알아봤으니
이름을 지어보자
Component 이름은 항상 대문자로 시작해야한다.
리액트는 소문자로 시작하는 컴포넌트를 DOM Tag로 인식함
Component 렌더링
,,
Component 합성
여러개의 컴포넌트를 합쳐서 새로운 컴포넌트를 만드는것이다.
Component 안에 또 다른 Component를 쓸 수 있다.
-> 복잡한 화면을 여러개의 Component로 나눠서 구현할 수 있다!
아래 예시를 보면
App Component는 Welcome Component를 세번사용하는 컴포넌트이다.
아래와 같은 느낌이라고 할 수 있다..
합성과 반대로 추출이라는 방식도 존재하는데,,,,
복잡한 컴포넌트를 나눠서 여러개의 컴포넌트로 만들 수도 있다!
이렇게 되면 컴포넌트의 재 사용성이 증가한다.
왜냐면 컴포넌트가 작아질 수록 해당 컴포넌트의 목적과 기능이 명확해지고
Prop도 단순해지기 때문에 다양한 곳에서 활용할 확률이 높아진다
재사용성이 늘어남으로써 개발속도도 향상된다.
아래코드를 통해서 분석해보자..
오른쪽이 props
- Avatar 추출하기
저 빨간박스를 추출할 거임
추출된거
재사용성 측면에서 author를 좀 더 보편적으로 사용되는 user로 변경함.
이렇게 추출된 컴포넌트를 다시 포함시켜주자
좀 더 코드의 가독성이 높아진 것을 볼 수 있다.
다음으로는 User Info 추출
해당 부분을 추출해서 별도의 컴포넌트로 만들면..
위의 아바타도 같이 추출됨
반영하면 아래와 같다
더 간결해짐
컴포넌트 구조는 대략 아래와 같다.
+요약
재사용이 가능한 컴포넌트가 많을수록 개발속도증진에 효과적이다~!
