props 와 state 에 대해서 알아보자

리액트에서 props 와 state 라는 중요한 개념이 있다.

단순하게 생각해서

props 는 정의. 즉 변경 할 수 없는 값.

state 는 상태. 현재 컴포넌트에 상태. 즉, 변경 할 수 있는 값이다.

여기에서 조건이 있는데, state 를 사용 하려면, 함수형 컴포넌트가 아닌, class 형태의 컴포넌트를 React 를 상속받아 정의 해야한다.

코드로 보면 아마도 쉽게 이해하리라 본다.

아래 코드는 App.js 를 class 형태로 변경하고 state 를 정의 한 값이다.

중요 한 라인만 살펴보자

14 ~ 16 : 라인에서 state 값을 초기값으로 지정 해 주어야 한다. 지정 해 주지 않으면 리액트가 제공하는 상태 감지를 하지 못한다.

19 : 컴포넌트의 변경 사항이 있을때 리액트는 render() 메서드를 호출 하도록 되어있다.

25 : 리액트에서 변수 호출은 { value } 형태로 작성 할 수 있다. 예제에서는 state 의 count 값을 호출하였다.

27 ~ 29 : react 에서 state 값을 변경 하기위해 상속받은 Component 의 setState() 메서드를 이용 해야한다. 무슨 말이냐 하면, 아마 Component 를 상속받게 되면 아마 다음과 같은 메서드가 생성 될 것이다.

class App extends React.Component {
  // 가상으로 만들어진 메서드
  setState(object) {
    /* 내부 로직 */
  }
}

그러면 인자값으로 변경 할 state 결과 값을 넘기면 된다.

this.setState({ count: 3 });

그럼 해당 메서드를 button 의 onClick 이벤트로 연결한다.

<button onClick={() => this.setState({ count: 3 })}>Click!</button>

React 가 16.8 부터 hook을 제공하는데, hook 을 사용하면 PureComponent (먼저 함수 형 컴포넌트라고불렸던) 에도 state 를 사용 할 수 있다. 이 부분은 개념을 먼저 잡은 다음 설명 하도록 하겠다.

이제 props 를 보도록 하자. props 는 state 보다 더 단순하다.

아래 코드를 보면 간단하게 이해 할 수 있으리라고 본다.

<Header name="hello jihoon?" />

여기서 name 이 props 의 이름, name 의 value 가 props 의 value 인것이다

이게 다야!

그럼 Header 컴포넌트에서 아래처럼 부를 수 있다.

import React from "react";

function Header(props) {
  return <header>헤더 영역 {props.name}</header>;
}

export default Header;