React_State & Props

props

컴포넌트의 속성(property)
props는 성별이나 이름처럼 변하지 않는 외부로부터 전달받은 값으로, 웹 어플리케이션에서 해당 컴포넌트가 가진 속성

JavaScript 함수와 유사- “props”라고 하는 임의의 입력(arguments)을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환

상위 컴포넌트로부터 전달받은 값

읽기 전용(read-only) 객체 - 함부로 변경될 수 x

<a href="www.codestates.com">Click me to visit Code States</a>
//  HTML 속성과 값 다루는 법

<Child attribute={value} />
<Child text={"I'm the eldest child"} />
//  React에서 JSX 속성 및 값을 할당하는 방법
  
// 유사. 다만, 전달하고자 하는 값을 중괄호 {} 를 이용하여 감쌈
-----------------------------------------------  
 function Parent() {
  return (
    <div className="parent">
      <h1>I'm the parent</h1>
      <Child text={"I'm the eldest child"} />
      <Child />
    </div>
  );
};

// <Parent> 컴포넌트 안에 <Child> 컴포넌트를 작성
function Child(props) {
  console.log("props : ", props); // props : {text: "I'm the eldest child"}
  return (
    <div className="child">
      <p>{props.text}</p>
    </div>
  );
};
// 이 객체의 { key : value } 는 <Parent> 컴포넌트에서 정의한 { attribute : value } 의 형태
//  props 의 value 또한 dot notation 으로 접근

// <Child> 컴포넌트에서 props.text렌더링 

usestate의 원리
setState 함수는 자신과 함께 반환된 변수를 변경시키는게 아니라(const!!), 다음 useState가 반환할 react 모듈의 _value를 변경시키고, 컴포넌트를 리렌더링 시키는 역할을 합니다. 변경된 값은 useState가 가져옴