React Props/State

 

 

페이스북(이제는 메타구나)의 개발자들이 만든 자바스크립트 오픈라이브러리 React!

 

간단하고 유지/보수가 편한 컴포넌트 기반으로 SPA를 만들 수 있는 장점 때문에 전세계적으로 이용되는 라이브러리다. 

 

오늘은 React의 핵심 개념 중 하나인 Props와 State에 대해 알아보자

 

 

 

 

Props

 

React에서 데이터는 위에서 아래로 (Top to Bottom) 흐른다. 

 

즉 데이터를 전달할 때는 부모 컴포넌트에서 자식 컴포넌트에 데이터를 전달 해 줄 수 있지만 

자식 컴포넌트에서는 부모 컴포넌트로 데이터를 전달 할 수 없다. 

 

또한 부모 컴포넌트로 받은 데이터는 자식 컴포넌트가 수정을 할 수 없다. (Read Only)

이유는, 자식 컴포넌트가 데이터를 수정하면 부모 컴포넌트의 데이터를 참조하고 있는 수많은 다른 자식 컴포넌트의 데이터에도 영향을 끼치기 때문에 이런 구조를 만들어 놓았다. 

 

부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 개념이 바로 Props이다. 

부모에서 자식에게 props데이터를 물려주려면 아래와 같은 방식으로 코드를 작성한다. 

 

(※Hook 방식입니다.)

 

return <자식컴포넌트 "자식컴포넌트에서 사용할 프로퍼티명"="자식에게 넘겨줄 데이터" />

 

자 그럼 위의 방식대로 데이터를 넘겨주면 자식 컴포넌트에서는 어떻게 사용을 하면 될까?

방식은 아래와 같다. 

 

function 함수명(파라미터) { return {파라미터.프로퍼티명}}

 

Class 방식: https://velog.io/@jengyoung/Class%ED%98%95-Component%EC%97%90%EC%84%9C%EC%9D%98-Props-%EC%82%AC%EC%9A%A9

 

 

State

 

Props가 부모 컴포넌트에서 자식 컴포넌트로 데이터를 주는 개념이었다면, State는 한 컴포넌트 내에서 유저와의 상호작용에 따라 변경되는 데이터를 의미한다. State를 이용하는 방법은 아래와 같다. 

 

function CheckboxExample() {
  const [isChecked, setIsChecked] = useState(false); 
  // --> isChecked는 사용할 변수명, setIsChecked는 변수의 값을 재할당할 수 있는 함수, useState()파라미터에는 초기값을 설정한다. 

  const handleChecked = (event) => {
    setIsChecked(event.target.checked);
  };
  return (
    <div className="App">
      <input type="checkbox" checked={isChecked} onChange={handleChecked} />
      <span>{isChecked ? "Checked!!" : "Unchecked"}</span>
    </div>
  );
}

 

어느 블로거의 글에 따르면 Sate는 컴포넌트의 복잡도를 높이기 때문에 가급적 사용하지 않아도 되는 곳에는 사용하지 않는 것을 지향한다고 한다.