React State & Props Intro

State

• 살면서 변할 수 있는 값
• 컴포넌트의 사용 중 컴포넌트 내부에서 변할 수 있는 값
  

Props vs State

• props는 외부로부터 전달받은 값
  - ex) 이름, 성별
• state는 내부에서 변화하는 값
  - 컴퍼넌트 안에서만(외부 영향을 받지 않는다)
  - ex) 나이, 현재 사는 곳, 취업 여부, 결혼/연애 여부
  - on/off 여부, Counter
  

props의 특징

• 컴포넌트의 속성(property)을 의미한다.
• props는 성별이나 이름처럼 변하지 않는 외부로부터 전달받은 값으로, 웹 애플리케이션에서 해당 컴포넌트가 가진 속성에 해당한다.
• 부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값입니다.
• React 컴포넌트는 JavaScript 함수와 클래스로, props를 함수의 전달인자(arguments)처럼 전달받아 이를 기반으로 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다.
• 컴포넌트가 최초 렌더링 될 때 화면에 출력하고자 하는 데이터를 담은 초깃값으로 사용할 수 있다.
• 객체 형태입니다.
• props로 어떤 타입의 값도 넣어 전달할 수 있도록 props는 객체의 형태를 가집니다.
• props는 읽기 전용입니다.
• props는 성별이나 이름처럼 외부로부터 전달받아 변하지 않는 값이다. - - props는 함부로 변경될 수 없는 읽기 전용(read-only) 객체입니다.(함부로 변경되지 않아야 하기 때문이다)

How to use props

• props 사용시 3단계로 나눌 수 있다.
  - 1. 하위 컴포너트에 전달하고자 하는 값(data)과 속성을 정의한다
  • 2. props를 이용하여 정의된 값과 속성을 전달한다.
  • 3. 전달받은 props를 렌더링한다.
• 위 단계에 맞추어 props를 사용하기 위해선 <Parent>와 <Child>라는 컴포넌트를 선언하고 <Parent> 컴포넌트 안에 <Child> 컴포넌트를 작성한다.

function Parent() {
  return (
    <div className="parent">
      <h1>I'm the parent</h1>
      <Child />
    </div>
  );
};

function Child() {
  return (
    <div className="child"></div>
  );
};