[React] props와 state

👽 props와 state

---

리액트 컴포넌트에서 다루는 데이터는 두 개로 나뉜다. 바로 props와 state인데, props는 부모 컴포넌트가 자식 컴포넌트에게 주는 값이다. 자식 컴포넌트에서는 props를 받아오기만 하고, 받아온 props를 직접 수정할 수는 없다. 반면에 state는 컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있다.

 

💡 props

props는 컴포넌트를 부를 때 함께 지정한다. 아래 코드에서는 People 컴포넌트에 name prop과 age prop을 지정하였다.

<People name="mitt" age={ 28 } />
<People name="rachel" age={ 27 } />

• 위와 같이 같은 타입의 컴포넌트에 다른 props 값을 주어 패턴이 반복되는 형태로 컴포넌트의 효율적인 재사용이 가능하다.
• props에는 불리언, 숫자, 배열과 같은 다양한 형태의 데이터를 담을 수 있고, 공백 구분으로 여러 개를 담는 것도 가능하다. props에 있는 데이터는 문자열인 경우를 제외하면 모두 중괄호로 값을 감싸야 한다.

 

💡 props 값 가져오기

• props는 읽기 전용이므로 컴포넌트의 내부에서 props를 수정할 수 없다.
• props를 받는 함수형 컴포넌트에 인자를 정의하면, props를 속성으로 가지는 객체 Object가 해당 인자로 전달된다. 컴포넌트 내부에서 사용 시, 객체에 존재하는 값을 가져오듯 점 연산자를 사용하여 원하는 props를 꺼내 쓸 수 있고, 이를 중괄호로 감싸는 형태로 사용한다.

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

 

💡 state

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

 

💡 클래스형 컴포넌트에서 state 사용

클래스형 컴포넌트에서 state를 사용할 때는 객체 형식의 this.state를 통해 state 객체의 초기값을 설정하고 조회할 수 있다. state 값을 변경할 경우 this.setState를 사용하여 새로운 값을 준다.

class ClassExample extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  render() {
    const { count } = this.state;
      return (
        <div>
          <p>You clicked {count} times</p>
          <button onClick={() => {
            this.setState({
              count: count + 1
            });
          }}>
            Click me
          </button>
        </div>
      );
    }
  }
}

 

💡 함수형 컴포넌트에서 state 사용

useState()

• 리액트 컴포넌트에서 동적인 값을 상태(state)라고 부른다. 사용자 인터랙션을 통해 컴포넌트의 상태값이 동적으로 바뀔 경우에는 상태를 관리하는 것이 필요하다.
• Hooks 기능이 도입된 리액트 16.8 버전부터 useState() 함수를 통해 함수형 컴포넌트에서도 상태를 관리할 수 있다.
• https://trustmitt.tistory.com/41

React useState(), useEffect()

 

👽 props와 state EX

---

💡 props

<div id="name" class="label" onclick="alert('Hello World!');">
  Hello world!
</div>

위의 코드는 HTML의 div 태그에 id와 class 속성을 설정하고 onclick 속성에 직접 자바스크립트의 alert를 사용했다. 

 

const Text = ({text}) => {
  return <div>{text}</div>
}

const App = () => {
  return <Text text='Hello world!'/>
}

위와 같이 부모 컴포넌트(App)에서 자식 컴포넌트(Text)에 속성(Props)을 이용하여 Hello world! 라는 문자열 데이터를 전달하는 것을 확인할 수 있다.

 

💡 state

import React, { useState } from 'react';

const Text = ({text}) => {
  return <div>{text}</div>
}

const App = () => {
  const [count, setCount] = useState(0);

  return <div>
    <Text text={count} />
    <div onClick={() => setCount(count + 1)}>+</div>
  </div>
}

 

👽 Reference

---

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

Components and Props – React

https://reactjs.org/docs/state-and-lifecycle.html

State and Lifecycle – React

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

[React] Component와 props, state

https://studyingych.tistory.com/52

React Props, State 이해 및 사용법

https://velopert.com/3629

누구든지 하는 리액트 4편: props 와 state | VELOPERT.LOG