[React] Props, State

Props

---

props는 properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소이다. props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있다. 

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

export default Welcome;

import React from 'react';
import Welcome from './Welcome';
 
const App = () => {
  return <MyComponent name="React" />;
};
 
export default App;

 

Default값 설정

import React from 'react';
 
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
 
Welcome.defaultProps = {
  name: '기본 값'
};
 
export default MyComponent;

 

Children

리액트 컴포넌트를 사용할 때 컴포넌트 태그 사이의 내용을 보여 주는 props.

태그 사이의 값들을 모두 가져오기때문에 shell 컴포넌트를 만들때 사용하기 좋다.

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

export default Welcome;

import React from 'react';
import Welcome from './Welcome';
 
const App = () => {
  return <MyComponent>This is my Children</MyComponent>;
};
 
export default App;

 

구조분해(destructuring assignment)

import React from 'react';

const Welcome = ({ name, age }) => {
  return (
	   <>
		 <h1>Hello, {name}</h1>
		 <h1>I'm {age}</h1>
	   </>
  );
};

MyComponent.defaultProps = {
  name: '기본 이름'
};

export default MyComponent;

 

State

---

리액트에서 state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다. props는 (함수 매개변수처럼) 컴포넌트에 전달되는 반면 state는 (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리된다.

props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이며, 컴포넌트 자신은 해당 props를 읽기 전용으로만 사용할 수 있다. 따라서 props를 바꾸려면 부모 컴포넌트에서 바꾸어 주어야 한다. props와 state를 구분하는 이유는 사용하는 쪽과 구현하는 쪽을 철저하게 분리시켜서 양쪽의 편의성을 각자 도모하기 위해서이다.

 

useState

useState 함수의 인자에는 상태의 초깃값을 넣어 준다. 초기값은 숫자, 문자열, 배열 등 형태는 자유롭다. state는 항상 초기값을 가진다.

useState는 state 변수, 해당 변수를 갱신할 수 있는 함수 이 두 가지 쌍을 반환한다. 이를 편리하게 사용하기 위해서 구조분해를 주로 사용한다. 함수의 이름을 꼭 set[state 변수]로 지정하지 않아도 되지만 주로 이와 같은 형식으로 사용한다.

import React, { useState } from 'react';

function Example() {
  // 새로운 state 변수를 선언하고, count라 부르겠습니다.
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

위 예제에서는 useState를 사용하여 count의 초기 값을 0으로 지정하였다. 이후 버튼이 클릭 될 때마다 setCount함수가 호출되어 state 변수를 갱신한다.

 

Props, State

---

위 그림이 props와 state사이의 관계를 가장 잘 나타내는 그림인 것 같다. 이 그림을 이해하면 왜 props가 immutable(불변성)을 가지는지도 쉽게 이해할 수 있다. stackoverflow의 설명이 이해가 쉬워 가져왔다

💡 A component should manage its own state, but it should not manage its own props. props is essentially "state that is managed by the component owner." That's why props are immutable.

owner가 아니기 때문에 바꿀 수 없는 값인 것이다. Component는 자신의 state만 관리할 수 있다(공식문서에 따르면 state를 private하다고 생각해도 된다고 한다)

 

참고

---

https://stackoverflow.com/questions/47471131/why-are-react-props-immutable

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

https://ko.reactjs.org/docs/hooks-state.html

https://github.com/uberVU/react-guide/blob/master/props-vs-state.md