React Components and Props

 

Components

 

리액트는 Component-Based라는 중요한 특징이 있다는 것을 배웠다

 

=> 모든 페이지가 컴포넌트로 구성되어 있고 하나의 컴포너트는 또 다른 여러개의 컴포넌트의 조합으로 구성될 수 있다

 

이렇게 하나의 컴포넌트를 반복적으로 사용함으로써 전체 코드의 양을 줄일 수 있어서 자연스레 개발 시간과 유지보수 비용도 줄일 수 있다!

 

React component는 JavaScript의 함수와 같은 역할을 한다고 생각하면 되는데 입력과 출력값이 다르다

 

 

React Component에서 입력은 props이고 출력은 React element이다!

 

=> 어떤한 속성들을 입력받아 그에 맞는 리액트 엘리먼트를 생성하여 리턴해주는 것이다

(element는 자바스크립트 객체 형태로 존재하면 화면에 보이는걸 기술함)

 

 

Props

 

Props는 Property를 줄인 말이다!

 

=> React Component의 속성을 나타낸다

 

airbnb 홈페이지

 

airbnb 화면을 보면 같은 모양을 한 3개의 블록이 존재하고

그 안에는 각각 다른 그림과 글자가 담겨있다

 

이것을 React 컴포넌트의 관점에서 보면 3가지 모두 다 같은 컴포넌트에서 생성된 element라고 할 수 있다

 

=> 각기 다른 이미지와 텍스트를 가지고 있는 것은 Props로 설명할 수 있음

 

이러한 컴포넌트의 모습과 속성을 결정하는 것이 바로 Props이고

Props는 컴포넌트에 전달할 다양한 정보를 담고 있는 자바스크립트 객체이다!

 

Props의 특징

 

Read-Only

 

읽을 수만 있고 변경할 수 없음

 

=> Props의 값은 React 컴포넌트가 엘리먼트를 생성하기 위해서 사용하는 값이기 때문에 엘리먼트를 생성하는 도중에 바뀌면 안됨!

 

📌그렇다면 다른 Props 값으로 엘리먼트는 생성하려면?

 

=> 새로운 값을 컴포넌트에 전달하여 새로 엘리먼트를 생성하고 이 과정에서 엘리먼트가 다시 렌더링됨

 

리액트 공식 홈페이지에는
"모든 리액트 컴포넌트는 그들의 Props에 관해서는 Pure 함수 같은 역할을 해야한다"
와 같이 적혀있다

 

 

여기서 Pure 함수란 

function sum(a, b) {
  return a + b;
}

 

입력값(input)을 변경하지 않으며, 같은 입력값에 대해서는 항상 같은 출력값(output)을 리턴한다는 의미이다!

 

그럼 리액트 공식 홈페이지에 있는 저 말의 뜻은

 

모든 리액트 컴포넌트는 Props를 직접 바꿀 수 없고, 같은 Props에 대해서는 항상 같은 결과를 보여줘야 한다는 뜻이다

 

Props 사용법

 

JSX를 사용할 때

function App(props) {
  return (
    <Profile
      name="한준교"
      introduction="안녕하세요, 한준교입니다."
      viewCount={1500}
    />
  );
}

 

JSX를 사용하는 경우에는 이 코드와 같이 키와 값으로 이루어진 키,값 쌍의 형태로 컴포넌트에 props를 넣을 수 있다

 

=> 이 코드에는 app 컴포넌트가 나오고 그 안에서 profile 컴포넌트를 사용하고 있다

 

props에 값을 넣을 때에도 문자열 이외에 정수, 변수 그리고 다른 컴포넌트 등이 들어갈 경우 중괄호를 사용해서 감싸주어야 함

 

이렇게 하면 이 속성의 값들이 모두 Profile 컴포넌트의 props로 전달되며 props는

 

{
  name: "한준교",
  introduction: "안녕하세요, 한준교입니다.",
  viewCount: 1500
}

 

이와 같은 형태의 자바스크립트 객체가 된다!

 

