Component 의 Props 와 State

Componet

리액트는 화면에서 UI 요소를 구분할 때 '컴포넌트'라는 단위를 사용합니다. 쉽게 말하면 리액트에서 앱을 이루는 가장 작은 조각이라고 할 수 있고, 레고 블록으로 집을 쌓게 된 경우 하나의 블록이 '컴포넌트'라고 할 수 있습니다. 컴포넌트는 새로운 컴포넌트를 생성할 수 도 있고, MVC의 뷰를 독립적으로 구성하여 재사용할 수 있습니다. 리액트의 중요한 핵심인 '컴포넌트'에는 함수 컴포넌트, 클래스 컴포넌트 2가지가 있습니다. 

 

• 컴포넌트 구성 요소 

1) property(props) 

- 부모 컴포넌트에서 자식 컴포넌트에 전달되는 데이터입니다. 프로퍼티값은 자식 컴포넌트에서 수정할 수 없습니다. 

2) state

- 컴포넌트의 상태를 저장하고 수정 가능한 데이터입니다. 

3) context 

- 부모 컴포넌트에서 생성하여 모든 자식 컴포넌트에게 전달하는 데이터입니다. 

 

Class형 컴포넌트

클래스 컴포넌트는  자바스크립트의 "클래스" 기반 컴포넌트로, class로 정의하고

render() 함수에서 jsx 코드를 반환합니다. 

import React, { Component } from 'react';

class Hello extends Component {
  render() {
    const { color, name, isSpecial } = this.props;
    return (
      <div style={{ color }}>
        {isSpecial && <b>*</b>}
        안녕하세요 {name}
      </div>
    );
  }
}

Hello.defaultProps = {
  name: '이름없음'
};

• 클래스 컴포넌트 특징 

1) class 키워드로 클래스 컴포넌트 생성
2) React.Component 상속

React의 ComponentClass를 상속받아  Component 상속이 필요해요. 

3) render () 메서드 필수로 사용  

 클래스 컴포넌트 안에 render() 메서드가 꼭 필요하고 메서드 안에 JSX 를 리턴합니다. 

4) this 키워드 사용하기 

state, props, refs,컴포넌트 메서드, 생명주기 메서드를 사용할 때 this로 프로퍼티를 참조하여 사용합니다

 

 

함수형 컴포넌트

자바스크립트 함수를 선언하듯이 function 으로 컴포넌트를 정의하고, return 문에 JSX 코드를 반환합니다.

import React from 'react';


export default function Hello({color, name, isSpecial}) {
    return (
      <div style={{ color }}>
        {isSpecial && <b>*</b>}
        안녕하세요 {name}
      </div>
    );
}

• 함수 컴포넌트 특징

1) Hooks

과거에는 함수형 컴포넌트가 state, 라이프사이클을 지원하지 않았기 때문에 클래스형 컴포넌트를 많이 사용했지만, React v16 이후부터 Hooks를 통한 state 및 LifeCycle 관리가 가능해져 리액트에서 공식적으로 함수형 컴포넌트 사용을 권장합니다. Hook의 useState를 사용해 state 를 관리할 수 있고, useEffect를 사용해 LifeCycle 을 관리할 수 있어요. 

2) 직관적인 코드   

자바스크립트의 함수(function) 선언, 화살표 함수를 그대로 사용해 컴포넌트를 사용 가능하기 때문에 개발자에게 직관적입니다. 

3) 메모리 자원 효율 

클래스형 컴포넌트에 비해 함수형 컴포넌트가 비교적 메모리 자원을 적게 사용합니다. 

 

State

State는 한 컴포넌트 안에서 유동적인 데이터를 다룰 때 사용되며, 컴포넌트 안에서 데이터를 변경할 수 있습니다. 즉, State는 한 컴포넌트의 상태(State)를 나타냅니다

state를 사용하는 방식에는 컴포넌트의 종류에 따라 2가지가 있습니다. 클래스형 컴포넌트에서는 컴포넌트 자체가 state를 지니는 방식으로 사용하며. 함수형 컴포넌트에서는 useState라는 함수, Hook을 통해 사용합니다

.

 

Props

Props(Properties)는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터를 말합니다.

부모 컴포넌트로부터 받는 데이터이므로 자식 컴포넌트에서는 변경할 수 없습니다. 이것을 Prop Drilling 이슈라 부르며 Redux와 같은 전역 상태 관리 라이브러리로 해결할 수 있습니다.

 

props는 읽기 전용입니다.

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

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

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

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

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

모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 합니다.

 

출처:https://ko.reactjs.org/docs/components-and-props.html

https://velog.io/@soyi47/React-Component-props-state

https://dev-yakuza.posstree.com/ko/react/props-state/