React Components와 Props

※ Components

- 컴포넌트는 React 엘리먼트를 반환합니다.

- UI를 재사용 가능한 개별적인 조각으로 나눕니다.(부품화)

- 컴포넌트의 이름은 항상 대문자로 시작해야 합니다.

* React는 소문자로 시작하는 태그를 DOM태그로 인식하고, 대문자로 시작해야만 컴포넌트로 인식합니다.

예를 들어 <div/>는 HTML DOM 태그를 나타내고, <Welcome />은 컴포넌트를 나타냅니다.

- props라고 하는 임의의 값을 입력받아 화면에 표시합니다.

- 컴포넌트에는 함수와 클래스 컴포넌트 두 가지가 있습니다.

- 이전까지는 DOM 태그만을 이용해 React 엘리먼트를 생성했으나, 사용자 정의 컴포넌트로도 엘리먼트를 생성할 수 있습니다. 생성 방법은 아래와 같습니다. 

 

※ Components 생성 방법

1. 함수형 컴포넌트

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

const element = <Welcome name="HyePark"/>;

ReactDOM.render(
    element,
    document.getElementById('root')
);

2. 클래스형 컴포넌트

class Welcome extends React.Component {
    render() {
        return <div>Hello, {this.props.name}</div>;
    }
}

화면 확인용.

React에서는 아래와 같은 과정을 거쳐 화면을 그려줍니다.

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

- 컴포넌트 재사용(컴포넌트를 포함하는 컴포넌트 생성가능)

/*function Welcome(props) {
    return <div>Hello, {props.name}</div>;
}*/
class Welcome extends React.Component {
    render() {
        return <div>Hello, {this.props.name}</div>;
    }
}

function Welcomes() {
    return (
        <div>
            <Welcome name="q"/>
            <Welcome name="a"/>
            <Welcome name="z"/>
        </div>
    );
}

ReactDOM.render(
    <Welcomes/>,
    document.getElementById('root')
);

 

---

※ props

- props는 읽기 전용입니다. (수정 불가)

- props는 순수 함수처럼 동작해야 만 합니다.

props에 대해 설명하기 전에 순수 함수와 아닌 것에 대해 알아야 합니다.

* 순수 함수란 : 입력값을 바꾸려 하지 않는 것입니다.

// 아래는 순수 함수(입력 값을 그대로 사용)
function sum(a, b) {
  return a + b;
}
// 아래는 순수 함수가 아닌 것(입력 값을 변경하여 사용하려 함)
function withdraw(account, amount) {
  account.total -= amount;
}

 

- props의 기본값을 설정할 수 있습니다.

자식 class 내에 static defaultProps = {}를 선언하여 가능합니다.

아래 예제 코드를 보면, <Welcome /> 컴포넌트에 name props를 전달하지 않았을 경우, 'empty'로 출력되어 나오는 것을 볼 수 있습니다.

class Welcome extends React.Component {
    static defaultProps = {
        name : 'empty'
    }

    render() {
        return <div>Hello, {this.props.name}</div>;
    }
}

function Welcomes() {
    return (
        <div>
            <Welcome />
            <Welcome name="a"/>
            <Welcome name="z"/>
        </div>
    );
}

ReactDOM.render(
    <Welcomes/>,
    document.getElementById('root')
);

화면 결과

 

이전 글 : 2021.10.31 - [UI/React] - React Element Rendering / React 엘리먼트 렌더링

React Element Rendering / React 엘리먼트 렌더링

다음 글 : 2021.11.04 - [UI/React] - React state와 props 차이점 / React props와 state 차이점

React state와 props 차이점 / React props와 state 차이점