Props와 State

리액트 컴포넌트의 두 가지 데이터

---

우리는 앞선 게시글을 통해 리액트는 컴포넌트 기반 사용되는 라이브러리라는 것을 알았다. 모두 알고 있듯 컴포넌트는 코드를 필요에 따라 작게 나눈 단위다. 그렇다면 공통된, 혹은 공유해야 하는 데이터를 컴포넌트끼리 주고받을 때에는 어떻게 해야 할까? 이를 위해 나온 개념이 바로 Props와 State다. 리액트에서는 이 두 가지 데이터를 통해 컴포넌트 내부, 혹은 컴포넌트 사이의 데이터를 활용한다.

 

Props

---

Props는 Properties의 줄임말이다. 영어 사전을 뒤져보자. Property는 속성, 성질 등의 뜻을 가지고 있다. React에서도 이를 그대로 적용해서 생각하면 된다. props는 부모 컴포넌트에서 자식 컴포넌트에게 데이터를 전달할 때 사용하는 개념이다.

 

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

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

자, 이 코드는 React 공식 홈페이지에서 props를 설명할 때 사용한 예시 코드다. 이를 한번 살펴보도록 하자. 우선 Welcome이라는 컴포넌트를 작성해줬다. 그리고 이 컴포넌트를 엘리먼트로 ReactDOM.render()를 호출했다. 이때 살펴볼 것은 <Welcome /> 안에 쓰여있는 name="Sara"다. 이는 Welcome 컴포넌트에 name이라는 props를 전달해준 것이다. 이때 name의 값은 Sara가 된다.

 

Welcome 컴포넌트 안을 살펴보자. 이 컴포넌트는 "Hello, {props.name}"이라는 문장을 출력한다. 어느 정도 눈치챈 분들도 있겠지만 여기서 {props.name}은 부모 컴포넌트로부터 받아온 props 값 중, name이라는 이름을 가진 props를 꺼내 사용하겠다는 뜻이다. 여기서 props.name값은 "Sara"가 된다.

 

이처럼 부모 컴포넌트에서 자식 컴포넌트 호출 시 특정 데이터 값을 넣어주는 것, 이를 props라고 한다. 이때 알아두어야 할 점이 한 가지 있다.

 

"props는 수정할 수 없다"는 점이다. 말 그대로 props로 받은 값은 수정할 수 없다. Props 값은 read-only다. 앞서 property의 뜻에 관한 이야기를 했다. property라는 단어의 뜻대로 props는 컴포넌트의 속성이 된다. 속성을 쉽게 수정할 수는 없겠지? props값을 지정할 수 있는 방법은 두 가지뿐이다. 처음 부모 컴포넌트에서 자식 컴포넌트로 보낼 때, 그리고 default값을 설정할 때. 부모 컴포넌트로부터 받은 props를 자식 컴포넌트에서 수정하지 말도록 하자.

 

State

---

이번에 살펴볼 것은 State다. state는 한 컴포넌트 내부에서 관리하는 데이터다. 컴포넌트 내부에서 관리하기 때문에 props와 달리 컴포넌트 안에서 변경 또한 가능하다.

 

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>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

위 코드는 React 공식 홈페이지의 state 설명 부분에서 활용된 예시다. 이 코드는 현재 시각을 출력하는 코드다. 자. 이제 생성자 메소드를 살펴보자. this.state={date: new Date()};가 보이는가? 이 부분이 바로 state를 설정하는 부분이다. 현재 컴포넌트 state에 date라는 변수 명으로 현재 시각을 불러왔다. 이제 컴포넌트 내부 어디에서나 this.state.date를 통해 이 변수 값을 불러올 수 있게 되었다.

 

만일 props로 이 데이터를 관리한다면, date 변수를 수정할 때마다 부모 컴포넌트에서 수정하고 다시 자식 컴포넌트로 보내는 과정이 필요할 것이다. 하지만 date 변수는 컴포넌트 내부의 state로 정의되었기 때문에 date 변수를 수정하려면 다른 곳에 갈 필요 없이 바로 clock 컴포넌트 내부에서 수정할 수 있다.

 

여기서 잠깐, 'props 설명은 함수형 컴포넌트인데 state 설명은 왜 클래스형 컴포넌트지?'라는 의문을 가질 수 있다. 원래 state는 클래스형 컴포넌트에서 사용하는 개념이었다. 하지만 지난 2019년, 리액트 16.8 버전 이후 함수형 컴포넌트에서도 state 개념을 쓸 수 있게 되었다.

 

const [example, setExample] = useState("참고용이지롱")

바로 이렇게 말이다. 이제 example이라는 변수는 "참고용이지롱"이라는 기본값을 가진 컴포넌트 내부의 state다. 이를 변경하기 위해선 setExample을 사용해주면 된다. 여기서 state 사용 시 주의할 점이 나온다. 앞서 이야기한 대로, props와 달리 state는 컴포넌트 내부에서 수정해줄 수 있다. 하지만 수정 방법을 반드시 체크해줘야 한다.

 

"state는 절대 직접 수정해선 안된다"는 것을 확인해두자. 예를 들어 위의 example 변수를 수정한다고 해보자. 이때 example의 값을 직접 건드리는 것이 아니라 반드시 setState를 사용해야 한다. 만일 해당 메소드를 사용하지 않고 직접 state 값을 바꿔준다면 React에서 해당 state의 변경을 감지하지 못하기 때문이다.

// Wrong
example = "수정이 될까요?"
// Correct
setExample("수정이 될까요?")

앞서 클래스형 컴포넌트에서 봤던 생성자를 기억하는가? state를 설정할 수 있는 유일한 공간은 바로 그 constructor다. 때문에 클래스형 컴포넌트에서도 this.setState()를 이용해 state값을 수정하는데, 위의 setExample을 이용하는 것도 이와 같은 이유다.

 

 

 

최종 정리

---

props

• 부모 컴포넌트에서 자식 컴포넌트로 보내는 데이터
• 자식 컴포넌트에서는 props를 받기만 하지, 수정할 수 없음

state

• 컴포넌트 내부에서 관리하는 데이터
• props와 달리 컴포넌트 내부에서 수정 가능하지만, 직접 수정하는 것이 아니라 setState()를 사용해야함.

 

 

 

참고

---

https://ko.reactjs.org/docs/components-and-props.html

Components와 Props – React

https://ko.reactjs.org/docs/state-and-lifecycle.html

State and Lifecycle – React

https://freestrokes.tistory.com/156

React props와 state 알아보기