[React] Component, props, state (부제: 함수형, 클래스형 컴포넌트)

그러면 React에서 데이터를 사용할 때 다루는 개념인 props와 state 에 대해서 알아보기에 앞서

Component의 역할과 개념은 무엇이고 클래스형 컴포넌트와 함수형 컴포넌트의 차이는 무엇인지 알아보자

 

Component

• 컴포넌트는 UI를 재사용 가능한 개별적인 여러 조각으로 나눈다.
• props라는 입력을 받은 후, 화면에 어떻게 표시되는지 기술하는 React 엘리먼트를 반환
• 엘리먼트는 일반 객체로 React 앱의 가장 작은 단위다. 엘리먼트는 컴포넌트의 구성요소이다.
• 컴포넌트를 선언하는 방식에는 함수형 컴포넌트와 클래스형 컴포넌트가 있다.

 

Class Component

class Welcome extends React.Component {
    render() {
        return <h1>Hello</h1>;
    }
}

• 클래스형 컴포넌트는 React.Component 클래스를 상속 받는 것으로 기본 형태를 갖춘다.
• 컴포넌트는 JSX 문법을 반환해야하는데 클래스는 return 문을 사용할 수 없으므로, 클래스형 컴포넌트에서는 JSX문법을 반환하기 위해 render() 함수를 사용한다. 리액트는 클래스형 컴포넌트의 render() 함수를 자동으로 실행시킨다.

Function Component

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

• 함수형 컴포넌트는, props로 받을 객체 인자를 정의하고, JSX를 반환하는 것으로 기본 형태를 갖춘다.
• 함수형 컴포넌트에서는 return문에서 JSX를 반환할 수 있다.

 

 

props , state

props

• 컴포넌트는 데이터를 가진 하나의 'props' 객체 인자를 받은 후 React 엘리먼트를 반환한다.
• props는 컴포넌트에서 컴포넌트로 전달하는 데이터다. 컴포넌트 속성으로 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서만 설정이 가능하다.

 

props 지정하기

props는 <ComponentName prop1 = {} prop2 {} ....></> 형태로 컴포넌트를 부를 때 함께 지정한다.

<Person name="Jane" age={10} />
<Person name="Harry" age={8} />

위 코드와 같이 같은 타입의 컴포넌트에 다른 props 값을 주어, 패턴이 반복되는 형태로 컴포넌트의 효율적인 재사용이 가능하며 props 에는 boolean , 숫자, 배열 등 다양한 형태의 데이터를 담을 수 있다. 공백 구분으로 여러 개를 담는 것도 가능하다. 

* props에 있는 데이터는 문자열인 경우를 제외하면 모두 중괄호 {} 로 값을 감싸야한다.

 

 

props 사용하기

props는 읽기 전용이므로 컴포넌트의 내부에서 props를 수정해서는 안된다.

입력값을 수정하지 않는 함수를 순수함수라고 호칭하며, 모든 React 컴포넌트는 자신의 props를 다룰때

순수함수처럼 동작해야한다.

 

*순수함수와 비순수함수

https://velog.io/@jiiyoung/JavaScript-%EC%88%9C%EC%88%98%ED%95%A8%EC%88%98%EC%99%80-%EB%B9%84%EC%88%9C%EC%88%98%ED%95%A8%EC%88%98

[JavaScript] 순수함수와 비순수함수

props를 받는 함수형 컴포넌트에 인자를 정의하면 props를 속성으로 가지는 객체 Object 가 해당 인자로 전달된다.

컴포넌트 내부에서 사용 시 객체에 존재하는 값을 가져오듯 점 연산자를 상ㅇ하여 props를 꺼내 쓸 수도 있는데 사용하는 방법은 '{[인자이름].[props이름]}' 형태로 사용한다.

function Person(props) {
	return {
		<div>{props.name}</div>
		<div>{props.age}</div>
	}
}

props를 받을 때 구조 분해 할당을 사용하여 아래와 같이 점 연산자 사용을 줄일 수 있다.

*구조분해할당

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

구조 분해 할당 - JavaScript | MDN

// 객체 인자를 구조 분해 할당하여 props 받아오기
function Person({ name, age }) {
	return {
		<div>{name}</div>
		<div>{age}</div>
	}
}

클래스형 컴포넌틍서 props를 사용할 경우 this.props 로 불러와 사용한다.

// 클래스형 컴포넌트에서 props 사용하기
class Person extends React.Component {
	render() {
		// 구조 분해 할당으로 props 사용
		const { name, age } = this.props;	
		return <div>{name}</div>;
    }
}

 

 

state

• state는 컴포넌트 내부의 동적 데이터를 의미한다.
• state를 사용하는 방식에는 컴포넌트에 따라 다른데 클래스형에서는 컴포넌트 자체가 state를 지니는 방식으로 사용하고 함수형에서는 useState 함수 , Hook 을 통해 사용한다.
• 여러 개 자식으로부터 데이터를 모으거나 두 개의 자식 컴포넌트들이 서로 통신하게 하기 위해 조상 컴포넌트에 state를 정의한다. 조상 컴포넌트가 props를 사용하여 자식 컴포넌트에 state를 다시 전달함으로 서로 동기화한다.

 

Class Component 에서 state 사용하기

class ClassExample extends React.Component {
  constructor(props) {
    super(props);
    // state 초기값 설정
    this.state = {
      count: 0,
    };
  }

  render() {
    const { count } = this.state;		// state 조회
      return (
        <div>
          <p>You clicked {count} times</p>
          <button onClick={() => {
            this.setState({		// this.setState를 통해 state 업데이트
              count: count + 1
            });
          }}>
            Click me
          </button>
        </div>
      );
    }
  }
}

• this.state 를 통해 state 객체의 초기값을 설정하고 조회 가능
• state 값을 변경할 경우 this.setState를 사용해 새로운 값을 줄 수 있음

 

Function Component 에서 state 사용하기

const [mode, setMode] = useState['']

예전에는 함수형 컴포넌트에서 사용하려면 제약조건이 많았었는데 16.8 버전에서 Hook이 추가되면서 함수형 컴포넌트에서 사용하기가 용이해졌다.