리액트 React State, Props

리액트 React State, Props

 

리액트를 사용할 때 꼭 알아야 하는 개념인 State와 Props에 대해 알아보자.

 

Props는 컴포넌트 외부에서 컴포넌트에게 주는 데이터
State는 컴포넌트 내부에서 대상의 상태를 나타내는 데이터

 

State

 

리액트를 사용하여 개발하는 것과 바닐라 자바스크립트를 사용하여 개발하는 것의 가장 큰 차이는 직접 DOM을 조작하지 않는다는 것이다.

 

DOM을 직접 조작하지 않는 이유 = 리액트를 사용하는 이유 (아래 글 참고)

리액트를 사용하는 이유 (SPA, CSR, SSR)

 

 

DOM을 직접 조작하지 않기 때문에 대신 상태값을 주어 상태값의 변경에 따라 리렌더링(Re-rendering)을 시키게 된다. 여기서 바로 'State상태’ 개념이 나오게 된다.

 

State 에 값을 할당해주어 상태값을 변화시킬 때는 Class형 컴포넌트에서는 setState라는 React 내장함수를 사용하고, 새롭게 등장한 Function형 컴포넌트에서는 훅(Hook)을 이용하여 useState를 사용할 수 있다.

 

Class Component

class Example extends React.Component {
  constructor(props) {
    super(props);
    // state 초기값 설정
    this.state = {
      count: 0,
    };
  }

  render() {
    const { count } = this.state;		// state 조회
      return (
        <div>
          <p>You clicked {count} times</p>
          <button onClick={() => {
            this.setState({		// this.setState를 통해 state 업데이트
              count: count + 1
            });
          }}>
            Click me
          </button>
        </div>
      );
    }
  }
}

 

Function Component

import React, {useState} from 'react';

function Example() {
  const [count, setCount] = useState(0);
  const plusOne = () => {
    setCount(count + 1);
  }

  return(
    <div>
      <p>You clicked {count} times</p>
      <button onClick={plusOne}>
        Click me
      </button>
    </div>
  )
}

 

 

Props

 

리액트는 한 페이지 별로 구성해서 코드를 짜는 것이 아니라 컴포넌트(= 부품) 별로 코드를 구성한다. 이는 한번 만든 코드를 부품처럼 필요한 곳에 재사용할 수 있도록 만드는 방법이다. 그래서 컴포넌트를 넘나드는 데이터값이 필요할 때 Props로 데이터를 넘겨줄 수 있다. 부모 컴포넌트에서 자식 컴포넌트로 넘겨준다.

 

props 는 객체 데이터로 반환되는데, 보통 구조분해 할당을 통해서 값을 가져다 사용한다.

 

Props 예시

 

Mom이라는 부모 컴포넌트 안에 Baby라는 자식 컴포넌트가 있다고 가정해보자.

여기서 food와 feeling이 key이고, milk와 love가 value인 객체 데이터를 아래와 같이 전달해준다.

function Mom() {
  return(
    <Baby food={milk} feeling={love} />
  )
}

그러면 자식 컴포넌트에서는 이 데이터를 받아와 활용할 수가 있다.

function Baby({food, feeling}) {
  return(
    <h1>
    My mom gives me {food} and {feeling}.
    </h1>
  )
}

// => My mom gives me milk and love.