[TIL #3] React - Props, State 란?

React를 사용하다보면 필연적으로 데이터를 다루게 되는데 이때 사용하는 방법이 바로 Props 와 State 이다.
처음에 강의를 들었을 땐 '그래서 둘의 차이가 정확히 뭐라는거지..? 왜.. 쓰는거지? ' 라는 생각이 들 정도로 헷갈렸다 😅
하지만 React를 사용할때 정말정말 중요한 개념이므로 예제 코드와 함께 확실하게 정리해보자!

(예제 코드는 여기서 확인이 가능하다!)

Props

Props란 상위 컴포넌트가 하위 컴포넌트에게 데이터를 전달하고자 할 때 사용하는 개념이다. 이때 전달하는 데이터는 하나의 값일수도 있고 함수일수도 있다.
위의 사진에 적혀있다 싶이 수정이 불가능하고 읽기만 가능하다는 특징이 있다.

App.js

import React from 'react';
import PropsTest from './PropsTest';

const App = () => {
  return(
    <>
      <PropsTest name="김채원" />
    </>
  );
};

export default App;

App.js는 상위 컴포넌트로 PropsTest.js라는 하위 컴포넌트에게 name="김채원" 이라는 props를 전달하고 있다. 이때 name은 Props의 이름이라고 생각하면 이해하기가 편하다.

PropsTest.js

import React from "react";

const PropsTest = ({ name }) => {
  return <h2>{name}님 어서오세요!</h2>;
};

export default PropsTest;

PropsTest.js는 상위 컴포넌트인 App.js로 부터 name값을 전달 받아 사용하고 있다.
출력되는 결과를 확인하면 아래와 같이 나타나게 된다.

위의 예제에서는 하나의 Props만 전달해서 사용했지만 원하는 만큼 설정해서 전달도 가능하다.

State

State란 컴포넌트 내부에서 가지고 있는 해당 컴포넌트의 상태 값들을 의미한다. Props와는 다르게 useState()라는 함수를 이용해서 수정이 가능하다는 특징이 있다. (만약 컴포넌트가 함수형이 아니고 클래스형이라면 setState()로 수정 가능)

App.js

import React from 'react';
import StateTest from './StateTest';

const App = () => {
  return(
    <>
      <StateTest />
    </>
  );
};

export default App;

StateTest.js

import React, {useState} from 'react';

const StateTest = () => {

  const [number, setNumber] = useState(0);

  const NumberIncrease = () => {  
    setNumber(number+1);
  };

  const NumberDecrease = () => {
    setNumber(number-1);
  };

  return (
    <>
    	<h1>숫자 카운트</h1>
    	<h2>{number}</h2>
    	<button onClick={NumberIncrease}>+</button>
    	<button onClick={NumberDecrease}>-</button>
    </>
  );
};

export default StateTest;

StateTest는 useState() 함수를 통해서 number라는 State를 선언하고 수정할 수 있도록 setNumber도 선언한다. 이때 number의 초기 값은 0이다. NumberIncrease, NumberDecrease함수는 각각 위에서 선언한 State인 Number 값을 증가시키고 감소시키는 역할을 한다.
이렇게 선언한 State를 화면에 출력하고, 함수들은 각각의 버튼과 연결했고 결과는 아래와 같다.