React: Props & State

앞서서 쓴 컴포넌트의 기능을 알아본 후, 기억해야할 것은 props 와 state다.

Props?

컴포넌트로 사용자가 로그인 할때마다 "Hello, 사용자이름"의 문구를 띄우고 싶다면, props를 사용하면 된다. Props는 기본적으로 부모 컴포넌트로부터 전달 받은 데이터를 지니고 있는 object이다. 그래서 props의 속성에 접근할때에는 propsname.key의 형태로 접근이 가능하다.

// Welcome 컴포넌트 Declaration
function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

// App 컴포넌트 Declaration
function App() {
  return (
    <div>
      <Welcome name = "뱅기" />
      <Welcome name = "뱅규" />
      <Welcome name = "벨로그" />
    </div>
  );
}

// 실행하는 html위치에 App컴포넌트를 위치시키는 명령어
ReactDOM.render(<App />, document.getElementById("root"));

위의 코드를 실행하면, Welcome 컴포넌트의 props.name값만 계속 변하며, 세개의 다른 메시지가 창에 띄워진다. Props를 Javascript에 있는 함수의 input과 같은 기능을 한다고 생각하면 된다.

부모 컴포넌트에서 자식 컴포넌트로 넘기는 구조를 하나 더 만들어보자.

// Parent Component
function Parent() {
  const [color, setColor] = useState('red');

  return (
    <div>
      <h1>Parent Component</h1>
      <Child titleColor={color} />
    </div>
  );

// Child Component
function Child(props) {

  return (
    <div>
      <h1 style={{color : props.titleColor}}>Child Component</h1>
    </div>
  );
}

export default Child;

1. 부모 Component에서 color의 상태를 red로 지정하고 그 지정된 color를 h1태그 밑에 자식 Component를 위치시켰다. 그리고 그 내부에 titleColor에 color속성을 적용시키며 titleColor의 값은 red가 되었다.
2. 자식 Component를 들여다보면, 부모 Component로부터 props를 받아왔기 때문에 부모인 Parent와 다르게 Declaration에서 Child(props)라고 쓴것을 알 수 있다.
3. 자식 Component가 부모의 props를 받아와서, 해당 props의 key인 titleColor의 value에 접근하기 위해 props.titleColor를 쓴것을 알 수 있다. 그 결과 자식 Component의 h1태그의 스타일, 그중에서도 color속성이 red가 되어 작동시켰을때 페이지에서 'Child Component'라는 글자가 빨간색으로 나오는것을 확인할 수 있다.

State?

State는 컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값으로 화면에 보여지는 컴포넌트의 UI정보를 의미한다. 컴포넌트 내부에서만 쓸 수 있으며, 얼마든지 데이터를 변경할 수 있습니다. 주로 useState를 사용합니다.

const [color,setColor] = useState("red");

[color, setColor]에서 배열의 index가 0인 곳에 들어가는 것은 state의 상태를 담는 변수이다(여기서는 color라는 변수). Index가 1인 위치에 들어가는 것은 state의 상태를 변화시킬 수 있는 함수가 들어간다. useState의 소괄호 안에는 state의 초기값이 들어가게 된다. 이것이 기본적인 useState의 형식이다.

예시로 버튼을 누를때마다 숫자가 바뀌는 기능을 만들어보자.

function Number() {
  const [count, setCount] = useState(0);
  
  function decrementCount() {
    setCount(prevCount => prevCount - 1)
  }
  
  function incrementCount() {
    setCount(prevCount => prevCount + 1)
  }
  
  return(
    <>
      <button onClick = {decrementCount}>-</button>
      <span>{count}</span>
      <button onClick = {incrementCount}>+</button>
    </>
  );
}

이처럼 State를 이용하면, 계속해서 변수의 상태가 변하므로 이벤트에 의해 쉽게 상태가 변경되고 그것이 웹페이지에 즉시 구현된다는것을 알 수 있다. 지금은 간단한 예시로서 변수나 value값 하나만 들어갔지만, state를 변화시키는 함수 자리를 제외하고는 객체가 들어올 수도 있다.