React - State & Props 알아보기

안녕하세요.

Hynn 입니다.

 

이번 포스팅에서는 React 에서 가장 중요하게 알아두어야 할 State, Props 에 대해서 알아보도록 하겠습니다.

 

 

1. State 알아보기

 

State, 즉 상태라는 것은 계속해서 변화되는 특정한 상태를 의미합니다.

즉, 현재 우리가 사용하는 모든 Application 은 상태에 따라 동작이 다르고, 그에 따른 결과가 다르게 나타납니다.

예를 들어, 회원가입을 하더라도, 동일하게 하더라도, 내가 입력한 값에 따라 상태가 다르게 출력될 수 있고, 이는 동적으로 결정되기 때문에, 이를 State 라고 합니다.

 

예를 들어, Application 에서 대표적으로 State 를 사용하는 예시라면, 최근에 자주 설명하는 Dark Mode 를 설정할때도, 상태에 DarkMode True/False 에 따라 페이지의 랜더링이 다르게 출력되는 예시가 되겠습니다.

즉, State 는 이 상태를 가진 Component 가 직접 관리하여 값을 변경할 수 있는 동적인 요소가 됩니다.

 

이를 예시로 들수 있는 가장 간단한 Counter 를 생성하여 예시를 들어 보겠습니다.

코드를 먼저 작성후, 설명을 제공하겠습니다.

 

import React, { useState } from 'react';

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

  const increse = () => {
    setCount(count + 1);
  };

  const decrese = () => {
    setCount(count - 1);
  };
  return (
    <>
      <div>
        <h2>{count}</h2>
        <button onClick={increse}>+</button>
        <button onClick={decrese}>-</button>
      </div>
    </>
  );
};

export default Counter;

먼저, State 를 사용하기 위해서는, React 역시도 Library 이기때문에, React, useState 라는 항목을 import 합니다.

그리고나서 별도로 선언하는 것이 아니라, 이 상태를 사용하고자 하는 상수/변수 내에 이를 비구조화 할당으로 선언해야 합니다.

 

각각의 요소는 아래의 규칙을 가지고 있습니다.

이는 이후에 Recoil, Redux 와 같은 전역 상태 관리에서도 유사하거나 비슷한 규칙을 가지고 있기 때문에, 기본적 규칙에 대해서는 꼭 아셔야 합니다.

 

먼저 비구조화할당으로 배열로 되어 있는 2개의 요소 중 첫번째는, 상태의 이름이 됩니다. 위의 예시에서는 Count 가 상태의 이름입니다.

그리고 setCount 는 상태를 setting(change) 하는 의미의 setCount 가 들어가게 되고, useState 를 입력후 매개변수에는 초기값을 넣어야 합니다, 위의 예시에서는 숫자형데이터가 들어가므로, 0의 초기값을 가집니다.

 

그리고 각 버튼에 이를 구현하는 함수에는 setCount 를 사용하여 상태에 +1, -1를 구현하게 됩니다. 

그리고 나서 이 상태값을 의미하는 Count 는 실제 HTML Element 요소에 중괄호로 표현하게 됩니다.

 

그리고 각 버튼에 onClick 함수를 작성하면  State를 처리하는 기본적 구현이 가능합니다. 

이것이 React 에서 말하는 기본적인 State 입니다.

 

이를 각각 이름을 나누어하면, 각 상태를 독립적으로 관리할 수 있다는 장점이 드러납니다. 

 

2. Props

 

State가 상태라면, Props 는 컴포넌트에 데이터를 전달하는 것을 의미합니다.

즉 App.jsx 로부터 시작되는 컴포넌트에서 하위로 데이터를 전달하는 것이기도 합니다.

React 는 위의 글에서 힌트가 있듯이, 단방향 데이터 플로우를 따릅니다.

즉, 부모 컴포넌트에서 자식 컴포넌트로 이동되는 데이터 흐름 구조를 갖게 됩니다. 

 

