*이 게시글은 인프런-처음 만난 리액트 강좌를 보고 정리한 글입니다.
목차
1. Component
2. Props
3. Props의 특징
4. Props의 사용법
5. Component 만들기
6. Component 렌더링
7. Component 합성
8. Component 추출
1. Component
리액트는 Component 기반구조라는 것을 배웠었다.
리액트는 모든 페이지가 컴포넌트로 구성돼있고 그 컴포넌트는 또다른 여러개 컴포넌트의 조합으로 이뤄져있다.
이런 식으로 레고 블록을 조립하듯 컴포넌트들을 모아서 개발할 수 있는 것이다
아래가 바로 컴포넌트로 페이지를 만든 하나의 예시이다.
리액트의 컴포넌트는 개념적으로는 자바스크립트의 함수와 비슷하다.
기본 메커니즘은 자바스크립트의 함수와 동일하지만 입, 출력이 조금 다르다.
리액트 컴포넌트에서 입력은 바로 다음에 배울 Props라는 것이고
출력은 앞에서 배운 React Element가 된다.
즉 리액트는 어떠한 속성을 입력받아서 그에 맞는 element를 생성하여 리턴해주는 것이다.
이는 마치 붕어빵틀을 통해 붕어빵을 만드는데 슈크림, 팥, 고구마등의 앙코(팥소)를 넣어서 각각의 붕어빵을 만드는 것과 비슷하다.
슈크림, 팥, 고구마 등의 앙코가 props(속성)
붕어빵틀이 Component
만들어진 붕어빵이 element인 것이다.
2. Props
props는 prop이 여러개인 것을 의미하는데 prop는 Property를 줄여서 쓴 것으로
속성이라는 의미이다.
바로 컴포넌트의 속성이다.
아래 붕어빵 그림을 보면 쉽게 이해할 수 있다.
앙코가 props인 것이다.
실제 예시로 Props를 알아보자.
위 컴포넌트를 A컴포넌트라고 하면 다 같은 컴포넌트에서 생성된 녀석들이지만 각기 다른 이미지와 텍스트를 가지고 있는 것은 아래와 같이 Props가 다르기 때문이다.
Props를 다시 정리하면 다음과 같다.
컴포넌트에 전달할 다양한 정보를 담고 있는 자바스크립트 객체인 것이다.
우리가 컴포넌트에 데이터를 전달하고 전달된 데이터에 따라 다른 모습의 엘리먼트를 렌더링하고 싶을 때 해당 데이터를 부모 컴포넌트에서 props에 넣어서 전달하는 것이다.
3. Props의 특징
1) 읽기전용(Read-Only)
읽기 전용이라는 것은 값을 변경할 수 없다는 것이다.
따라서 새로운 Props를 Component에 전달해줘야한다.
제대로 이해하기 위해서는 자바스크립트 함수의 속성에 대해 알아야한다
위의 함수는 입력값이 바로 return이 되므로 입력값이 바뀌지 않는다. 이런 것을 Pure(순수)하다고 한다.
아래의 함수는 입력값이 바뀌게 되므로 Impure(순수x)하다고 한다.
React의 공식 문서에는 다음과 같이 설명하는데
모든 리액트 컴포넌트는 Props를 직접 바꿀 수 없고
같은 Props에 대해서는 항상 같은 결과를 보여줘야한다는 의미이다.
4. Props의 특징
아래의 코드 같은 경우는 JSX코드인데
아래 그림과 같이
키=값 형태로 props를 넣을 수 있다.
App 컴포넌트가 나오고
그 안에 Profile 컴포넌트가 나오는데
그 컴포넌트의 Props의 값을 넣어주는 형태이다.
Props의 문자열 외의 값을 넣을 때(정수, 변수, 다른 컴포넌트)는 중괄호를 통해 감싸줘야한다.
props를 전달하면 아래와 같은 자바스크립트 객체가 된다.
그리고 다음과 같이 Props에 중괄호를 사용해 다른 컴포넌트도 넣을 수 있다.
JSX코드를 사용하지 않은 코드는 다음과 같다.
5. Component 만들기
리액트 컴포넌트는 아래 그림과 같이 Function Component(함수 컴포넌트)와 Class Component(클래스 컴포넌트)로 나뉜다.
리액트의 초기 버전에서는 Class Component를 많이 사용하였으나 쓰기 불편하다는 이야기가 많아 Function Component를 더 많이 사용하게 되었다.
함수 컴포넌트를 개선하는 과정에서 만들어진 것이 Hook이라는 개념이다.
1) 함수 컴포넌트
아래와 같은 형태가 함수 컴포넌트로 Welcome 컴포넌트 안에 저렇게 props에 name을 '바보'라고 키=값 형태로 props를 넣으면 {props.name}자리에 바보라고 출력되는 것을 볼 수 있다.
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<Welcome name="바보"/>
);
화살표함수로 나타내면 아래와 같이 쓸 수 있다.
const Welcome=(props)=>{
return <h1>안녕, {props.name}</h1>;
}
2) 클래스 컴포넌트
클래스 컴포넌트는 함수 컴포넌트에 비해서 몇가지 추가적인 기능을 가진다.
아래의 클래스 컴포넌트 코드는 위의 함수 컴포넌트와 동일한 기능을 수행한다.
모든 클래스 컴포넌트는 Component를 상속받아서 만들어진다.
아래와 같이 Component를 import시켜야 사용가능하다.
import {Component} from 'react';
*상속은 객체지향에서 나오는 개념으로 한 클래스에 변수들과 함수들을 상속받아서 새로 자식 클래스를 만드는 방법이다.
★컴포넌트를 만들 때 주의점
Component 이름은 항상 대문자로 시작해야한다
React는 소문자로 시작하는 component를 DOM 태그로 인식하기 때문이다.
6. Component 렌더링
아래 코드는
Welcome 함수 컴포넌트를 선언하고
element를 생성한 후 생성된 element를 root div태그에 렌더링을 한다.
따라서 name="인제"라는 props값이 props.name이 전달된다.
7. Component 합성
Component안에는 또 다른 Component를 쓸 수 있기 때문에 복잡한 화면을 여러 개의 Component로 나눠서 구현 가능하다.
아래는 Welcome 컴포넌트의 props를 다르게 해서 Welcome 컴포넌트를 여러번 사용하는 것을 볼 수 있다.
이렇게 여러개의 Component를 합쳐서 또 다른 Component를 만드는 것을 Component 합성이라고 한다.
아래와 같은 형태일때 App Component가 Welcome Component의 부모 컴포넌트인데
부모 컴포넌트에서 아래와 같이 props값을 설정할 수 있다.
8. Component 추출
component합성과는 반대로 복잡한 Component를 여러개의 Component로 쪼개는 것을 Component 추출이라고 한다.
Component 추출을 잘 활용하게 되면 재사용성이 올라가는데 컴포넌트가 작아질 수록 컴포넌트의 기능과 목적이 명확해지고 props도 단순해지기 때문에 다른 곳에서 사용할 수 있을 확률이 높아지기 때문이다.
재사용성이 올라가기 때문에 개발속도도 빨라진다.
아래 코드의 정확한 분석이 아닌 흐름만 봐보도록 하자.
아래와 같은 코드가 있다.
Component 추출을 해보자.
아래와 같이 Avator 컴포넌트로 추출을 했다.
아래와 같이 전보다 깔끔해진 것을 볼 수 있다.
마찬가지로 아래코드를 추출했다.
아래와 같이 코드가 직관적이고 가독성도 높게 바뀌었다.
최종적으로 아래와 같은 형태가 되었다.
참고문헌
'React' 카테고리의 다른 글
| 리액트로 영화 평점 웹서비스 만들기(클론코딩) 2탄 (0) | 2023.06.07 |
|---|---|
| 리액트로 영화 평점 웹서비스 만들기(클론코딩) 1탄 (0) | 2023.06.05 |
| 7. 리액트 입문-Elements가 뭘까 (0) | 2023.06.03 |
| 6. 리액트 입문-JSX가 뭘까 (0) | 2023.06.02 |
| 5. 리액트 입문-Create-react-app (0) | 2023.06.01 |