props와 state 개념

props와 state 개념

리액트에서는 '컴포넌트'라는 구성단위로 프론트 개발을 함

컴포넌트는 구성요소라는 뜻인데, 화면을 구성하는 요소들을 각각 만들고 그것을 하나로 합쳐 하나의 페이지가 되는 형식임
이 컴포넌트 또한 작게 쪼개서 작은 부분을 합쳐 하나의 컴포넌트로 만들 수 있음

하나의 컴포넌트 안에서 쪼개고 쪼개기를 반복하면 하나의 작은 tree 구조처럼 될 수 있음

큰 요소 안에 작은 요소가 있으니 부모 자식의 관계가 형성될 수 있음

 

 

❓ 그럼 리액트로 개발할 때 중요한 개념인 props 인자와 state는 무엇일까

 

---

 

props

props는 property의 약자로, 부모에게 받아온 데이터

리액트의 Data Flow는 단방향 형식으로 부모에서부터 자식으로 이동하기 때문에 거꾸로 올라갈 수 없음

따라서 props에 있는 데이터들은 수정이 불가능하며 오직 안에 있는 값을 꺼내서 사용할 수만 있음

 

리액트 페이지 문서에 있는 props 객체 예시👇

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

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

위의 코드를 보면 element에 Welcome을 담고 있음

Welcome은 부모인 element에 있는 Sara를 props에 담아 내려받고 사용함

 

---

state

state는 사용자(클라이언트)와 더욱 dynamic 한 통신을 위해 만들어짐

state는 컴포넌트의 특정 상태를 기억하여 화면에 반영하고, 상태가 사용자에 의해 변경되면 다시 화면이 변경되는 기능을 하기 위해 존재는 객체임
state 객체를 사용하기 위해서는 부모를 상속받는 class를 생성하여 생성자로 사용해야 함

 

코드를 통해 예시👇

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

위의 코드를 보면 시간이 변할 때 마다 화면을 업데이트해 주는 코드를 볼 수 있음
이때 시간은 계속해서 변하는 상태 값이기 때문에 state 객체 안에 넣어줌으로써 상태를 관리할 수 있음

이 외에도 onclick 이벤트의 클릭 정보를 저장하거나 하는 등의 방식으로 state를 사용하여 좀 더 많은 기능을 페이지에 추가할 수 있음