React 에서는, 사용자의 입력에 따라, 데이터를 갱신하고 화면을 업데이트하게되면, 단방향 데이터 흐름에 따라, 변화를 감지하고 화면을 업데이트하는 코드를 작성해야 합니다. 

즉, 부모 Component -> 자식 Component 의 흐름을 따릅니다. 

 

이를 간단하게 살펴보도록 하겠습니다. 

이전에 State 에서 사용한 Counter 를 가지고 활용해보도록 하겠습니다.

 

이를 위해 먼저 아래와 같이 작성하여 Props 를 전달할 수 있습니다.

 

1)App.jsx

import './App.css';
import Counter from './counter';

function App() {
  const test = () => {
    return 1;
  };

  const ContentProps = {
    a: 1,
    b: 'hynn',
    c: test,
    initalValue: 5,
  };

  return (
    <>
      <Counter initalValue={5} a={1} b={'hynn'} c={test} {...ContentProps} />
    </>
  );
}

export default App;

 

2) Counter.jsx

import React, { useState } from 'react';

const Counter = (props) => {
  console.log(props);
  const [count, setCount] = useState(props.initalValue);
  const [count2, setCount2] = useState(props.a);

  const increse = () => {
    setCount(count + 1);
  };

  const decrese = () => {
    setCount(count - 1);
  };

  const increse2 = () => {
    setCount2(count2 + 1);
  };

  const decrese2 = () => {
    setCount2(count2 - 1);
  };

  return (
    <>
      <div>
        <h2>{count}</h2>
        <button onClick={increse}>+</button>
        <button onClick={decrese}>-</button>
      </div>

      <div>
        <h2>{count2}</h2>
        <button onClick={increse2}>+</button>
        <button onClick={decrese2}>-</button>
      </div>
    </>
  );
};

export default Counter;

 

Props 의 의미를 이해한다면 더욱 쉽게 접근이 가능합니다. Properties 의 약자인 Props 는, 말 그대로 Propertie 를 하위 컴포넌트에 전달하는 역활입니다.

여기서 말하는 이 데이터는, 일종의 원시타입의 데이터일 수도 있고, 예시처럼 함수가 될수도 있습니다.

즉, 사용자가 전달하고자 하는 Props 는 어떠한 것이든 전달을 할 수도 있습니다. 또한, 이전에 잠깐 다루었던 스프레드연산자를 사용하여 전달할 수도 있습니다.

 

이는 실제 브라우저에서 Console 탭을 살펴보면 객체화되어 전달된 것을 볼 수 있습니다. 이를 우리는 점 표기법등을 사용해서 작성할 수 있게 됩니다. 

 

물론, 이를 올바르게 전달하지 않아 Undefined 가 출력될 경우에는, NaN 같은 오류가 발생할 수도 있기 때문에, DefaultProps를 설정할 수도 있습니다.

이는 아래와 같이 Counter.jsx 에 작성하여 구현할 수도 있습니다.

import React, { useState } from 'react';

const Counter = (props) => {
  console.log(props);
  const [count, setCount] = useState(props.initalValue);
  const [count2, setCount2] = useState(props.a);

  const increse = () => {
    setCount(count + 1);
  };

  const decrese = () => {
    setCount(count - 1);
  };

  const increse2 = () => {
    setCount2(count2 + 1);
  };

  const decrese2 = () => {
    setCount2(count2 - 1);
  };

  return (
    <>
      <div>
        <h2>{count}</h2>
        <button onClick={increse}>+</button>
        <button onClick={decrese}>-</button>
      </div>

      <div>
        <h2>{count2}</h2>
        <button onClick={increse2}>+</button>
        <button onClick={decrese2}>-</button>
      </div>
    </>
  );
};

Counter.defaultProps = {
  initalValue: 0,
};

export default Counter;

 

기본적인 사용법만을 작성했으므로, 실제 사용에서는 환경에 맞게 잘 사용해야 할 것입니다.

다음포스팅에서는 React 에서 주로 알아야할 개념인, DOM조작, 배열 사용 및 최적화 기법에 대한 포스팅을 작성하도록 하겠습니다.

 

감사합니다.