React Component와 props

Component

Component는 UI의 여러 부분을 분할해서 코드의 재사용성과 유지 보수성을 향상시킨다.
즉, 컴포넌트는 독립적으로 재사용 가능한 코드로 관리할 수 있도록 도와준다.

웹페이지를 하나의 완성품이라고 했을 때, 컴포넌트는 하나의 부품이다. 웹페이지가 특히 복잡할수록 각 컴포넌트로 나누어 관리한다면 유지 보수가 필요할 때에 전체를 건드리지 않고 해당 컴포넌트만 수정하면 된다. 또는 컴포넌트를 조립하듯이 만들 수 있어 재상용성이 향상된다.

Component 생성

Just like in their names, a functional component is just a plain JavaScirpt function that returns JSX. A class component is a JavaScirpt class that extends React.Component which has a render method.
functional component는 단지 JSX를 return하는 JavaScript 함수이다.
class component는 React.Component를 확장시키고 render 메소드를 가지는 JavaScript class 이다.

1. Function

import React from "react";

const FunctionalComponent = () => {
	return <h1>Hello, world</h1>;
};

functional component는 JSX를 리턴하는 자바스크립트의 함수라고 생각하면 된다.
위의 코드처럼 함수형 컴포넌트는 함수처럼 선언되고 JSX를 리턴하고 있다.

2. Class component

import React, { Componet } from "react";

class ClassComponent extends Component {
	render(){
    	return <h1>Hello, world</h1>;
    }
}

class component는 렌더 메소드를 가진 React.Component를 확장시키는 자바스크립트의 클래스이다.
위의 코드처럼 먼저 Component를 확장하는 클래스를 만들어주어야 한다. 그리고 렌더링될 JSX는 렌더 메소드 안에서 리턴된다.

props

컴포넌트를 사용할 때 원하는 attribute를 추가할 수 있다. 기존 javascript의 인자값이라고 생각하면 된다.

렌더링 예시

const element = <Welcom name="Sara" />;

React가 사용자 정의 컴포넌트로 작성한 엘리먼트를 발견하면 JSX 어트리뷰트와 자식을 해당 컴포넌트에 단일 객체로 전달합니다. 이 객체를 "props"라고 합니다.

function Welcome(props){
	return <h1>Hello, {props.name} </h1>;
}

const element = <Welcome name="Sara" />;
ReactDOM.render(
	element, document.getElementById('root')
);

위 예시 순서

1. 엘리먼트로 ReactDOM.render()를 호출합니다.
2. React는 {name: 'Sara'}를 props로 하여 Welcome 컴포넌트를 호출합니다.
3. Welcome 컴포넌트는 결과적으로 <h1>Hello, Sara</h1> 엘리먼트를 반환합니다.
4. React DOM은 <h1>Hello, Sara</h1> 엘리먼트와 일치하도록 DOM을 효율적으로 업데이트합니다.

컴포넌트 이름은 항상 대문자로 시작합니다.
React는 소문자로 시작하는 컴포넌트를 DOM 태그로 처리합니다. 예를 들어 <div />는 HTML div 태그를 나타내지만, <Welcome />은 컴포넌트를 나타내며 범위 안에 Welcome이 있어야 합니다.

props는 읽기 전용

함수 컴포넌트나 클래스 컴포넌트 모두 컴포넌트의 자체 props를 수정해서는 안됩니다.

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

이런 함수들은 순수 함수라고 호칭합니다. 입력값을 바꾸려 하지 않고 항상 동일한 입력값에 대해 동일한 결과를 반환하기 때문입니다.

반면 다음 함수는 자신의 입력값을 변경하기 때문에 순수 함수가 아닙니다.

function withdraw(account, amount){
	account.total -= amount;
}

React는 매우 유연하지만 한 가지 엄격한 규칙이 있습니다.
모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 합니다.