React : props and state

props

props(properties)란 컴포넌트가 외부에서 받는 데이터를 의미한다.

즉, 부모 컴포넌트에서 자식 컴포넌트로 전달해 주는 데이터를 말한다.

props는 읽기 전용 데이터이므로 전달받은 자식 컴포넌트 내부에서 직접 수정할 수 없다.

자식 컴포넌트에서 전달받은 props는 변경이 불가능한 대신 props를 전달해준 부모 컴포넌트만 props를 변경하여 자식 컴포넌트가 변경된 데이터를 받게 된다.

💡 props란?
"props는 부모 - 자식 컴포넌트 간의 데이터를 전달하는데 사용되며, 상속받은 자식 컴포넌트 내부에서는 값이 변경 불가능한 readonly 데이터이다."

props 예제

App.js를 부모 컴포넌트라고 가정

다른 컴포넌트(class type, function type)에 props로 데이터를 전달해주자.

App.js (부모 컴포넌트)

import "./App.css";
import ChildComponent1 from "./mydir/ChildComponent1";
import ChildComponent2 from "./mydir/ChildComponent2";

function App() {
	return (
		<div className="App">
			<ChildComponent1 name="yyummmmmmmm" />
			<ChildComponent2 name="yyummmmmmmm" />
		</div>
	);
}

export default App;

ChildComponent1.js (class type)

import { Component } from "react";

class ChildComponent1 extends Component {
    render() {
        return (
            <h1>Hello, {this.props.name}!</h1>
        );
    }
}

export default ChildComponent1;

💡 class type의 컴포넌트에서 주의사항
"props로 값을 전달받을 때 this를 붙여주자!"

ChildComponent2.js (function type)

import React from "react";

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

export default ChildComponent2;

---

state

state는 컴포넌트 내부에서 관리되는 데이터를 의미한다.

즉, 컴포넌트 자체가 가지고 있는 지역변수 개념의 데이터라고 말할 수 있겠다.

state는 컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있다. 각각의 state는 독립적이어서 state는 오직 state가 생성된 컴포넌트 내에서만 변경이 가능하다.

state는 동적인 데이터를 다룰 때 사용하며, 사용자와의 상호작용(사용자 입력) 또는 네트워크 응답과 같은 이벤트에 응답하여 데이터를 동적으로 변경할 때 사용한다.

💡 state 란?
"state는 컴포넌트 내부에서 관리되는 지역 변수 개념의 데이터이다. 컴포넌트 내부에서 값을 변경할 수 있으며, 동적 데이터를 다룰 때 사용한다."

state 예제

일반 변수에 저장

import { useState } from "react";
import "./App.css";


function App() {
	let name = 'yyummmmmmmm';
	return (
		<div className="App">
			<div className="pink">
				<h4>{name}</h4>
			</div>
		</div>
	);
}

export default App;

위처럼 자료를 잠깐 저장할 때는 변수를 선언해주고 저장해주면 된다.
하지만 우리가 원하는 방식은 state에 자료를 저장하고 출력하는 방법이다. 아래 예시를 더 보자!

state에 데이터 저장

state 만드는 법

1. import { useState } from "react";
 : state를 만들기 위한 useState 함수를 import해준다.

2. let/const [state를 저장할 변수 이름, state 변경을 위한 함수] = useState(초기값);
 : 이 때 state 변수의 이름을 직관적으로 정하고,
   변경 함수의 경우 카멜 케이스로 set을 접두사로 써주고 뒤에 변수이름을 붙인다.

import { useState } from "react";
import "./App.css";


function App() {
	// let name = 'yyummmmmmmm';
	const [name, setName] = useState('yyummmmmmmm');
	return (
		<div className="App">
			<div className="pink">
				<h4>{name}</h4>
			</div>
		</div>
	);
}

export default App;

import { useState } from "react";
import "./App.css";


function App() {
	// let name = 'yyummmmmmmm';
	const [name, setName] = useState('yyummmmmmmm');
	const [title, setTitle] = useState(['state', 'props', 'react']);
    
	return (
		<div className="App">
			<div className="pink">
				<h4>{name}</h4>
			</div>
			<div className="list">
				<h4>{title[0]}</h4>
				<p>글쓴이 : {name}</p>
			</div>
		</div>
	);
}

export default App;

위와 같이 state를 배열로도 저장 가능하며, 인덱스에 맞게 출력이 가능하다!

state 사용 이유

✨ 왜 state를 사용해야할까?

단순히 변수에 값을 저장했다고 가정해보자, 사용자가 값을 수정했거나 새로운 데이터를 받아왔을 경우 일반적인 변수는 갑자기 변경되었을 때 html에 자동으로 반영이 안된다.

일반 변수와 다르게 state안의 데이터가 변경되었을 때는 우리가 html을 변경해줄 필요없이 html을 자동으로 리렌더링 해준다. 값의 변화가 있을 시 자동으로 html에 반영되게 만들고 싶다면 state를 사용해주자!

다만 모든 데이터를 state로 만드는 것은 비효율적이다. 변경 사항이 적은 것들은 직접 코딩해주거나 일반 변수에 데이터를 담아두어 관리하고 자주 변화되는 값들을 자동으로 반영이 될 수 있도록 원하는 경우에만 state에 저장하는 편이 나아보인다.

자주 변경될 것 같은 html 부분을 state에 저장해서 관리해주는 것을 꼭 기억하자!

state 값 변경

onClick 이벤트 핸들러를 사용하여 클릭 시 숫자를 카운팅하는 간단한 기능을 만들어 보자.
좋아요 숫자는 사용자가 눌렀을 때마다 변화하는 값이라 state로 만드는 것이 좋을 것이다.

import { useState } from "react";
import "./App.css";

function App() {
	// let name = 'yyummmmmmmm';
	const [name, setName] = useState('yyummmmmmmm');
	const [title, setTitle] = useState(['state', 'props', 'react']); 
	const [count, setCount] = useState(0);
    
	function likeCount() {
		setCount(count + 1);
	}

	return (
		<div className="App">
			<div className="pink">
				<h4>{name}</h4>
			</div>
			<div  className="list">
				<h4>{title[0]} <span onClick={() => {likeCount()}}>👍</span> {count}</h4>
				<p>글쓴이 : {name}</p>
			</div>
		</div>
	);
}

export default App;

Reference

🙏 Know yourself, follow your passion : props와 state의 차이점