JSX를 사용하지 않을 때

 

React.createElement(
  Profile,
  {
    name: "한준교",
    introduction: "안녕하세요, 한준교입니다.",
    viewCount: 1500
  },
  null
);

 

type은 컴포넌트 이름인 Profile이 들어가고 props로 자바스크립트 객체가 들어갔으며

마지막으로 하위 컴포넌트가 없기 때문에 children에는 null이 들어갔다

 

Component 만들기

 

React Component는 크게 Function Component와 Class Component로 나뉘는데

리액트 초기 버전에서는 클래스 컴포넌트를 주로 사용했지만 사용하기 불편하다는 의견이 많이 나와

함수 컴포넌트를 개선해서 주로 사용하게 되었다!

 

=> 함수 컴포넌트를 개선하던 도중 개발된게 Hook이다!

 

Function Component

 

function Welcom(props) {
  return <h1>안녕, {props.name}</h1>;
}

 

 이 함수의 경우 하나의 props 객체를 받아서 인삿말이 담긴 React 엘리먼트를 리턴하기 때문에 React 컴포넌트라고 할 수 있다 

 

=> 이렇게 생긴걸 함수 컴포넌트라고 함

(간결한 코드가 장점)

 

Class Component

 

클래스 컴포넌트의 경우에는 함수 컴포넌트에 비해서 몇 가지 추가적인 기능을 갖고있다

 

class Welcom extends React.Component {
  render() {
    return <h1>안녕, {this.props.name}</h1>;
  }
}

 

React의 모든 Class Component는 React.Component를 상속받아서 만든다

 

=> 위 코드에서는 React.Component를 상속받아 Welcom 클래스를 만들었기 때문에 결과적으로는 리액트 컴포넌트가 됨!

 

Component 이름

 

1. Component 이름은 항상 대문자로 시작해야 함!

 

=> React는 소문자로 시작하는 컴포넌트를 DOM 태그로 인식하기 때문

 

HTML div 태그로 인식

const element = <div />;

 

=> DOM 태그들은 div, h1, span 등 처럼 모두 소문자로 시작한다

 

Welcom이라는 리액트 Component로 인식

const element = <Welcome name="인제" />;

 

 

=> 만약 소문자로 시작했다면 (welcome) 리액트는 내부적으로 이것을 DOM 태그로 인식하여 에러가 발생하거나 원하는 대로 결과가 나오지 않게 된다

 

Component 렌더링

 

실제로 컴포넌트가 화면에 렌더링 되는 것은 아님!

 

=> 컴포넌트로부터 엘리먼트를 만들어 이 엘리먼트가 실제로 화면에 보이게 되는것임

 

function Welcom(props) {
  return <h1>안녕, {props.name}</h1>;
}

const element = <Welcom name="인제" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

 

위 코드를 살펴보면 Welcome이라는 함수 컴포넌트를 정의하고 있고

name="인제" 라는 props를 사용하여 element를 만든 후 생성된 element는 최종적으로 ReactDOM을 통해 실제 DOM에 효과적으로 업데이트 되고 우리가 브라우저를 통해서 볼 수 있게 된다!

 

Component 합성

 

Component 합성은 여러 개의 Component를 합쳐서 하나의 Component를 만드는 것이다

 

리액트에서는 하나의 컴포넌트안에 또 다른 컴포넌트를 쓸 수 있기 때문에 복잡한 화면을 여러 개의 컴포넌트로 나눠서 구현할 수 있다

 

Component 추출

 

큰 Component에서 일부를 추출해서 새로운 Component를 만드는 것이다

 

=> 컴포넌트 추출을 잘 활용하면 재사용성이 올라가며 개발속도도 향상된다!

(재사용 가능한 Component를 많이 갖고 있을수록 개발 속도가 빨라지므로)

 

컴포넌트를 어느 정도 수준까지 추출해야하는지 정해진 기준은 없지만 기능 단위로 구분하는 것이 좋고 나중에 곧바로 재사용이 가능한 형태로 추출하는 것이 좋다!